🐛 Fix bugs in RepositoryEditor

2024-11-21 20:44:18 +00:00 · 2021-05-11 18:05:01 +02:00 · 2021-05-11 18:05:01 +02:00 · 841356adf5
commit 841356adf5
parent b7a7da8621
9 changed files with 83 additions and 49 deletions
--- a/code/frontend/src/components/interactive/BoxConditionMap.js
+++ b/code/frontend/src/components/interactive/BoxConditionMap.js
@ -81,7 +81,7 @@ export default function BoxConditionMap({ ...props }) {
                map.off("zoom", onZoom)
            }
        },
-        [map],
+        [map, onMove, onZoom],
    )

    const onButtonClick = () => {
--- a/code/frontend/src/components/interactive/BoxRepositoryCreate.js
+++ b/code/frontend/src/components/interactive/BoxRepositoryCreate.js
@ -3,7 +3,7 @@ import BoxFull from "../base/BoxFull"
 import FormLabelled from "../base/FormLabelled"
 import FormLabel from "../base/formparts/FormLabel"
 import InputWithIcon from "../base/InputWithIcon"
-import { faFolder, faPencilAlt, faPlus } from "@fortawesome/free-solid-svg-icons"
+import { faBackward, faFolder, faPencilAlt, faPlus } from "@fortawesome/free-solid-svg-icons"
 import Radio from "../base/Radio"
 import Button from "../base/Button"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
@ -27,6 +27,7 @@ export default function BoxRepositoryCreate({ ...props }) {
        name,
        setName,
        save,
+        revert,
        error,
    } = useRepositoryEditor()

@ -55,7 +56,7 @@ export default function BoxRepositoryCreate({ ...props }) {
                            onChange={() => setEvaluationMode(0)}
                            checked={evaluationMode === 0}
                        />
-                        At least one filter
+                        One filter
                    </label>
                    &nbsp;
                    <label>
@ -73,20 +74,30 @@ export default function BoxRepositoryCreate({ ...props }) {
                 </FormAlert>
                       : null}
                {id ?
-                 <Button
-                     style={{ "gridColumn": "1 / 3" }}
-                     icon={faPencilAlt}
-                     color={"Green"}
-                     onClick={e => goToOnSuccess(save, history, "/repositories")}
-                 >
-                     Edit repository
-                 </Button>
+                 <>
+                     <Button
+                         style={{ "gridColumn": "1" }}
+                         icon={faBackward}
+                         color={"Red"}
+                         onClick={e => revert()}
+                     >
+                         Rollback edits
+                     </Button>
+                     <Button
+                         style={{ "gridColumn": "2" }}
+                         icon={faPencilAlt}
+                         color={"Green"}
+                         onClick={_ => goToOnSuccess(save, history, "/repositories")()}
+                     >
+                         Save changes
+                     </Button>
+                 </>
                    :
                 <Button
                     style={{ "gridColumn": "1 / 3" }}
                     icon={faPlus}
                     color={"Green"}
-                     onClick={e => goToOnSuccess(save, history, "/repositories")}
+                     onClick={_ => goToOnSuccess(save, history, "/repositories")()}
                 >
                     Create repository
                 </Button>
--- a/code/frontend/src/components/interactive/ConditionBadge.js
+++ b/code/frontend/src/components/interactive/ConditionBadge.js
@ -41,7 +41,6 @@ export default function ConditionBadge({ ...condition }) {
    let displayedContent = content
    if(type === 3) {
        let split = displayedContent.split(" ")
-        let type = split[0]
        let radius = Number.parseFloat(split[1]).toFixed(0)
        let radiusType = "m"
        if(radius >= 2000) {
--- a/code/frontend/src/components/interactive/RepositorySummaryBase.js
+++ b/code/frontend/src/components/interactive/RepositorySummaryBase.js
@ -70,11 +70,17 @@ export default function RepositorySummaryBase(
                </div>
            </div>
            <div className={Style.Middle}>
-                <div className={Style.StartDate}>
-                    Start: {start}
+                <div className={classNames(Style.MiddleLabel, Style.MiddleTop)}>
+                    Start:
                </div>
-                <div className={Style.EndDate}>
-                    End: {end}
+                <div className={classNames(Style.MiddleValue, Style.MiddleTop)}>
+                    {start}
+                </div>
+                <div className={classNames(Style.MiddleLabel, Style.MiddleBot)}>
+                    End:
+                </div>
+                <div className={classNames(Style.MiddleValue, Style.MiddleBot)}>
+                    {end}
                </div>
            </div>
            <div className={Style.Right}>
--- a/code/frontend/src/components/interactive/RepositorySummaryBase.module.css
+++ b/code/frontend/src/components/interactive/RepositorySummaryBase.module.css
@ -59,22 +59,30 @@
 .Middle {
    flex-grow: 1;
    height: 60px;
+    padding: 5px;

    background-color: var(--bg-light);

-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr 1fr;

 }

-.StartDate {
-
+.MiddleLabel {
+    grid-column: 1;
 }

-.EndDate {
+.MiddleValue {
+    grid-column: 2;
+}

+.MiddleTop {
+    grid-row: 1;
+}
+
+.MiddleBot {
+    grid-row: 2;
 }

 .Right {
--- a/code/frontend/src/components/providers/RepositoryEditor.js
+++ b/code/frontend/src/components/providers/RepositoryEditor.js
@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from "react"
+import React, { useCallback, useContext, useMemo, useState } from "react"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
 import useArrayState from "../../hooks/useArrayState"
 import Style from "./RepositoryEditor.module.css"
@ -51,21 +51,26 @@ export default function RepositoryEditor({

    const method = id ? "PUT" : "POST"
    const path = id ? `/api/v1/repositories/${id}` : `/api/v1/repositories/`
-    const body = {
-        "conditions": _conditions,
-        "end": _end,
-        "evaluation_mode": _evaluationMode,
-        "id": id,
-        "is_active": true,
-        "name": _name,
-        "owner": user,
-        "start": _start,
-    }
+    const body = useMemo(
+        () => {
+            return {
+                "conditions": _conditions,
+                "end": _end,
+                "evaluation_mode": _evaluationMode,
+                "id": id,
+                "is_active": true,
+                "name": _name,
+                "owner": user,
+                "start": _start,
+            }
+        },
+        [_conditions, _end, _evaluationMode, id, _name, user, _start],
+    )
    const { error, loading, fetchNow } = useBackend(fetchDataAuth, method, path, body)

    const save = useCallback(
        () => {
-            if(id) {
+            if(!id) {
                console.info("Creating new repository with body: ", body)
            }
            else {
@ -89,7 +94,7 @@ export default function RepositoryEditor({
            setRawConditions(conditions)
            setEvaluationMode(evaluationMode)
        },
-        [name, isActive, start, end, conditions, evaluationMode],
+        [name, isActive, start, end, conditions, evaluationMode, setRawConditions],
    )

    /**
@ -119,7 +124,7 @@ export default function RepositoryEditor({
            console.debug("Adding ", newCond, " to the Repository Conditions")
            appendRawCondition(newCond)
        },
-        [_conditions],
+        [_conditions, appendRawCondition],
    )

    return (
--- a/code/frontend/src/routes/PageEdit.js
+++ b/code/frontend/src/routes/PageEdit.js
@ -6,14 +6,19 @@ import RepositoryEditor from "../components/providers/RepositoryEditor"
 import useBackendImmediately from "../hooks/useBackendImmediately"
 import ContextUser from "../contexts/ContextUser"
 import renderContents from "../utils/renderContents"
+import { useParams } from "react-router"


-export default function PageEdit({ id, className, ...props }) {
+export default function PageEdit({ className, ...props }) {
+    const { id } = useParams()
    const { fetchDataAuth } = useContext(ContextUser)
    const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`)
    const contents = renderContents(
        repositoryRequest,
-        data => <RepositoryEditor className={Style.RepositoryEditor} {...data}/>,
+        data => {
+            console.debug("Data: ", data)
+            return <RepositoryEditor className={Style.RepositoryEditor} {...data}/>
+        },
    )

    return (
--- a/code/frontend/src/utils/goToOnSuccess.js
+++ b/code/frontend/src/utils/goToOnSuccess.js
@ -7,17 +7,17 @@
 * @returns {(function(): void)|*}
 */
 export default function goToOnSuccess(func, history, destination) {
-    return ([...args]) => {
-        let success = false
+    return (...args) => {
+        let result
        try {
-            func(...args)
-            success = true
+            console.debug("Trying to run: ", func)
+            result = func(...args)
+            history.push(destination)
+            return result
        }
        catch(e) {
-            success = false
-        }
-        if(success) {
-            history.push(destination)
+            console.debug("Failed to run ", func, ", not doing anything.")
+            throw e
        }
    }
 }
--- a/code/frontend/src/utils/renderContents.js
+++ b/code/frontend/src/utils/renderContents.js
@ -10,7 +10,7 @@ export default function renderContents(requestHookResults, renderFunction) {
        return <Loading/>
    }
    if(error) {
-        return <BoxAlert color={"Red"}>{error}</BoxAlert>
+        return <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
    }
    if(data) {
        return renderFunction(data)