✨ Implement BoxRepositoryCreate

code/frontend/src/components/interactive/BoxRepositoryCreate.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react"
+import Style from "./BoxRepositoryCreate.module.css"
+import classNames from "classnames"
+import BoxFull from "../base/BoxFull"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
+import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
+import Radio from "../base/Radio"
+import Button from "../base/Button"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+
+
+export default function BoxRepositoryCreate({ ...props }) {
+    const {
+        evaluationMode,
+        setEvaluationMode,
+        name,
+        setName,
+        save,
+    } = useRepositoryEditor()
+
+
+    return (
+        <BoxFull header={"Create repository"} {...props}>
+            <FormLabelled>
+                <FormLabel htmlFor={"repo-name"} text={"Repository name"}>
+                    <InputWithIcon
+                        id={"repo-name"}
+                        icon={faFolder}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                    />
+                </FormLabel>
+                <FormLabel htmlFor={"filter-mode"} text={"Add tweets if they satisfy"}>
+                    <label>
+                        <Radio
+                            name={"filter-mode"}
+                            onClick={() => setEvaluationMode(0)}
+                            checked={evaluationMode === 0}
+                        />
+                        At least one filter
+                    </label>
+                    &nbsp;
+                    <label>
+                        <Radio
+                            name={"filter-mode"}
+                            onClick={() => setEvaluationMode(1)}
+                            checked={evaluationMode === 1}
+                        />
+                        Every filter
+                    </label>
+                </FormLabel>
+                <Button style={{"gridColumn": "1 / 3"}} icon={faPlus} color={"Green"} onClick={e => save()}>
+                    Create repository
+                </Button>
+            </FormLabelled>
+        </BoxFull>
+    )
+}

code/frontend/src/components/interactive/BoxRepositoryCreate.module.css

@@ -0,0 +1,3 @@
+.BoxRepositoryCreate {
+
+}

code/frontend/src/routes/PageDashboard.js

@@ -2,19 +2,13 @@ import React from "react"
 import Style from "./PageDashboard.module.css"
 import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
-import BoxFull from "../components/base/BoxFull"
-import InputWithIcon from "../components/base/InputWithIcon"
-import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
-import Radio from "../components/base/Radio"
-import Button from "../components/base/Button"
-import FormLabelled from "../components/base/FormLabelled"
-import FormLabel from "../components/base/formparts/FormLabel"
 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 }) {
@@ -29,25 +23,7 @@ export default function PageDashboard({ children, className, ...props }) {
                 <BoxConditionUser className={Style.SearchByUser}/>
                 <BoxConditionDatetime className={Style.SearchByTimePeriod}/>
                 <BoxConditions className={Style.Conditions}/>
-                <BoxFull className={Style.CreateDialog} header={"Create repository"}>
+                <BoxRepositoryCreate className={Style.CreateDialog}/>
-                    <FormLabelled>
-                        <FormLabel htmlFor={"repo-name"} text={"Repository name"}>
-                            <InputWithIcon id={"repo-name"} icon={faFolder}/>
-                        </FormLabel>
-                        <FormLabel htmlFor={"filter-mode"} text={"Add tweets if they satisfy"}>
-                            <label>
-                                <Radio name={"filter-mode"} value={"or"}/> At least one filter
-                            </label>
-                            &nbsp;
-                            <label>
-                                <Radio name={"filter-mode"} value={"and"}/> Every filter
-                            </label>
-                        </FormLabel>
-                        <Button style={{"gridColumn": "1 / 3"}} icon={faPlus} color={"Green"}>
-                            Create repository
-                        </Button>
-                    </FormLabelled>
-                </BoxFull>
             </RepositoryEditor>
         </div>
     )

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

@@ -3,13 +3,13 @@
 
     grid-template-areas:
         "a a a"
-        "b c d"
+        "b c f"
-        "b e e"
+        "b d f"
-        "b f f"
+        "b e f"
         "b g g"
     ;
     grid-template-columns: 400px 1fr 1fr;
-    grid-template-rows: auto auto auto 1fr auto;
+    grid-template-rows: auto 1fr 1fr 1fr auto;
 
     grid-gap: 10px;