Merge pull request #35 from ilong4rennes/refactor/fix-prevent-default

refactored the 'preventDefault' error, and removed comments

admin/src/Components/CollectionTable.js

@@ -3,13 +3,11 @@ import * as _ from "underscore";
 import { confirmModal } from "../message";
 
 const CollectionTable = (props) => {
-    // State variables
     const [sort, setSort] = useState({ key: null, order: "up" });
     const [items, setItems] = useState(null);
     const [page, setPage] = useState({});
     const [loading, setLoading] = useState(true);
 
-    // Destructure props
     const {
         collection,
         rowComponent,
@@ -19,7 +17,6 @@ const CollectionTable = (props) => {
         onPageNav,
     } = props;
 
-    // useEffect to handle subscription
     useEffect(() => {
         const unsubscribe = collection.subscribe(({ page, items }) => {
             setPage(page);
@@ -31,7 +28,6 @@ const CollectionTable = (props) => {
         };
     }, [collection]);
 
-    // Functions
     const renderHeading = (column, i) => {
         const sortState = sort;
 
@@ -127,7 +123,6 @@ const CollectionTable = (props) => {
             );
     };
 
-    // Render logic
     let rows = null;
     if (items !== null) {
         rows = items.map((item, i) => (

admin/src/Components/DatePeriodInput.js

@@ -7,7 +7,6 @@ const DatePeriodInput = ({ period }) => {
     const [end, setEnd] = useState(period.end || null);
 
     useEffect(() => {
-        // Synchronize state with period on subscription updates
         const unsubscribe = period.subscribe(() => {
             setStart(period.start);
             setEnd(period.end);

admin/src/Components/FileInput.jsx

@@ -1,104 +1,12 @@
 import React, { useState } from "react";
 
 const FileInput = () => {
-    // const [progressbarVisible, setProgressbarVisible] = useState(false);
-    // const [progressbarWidth, setProgressbarWidth] = useState(0);
     const [filename, setFilename] = useState("");
 
-    /*
-	var _this = this;
-	var settings = {
-		action: config.apiBasePath + this.props.action,
-		allow : "*.(txt|xml|csv)",
-		headers: {
-			"Authorization": "Bearer " + auth.getAccessToken()
-		},
-		loadstart: function()
-		{
-			_this.setState({
-				progressbarVisible: true,
-				progressbarWidth: 0,
-			});
-		},
-
-		progress: function(percent)
-		{
-			_this.setState({
-				progressbarWidth: Math.ceil(percent),
-			});
-		},
-
-		allcomplete: function(response, xhr)
-		{
-			// Show the progress bar for another seconds
-			setTimeout(function()
-			{
-				_this.setState({
-					progressbarVisible: false,
-					progressbarWidth: 0,
-				});
-			}, 1000);
-
-			// Fix error handling
-			if(xhr.status == 201)
-			{
-				// Save the filename
-				var result = JSON.parse(response);
-				_this.setState({filename: result.data.filename});
-
-				if(_this.props.onFile !== undefined)
-				{
-					_this.props.onFile(result.data.filename);
-				}
-			}
-			else
-			{
-				alert("Upload failed");
-			}
-
-		}
-	};
-
-	var select = UIkit.uploadSelect($("#upload-select"), settings),
-	drop = UIkit.uploadDrop($("#upload-drop"), settings);
-	*/
-
-    /*
-	var _this = this;
-
-	// A sync event is fired when the model is saved
-	// When the model is saved the field is no longer dirty
-	this.state.model.on("sync", function(event)
-	{
-		_this.setState({
-			isDirty: _this.state.model.attributeHasChanged(_this.props.name),
-		});
-	});
-
-	// Update this component when the model is changed
-	this.state.model.on("change", function()
-	{
-		if(_this.state.model.changed[_this.props.name] !== undefined)
-		{
-			_this.setState({
-				value: _this.state.model.changed[_this.props.name],
-				isDirty: _this.state.model.attributeHasChanged(_this.props.name),
-			});
-		}
-	});
-*/
-
     const clearUpload = () => {
         setFilename("");
     };
 
-    /*
-	onChange(event)
-	{
-		this.state.model.set(this.props.name, event.target.value);
-	}
-*/
-
     return (
         <div>
             <div id="upload-drop" className="uk-placeholder">
@@ -124,53 +32,9 @@ const FileInput = () => {
                         </span>
                     )}
                 </p>
-
-                {/* {progressbarVisible ? (
-                    <div>
-                        <div id="progressbar" className="uk-progress">
-                            <div
-                                className="uk-progress-bar"
-                                style={{ width: progressbarWidth + "%" }}
-                            >
-                                {progressbarWidth}%
-                            </div>
-                        </div>
-                    </div>
-                ) : (
-                    ""
-                )} */}
             </div>
         </div>
     );
-
-    /*
-	var classes = classNames({
-		"uk-form-row": true,
-		"selected": this.state.selected,
-		"changed": this.state.isDirty,
-		"error": this.state.error_column == this.props.name,
-	});
-	classes += " " + this.props.name;
-
-	return (
-		<div className={classes}>
-			<label htmlFor={this.props.name} className="uk-form-label">{this.props.title}</label>
-			<div className="uk-form-controls">
-				{this.props.icon ?
-					<div className="uk-form-icon">
-						<i className={"uk-icon-" + this.props.icon}></i>
-						<input type="text" name={this.props.name} id={this.props.name} disabled={this.props.disabled} value={this.state.value} placeholder={this.props.placeholder ? this.props.placeholder : this.props.title} onChange={this.onChange.bind(this)} className="uk-form-width-large" onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} />
-					</div>
-				:
-					<input type="text" name={this.props.name} id={this.props.name} disabled={this.props.disabled} value={this.state.value} placeholder={this.props.placeholder ? this.props.placeholder : this.props.title} onChange={this.onChange.bind(this)} className="uk-form-width-large" onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} />
-				}
-				{this.state.error_column == this.props.name ?
-					<p className="uk-form-help-block error">{this.state.error_message}</p>
-				: ""}
-			</div>
-		</div>
-	);
-*/
 };
 
 export default FileInput;

admin/src/Components/MemberForm.js

@@ -22,8 +22,8 @@ const MemberForm = ({ member, onSave, onDelete }) => {
             <form
                 className="uk-form"
                 onSubmit={(e) => {
-                    e.preventDefault();
                     onSave();
+                    return false;
                 }}
             >
                 <fieldset>

admin/src/Components/MessageForm.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Async } from "react-select";
 import { get } from "../gateway";
 import Group from "../Models/Group";
@@ -46,7 +46,7 @@ const MessageForm = ({ message, onSave, recipientSelect }) => {
         };
     }, [message]);
 
-    const loadOptions = useCallback((inputValue, callback) => {
+    const loadOptions = (inputValue, callback) => {
         Promise.all([
             get({
                 url: "/membership/group",
@@ -71,7 +71,7 @@ const MessageForm = ({ message, onSave, recipientSelect }) => {
                     .concat(members.map((d) => memberOption(d))),
             ),
         );
-    }, []);
+    };
 
     const handleSubmit = (e) => {
         e.preventDefault();

admin/src/Components/ProductForm.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactSelect from "react-select";
 import ProductAction, { ACTION_TYPES } from "../Models/ProductAction";
 import CheckboxInput from "./CheckboxInput";
@@ -62,32 +62,29 @@ const ProductForm = ({ product, onDelete, onSave }) => {
         product.removeAction(action);
     };
 
-    const renderAction = useCallback(
-        (action) => (
-            <div key={action.action_type} className="form-row uk-grid">
-                <div className="uk-with-1-6">{action.action_type}</div>
-                <div className="uk-with-1-6">
-                    <strong>Värde</strong>
-                </div>
-                <div className="uk-with-3-6">
-                    <TextInput
-                        model={action}
-                        label={false}
-                        formrow={false}
-                        name={"value"}
-                    />
-                </div>
-                <div className="uk-with-1-6">
-                    <a
-                        className="uk-button uk-button-danger"
-                        onClick={() => handleRemoveAction(action)}
-                    >
-                        <i className="uk-icon-trash-o" />
-                    </a>
-                </div>
+    const renderAction = (action) => (
+        <div key={action.action_type} className="form-row uk-grid">
+            <div className="uk-with-1-6">{action.action_type}</div>
+            <div className="uk-with-1-6">
+                <strong>Värde</strong>
             </div>
-        ),
-        [],
+            <div className="uk-with-3-6">
+                <TextInput
+                    model={action}
+                    label={false}
+                    formrow={false}
+                    name={"value"}
+                />
+            </div>
+            <div className="uk-with-1-6">
+                <a
+                    className="uk-button uk-button-danger"
+                    onClick={() => handleRemoveAction(action)}
+                >
+                    <i className="uk-icon-trash-o" />
+                </a>
+            </div>
+        </div>
     );
 
     const imageSrc = (o) => `data:${o.type};base64, ` + o.data;
@@ -97,8 +94,8 @@ const ProductForm = ({ product, onDelete, onSave }) => {
             <form
                 className="uk-form uk-form-stacked"
                 onSubmit={(e) => {
-                    e.preventDefault();
                     onSave();
+                    return false;
                 }}
             >
                 <fieldset className="uk-margin-top">

admin/src/Components/RequestPasswordReset.jsx

@@ -1,24 +1,26 @@
-import React, { useRef } from "react";
-import { withRouter } from "react-router"; // Retain withRouter for compatibility
+import React, { useState } from "react";
+import { withRouter } from "react-router";
 import auth from "../auth";
 import { browserHistory } from "../browser_history";
 import { showError, showSuccess } from "../message";
 
 const RequestPasswordReset = () => {
-    const userIdentificationRef = useRef(null);
+    const [userIdentification, setUserIdentification] = useState("");
+
+    const handleInputChange = (e) => {
+        setUserIdentification(e.target.value);
+    };
 
     const submit = (e) => {
         e.preventDefault();
 
-        const user_identification = userIdentificationRef.current.value;
-
         // Error handling
-        if (!user_identification) {
+        if (!userIdentification) {
             showError("You need to fill your email or member number.");
             return;
         }
 
-        auth.requestPasswordReset(user_identification).then(() => {
+        auth.requestPasswordReset(userIdentification).then(() => {
             showSuccess(
                 "Link to password reset will be sent to your email shortly.",
             );
@@ -53,7 +55,8 @@ const RequestPasswordReset = () => {
                             <div className="uk-form-icon">
                                 <i className="uk-icon-user" />
                                 <input
-                                    ref={userIdentificationRef}
+                                    value={userIdentification} // Controlled by state
+                                    onChange={handleInputChange} // Updates state on user input
                                     className="uk-form-large uk-form-width-large"
                                     type="text"
                                     placeholder="Email/Medlemsnummer"

admin/src/Components/SearchBox.jsx

@@ -1,8 +1,6 @@
-import React, { useRef } from "react";
+import React from "react";
 
 const SearchBox = ({ value, handleChange }) => {
-    const searchRef = useRef(null);
-
     return (
         <div className="filterbox">
             <div className="uk-grid">
@@ -15,7 +13,6 @@ const SearchBox = ({ value, handleChange }) => {
                             <i className="uk-icon-search" />
                             <input
                                 value={value}
-                                ref={searchRef}
                                 tabIndex="1"
                                 type="text"
                                 className="uk-form-width-large"

admin/src/Components/SelectInput.jsx

@@ -30,7 +30,6 @@ const SelectInput = (props) => {
         };
 
         const unsubscribe = props.model.subscribe(handleModelChange);
-        handleModelChange(); // Initialize state
 
         return () => {
             unsubscribe();

admin/src/Components/TextInput.jsx

@@ -16,7 +16,6 @@ const TextInput = (props) => {
         };
 
         const unsubscribe = model.subscribe(handleModelChange);
-        handleModelChange(); // Initialize state
 
         return () => {
             unsubscribe();

admin/src/Components/Textarea.jsx

@@ -15,7 +15,6 @@ const Textarea = (props) => {
         };
 
         const unsubscribe = model.subscribe(handleModelChange);
-        handleModelChange(); // Initialize state
 
         return () => {
             unsubscribe();