From c58b7a8c93a126bf6f70c1575d6d9953c4451f2b Mon Sep 17 00:00:00 2001 From: ilong4rennes Date: Sat, 14 Dec 2024 00:49:01 +0900 Subject: [PATCH 1/3] refactored the 'preventDefault' error, and removed comments --- admin/src/Components/CollectionTable.js | 5 - admin/src/Components/DatePeriodInput.js | 1 - admin/src/Components/FileInput.jsx | 136 ------------------ admin/src/Components/MemberForm.js | 2 +- admin/src/Components/ProductForm.jsx | 2 +- admin/src/Components/RequestPasswordReset.jsx | 19 +-- admin/src/Components/SearchBox.jsx | 5 +- admin/src/Components/SelectInput.jsx | 1 - admin/src/Components/TextInput.jsx | 1 - admin/src/Components/Textarea.jsx | 1 - admin/src/Membership/GroupBoxEditInfo.jsx | 4 +- admin/src/Membership/KeyEdit.jsx | 6 +- 12 files changed, 18 insertions(+), 165 deletions(-) diff --git a/admin/src/Components/CollectionTable.js b/admin/src/Components/CollectionTable.js index 91137963d..7ff6ac7d4 100644 --- a/admin/src/Components/CollectionTable.js +++ b/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) => ( diff --git a/admin/src/Components/DatePeriodInput.js b/admin/src/Components/DatePeriodInput.js index cb010b05c..37b71bd15 100644 --- a/admin/src/Components/DatePeriodInput.js +++ b/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); diff --git a/admin/src/Components/FileInput.jsx b/admin/src/Components/FileInput.jsx index 28510c0ad..7c6145fd0 100644 --- a/admin/src/Components/FileInput.jsx +++ b/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 (
@@ -124,53 +32,9 @@ const FileInput = () => { )}

- - {/* {progressbarVisible ? ( -
-
-
- {progressbarWidth}% -
-
-
- ) : ( - "" - )} */}
); - - /* - 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 ( -
- -
- {this.props.icon ? -
- - -
- : - - } - {this.state.error_column == this.props.name ? -

{this.state.error_message}

- : ""} -
-
- ); -*/ }; export default FileInput; diff --git a/admin/src/Components/MemberForm.js b/admin/src/Components/MemberForm.js index 7d4365676..80f92bea3 100644 --- a/admin/src/Components/MemberForm.js +++ b/admin/src/Components/MemberForm.js @@ -22,8 +22,8 @@ const MemberForm = ({ member, onSave, onDelete }) => {
{ - e.preventDefault(); onSave(); + return false; }} >
diff --git a/admin/src/Components/ProductForm.jsx b/admin/src/Components/ProductForm.jsx index 23722ca89..c5cfe8359 100644 --- a/admin/src/Components/ProductForm.jsx +++ b/admin/src/Components/ProductForm.jsx @@ -97,8 +97,8 @@ const ProductForm = ({ product, onDelete, onSave }) => { { - e.preventDefault(); onSave(); + return false; }} >
diff --git a/admin/src/Components/RequestPasswordReset.jsx b/admin/src/Components/RequestPasswordReset.jsx index c072e9cbe..5835ceaf3 100644 --- a/admin/src/Components/RequestPasswordReset.jsx +++ b/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 = () => {
{ - const searchRef = useRef(null); - return (
@@ -15,7 +13,6 @@ const SearchBox = ({ value, handleChange }) => { { }; const unsubscribe = props.model.subscribe(handleModelChange); - handleModelChange(); // Initialize state return () => { unsubscribe(); diff --git a/admin/src/Components/TextInput.jsx b/admin/src/Components/TextInput.jsx index caae1c8e3..611a7bb5a 100644 --- a/admin/src/Components/TextInput.jsx +++ b/admin/src/Components/TextInput.jsx @@ -16,7 +16,6 @@ const TextInput = (props) => { }; const unsubscribe = model.subscribe(handleModelChange); - handleModelChange(); // Initialize state return () => { unsubscribe(); diff --git a/admin/src/Components/Textarea.jsx b/admin/src/Components/Textarea.jsx index fb8e6feef..fd03142cc 100644 --- a/admin/src/Components/Textarea.jsx +++ b/admin/src/Components/Textarea.jsx @@ -15,7 +15,6 @@ const Textarea = (props) => { }; const unsubscribe = model.subscribe(handleModelChange); - handleModelChange(); // Initialize state return () => { unsubscribe(); diff --git a/admin/src/Membership/GroupBoxEditInfo.jsx b/admin/src/Membership/GroupBoxEditInfo.jsx index 62c2e7069..49c4c339f 100644 --- a/admin/src/Membership/GroupBoxEditInfo.jsx +++ b/admin/src/Membership/GroupBoxEditInfo.jsx @@ -6,10 +6,10 @@ import { confirmModal } from "../message"; const GroupBoxEditInfo = (props) => { const { router } = props; - const group = useContext(GroupContext); // Access the group from context + const group = useContext(GroupContext); if (!group) { - return
Group not found
; // Handle missing context gracefully + return
Group not found
; } return ( diff --git a/admin/src/Membership/KeyEdit.jsx b/admin/src/Membership/KeyEdit.jsx index 1560b488d..798461d39 100644 --- a/admin/src/Membership/KeyEdit.jsx +++ b/admin/src/Membership/KeyEdit.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useParams, withRouter } from "react-router"; +import { useParams } from "react-router"; import DateTimeInput from "../Components/DateTimeInput"; import TextInput from "../Components/TextInput"; import Textarea from "../Components/Textarea"; @@ -53,7 +53,6 @@ function KeyEdit() { model={keyRef.current} name="created_at" title="Skapad" - disabled={true} />
@@ -61,7 +60,6 @@ function KeyEdit() { model={keyRef.current} name="updated_at" title="Ändrad" - disabled={true} />
@@ -104,4 +102,4 @@ function KeyEdit() { ); } -export default withRouter(KeyEdit); +export default KeyEdit; From ef57643a84ef96077774348b354a595ebd6329c4 Mon Sep 17 00:00:00 2001 From: ilong4rennes Date: Sat, 14 Dec 2024 01:13:20 +0900 Subject: [PATCH 2/3] Remove useCallback --- admin/src/Components/MessageForm.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/admin/src/Components/MessageForm.jsx b/admin/src/Components/MessageForm.jsx index afa90f313..62436da90 100644 --- a/admin/src/Components/MessageForm.jsx +++ b/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(); From 577b374804f36c068f351b40db78ddb9a8e87d3d Mon Sep 17 00:00:00 2001 From: ilong4rennes Date: Sat, 14 Dec 2024 01:19:43 +0900 Subject: [PATCH 3/3] Remove useCallback --- admin/src/Components/ProductForm.jsx | 49 +++++++++++++--------------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/admin/src/Components/ProductForm.jsx b/admin/src/Components/ProductForm.jsx index c5cfe8359..2c2f515a8 100644 --- a/admin/src/Components/ProductForm.jsx +++ b/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) => ( -
-
{action.action_type}
-
- Värde -
-
- -
- + const renderAction = (action) => ( +
+
{action.action_type}
+
+ Värde
- ), - [], +
+ +
+ +
); const imageSrc = (o) => `data:${o.type};base64, ` + o.data;