🔧 Split RepositoryEditor and PageDashboard

code/frontend/src/components/providers/RepositoryEditor.js

@@ -1,10 +1,17 @@
 import React, { useCallback, useState } from "react"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
 import useArrayState from "../../hooks/useArrayState"
+import Style from "./RepositoryEditor.module.css"
+import BoxConditionMap from "../interactive/BoxConditionMap"
+import BoxConditionHashtag from "../interactive/BoxConditionHashtag"
+import BoxConditionUser from "../interactive/BoxConditionUser"
+import BoxConditionDatetime from "../interactive/BoxConditionDatetime"
+import BoxConditions from "../interactive/BoxConditions"
+import BoxRepositoryCreate from "../interactive/BoxRepositoryCreate"
+import classNames from "classnames"
 
 
 export default function RepositoryEditor({
-    children,
     refresh,
     id = null,
     name,
@@ -13,6 +20,7 @@ export default function RepositoryEditor({
     end,
     conditions,
     evaluation_mode: evaluationMode,
+    className,
 }) {
     /** The repository name. */
     const [_name, setName] = useState(name)
@@ -113,7 +121,14 @@ export default function RepositoryEditor({
             evaluationMode: _evaluationMode, setEvaluationMode,
             revert, save,
         }}>
-            {children}
+            <div className={classNames(Style.RepositoryEditor, className)}>
+                <BoxConditionMap className={Style.SearchByZone}/>
+                <BoxConditionHashtag className={Style.SearchByHashtags}/>
+                <BoxConditionUser className={Style.SearchByUser}/>
+                <BoxConditionDatetime className={Style.SearchByTimePeriod}/>
+                <BoxConditions className={Style.Conditions}/>
+                <BoxRepositoryCreate className={Style.CreateDialog}/>
+            </div>
         </ContextRepositoryEditor.Provider>
     )
 }

code/frontend/src/components/providers/RepositoryEditor.module.css

@@ -0,0 +1,42 @@
+.RepositoryEditor {
+    display: grid;
+
+    grid-template-areas:
+        "b c"
+        "b d"
+        "b e"
+        "b f"
+        "b g"
+;
+    grid-template-columns: 400px 1fr;
+    grid-template-rows: auto auto auto 1fr auto;
+
+    grid-gap: 10px;
+
+    width: 100%;
+    height: 100%;
+}
+
+.SearchByZone {
+    grid-area: b;
+}
+
+.SearchByHashtags {
+    grid-area: c;
+}
+
+.SearchByUser {
+    grid-area: d;
+}
+
+.SearchByTimePeriod {
+    grid-area: e;
+}
+
+.Conditions {
+    grid-area: f;
+}
+
+.CreateDialog {
+    grid-area: g;
+}

code/frontend/src/routes/PageDashboard.js

@@ -3,28 +3,15 @@ import Style from "./PageDashboard.module.css"
 import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
 import RepositoryEditor from "../components/providers/RepositoryEditor"
-import BoxConditionHashtag from "../components/interactive/BoxConditionHashtag"
-import BoxConditions from "../components/interactive/BoxConditions"
-import BoxConditionDatetime from "../components/interactive/BoxConditionDatetime"
-import BoxConditionMap from "../components/interactive/BoxConditionMap"
-import BoxConditionUser from "../components/interactive/BoxConditionUser"
-import BoxRepositoryCreate from "../components/interactive/BoxRepositoryCreate"
 
 
 export default function PageDashboard({ children, className, ...props }) {
     return (
         <div className={classNames(Style.PageHome, className)} {...props}>
-            <RepositoryEditor>
+            <BoxHeader className={Style.Header}>
-                <BoxHeader className={Style.Header}>
+                Create a new repository
-                    Create a new repository
+            </BoxHeader>
-                </BoxHeader>
+            <RepositoryEditor className={Style.RepositoryEditor}/>
-                <BoxConditionMap className={Style.SearchByZone}/>
-                <BoxConditionHashtag className={Style.SearchByHashtags}/>
-                <BoxConditionUser className={Style.SearchByUser}/>
-                <BoxConditionDatetime className={Style.SearchByTimePeriod}/>
-                <BoxConditions className={Style.Conditions}/>
-                <BoxRepositoryCreate className={Style.CreateDialog}/>
-            </RepositoryEditor>
         </div>
     )
 }

code/frontend/src/routes/PageDashboard.module.css

@@ -2,14 +2,10 @@
     display: grid;
 
     grid-template-areas:
-        "a a a"
+        "a"
-        "b c f"
+        "b"
-        "b d f"
-        "b e f"
-        "b g g"
     ;
-    grid-template-columns: 400px 1fr 1fr;
+    grid-template-rows: auto 1fr;
-    grid-template-rows: auto 1fr 1fr 1fr auto;
 
     grid-gap: 10px;
 
@@ -21,26 +17,6 @@
     grid-area: a;
 }
 
-.SearchByZone {
+.RepositoryEditor {
     grid-area: b;
 }
-
-.SearchByHashtags {
-    grid-area: c;
-}
-
-.SearchByUser {
-    grid-area: d;
-}
-
-.SearchByTimePeriod {
-    grid-area: e;
-}
-
-.Conditions {
-    grid-area: f;
-}
-
-.CreateDialog {
-    grid-area: g;
-}