🐛 Fix bugs in RepositoryEditor

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 = () => {

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" }}
+                     <Button
-                     icon={faPencilAlt}
+                         style={{ "gridColumn": "1" }}
-                     color={"Green"}
+                         icon={faBackward}
-                     onClick={e => goToOnSuccess(save, history, "/repositories")}
+                         color={"Red"}
-                 >
+                         onClick={e => revert()}
-                     Edit repository
+                     >
-                 </Button>
+                         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>

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) {

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}>
+                <div className={classNames(Style.MiddleLabel, Style.MiddleTop)}>
-                    Start: {start}
+                    Start:
                 </div>
-                <div className={Style.EndDate}>
+                <div className={classNames(Style.MiddleValue, Style.MiddleTop)}>
-                    End: {end}
+                    {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}>

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;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: auto 1fr;
-    justify-content: space-between;
+    grid-template-rows: 1fr 1fr;
-    align-items: stretch;
 
 }
 
-.StartDate {
+.MiddleLabel {
-
+    grid-column: 1;
 }
 
-.EndDate {
+.MiddleValue {
+    grid-column: 2;
+}
 
+.MiddleTop {
+    grid-row: 1;
+}
+
+.MiddleBot {
+    grid-row: 2;
 }
 
 .Right {

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 = {
+    const body = useMemo(
-        "conditions": _conditions,
+        () => {
-        "end": _end,
+            return {
-        "evaluation_mode": _evaluationMode,
+                "conditions": _conditions,
-        "id": id,
+                "end": _end,
-        "is_active": true,
+                "evaluation_mode": _evaluationMode,
-        "name": _name,
+                "id": id,
-        "owner": user,
+                "is_active": true,
-        "start": _start,
+                "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 (

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 (

code/frontend/src/utils/goToOnSuccess.js

@@ -7,17 +7,17 @@
  * @returns {(function(): void)|*}
  */
 export default function goToOnSuccess(func, history, destination) {
-    return ([...args]) => {
+    return (...args) => {
-        let success = false
+        let result
         try {
-            func(...args)
+            console.debug("Trying to run: ", func)
-            success = true
+            result = func(...args)
+            history.push(destination)
+            return result
         }
         catch(e) {
-            success = false
+            console.debug("Failed to run ", func, ", not doing anything.")
-        }
+            throw e
-        if(success) {
-            history.push(destination)
         }
     }
 }

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)