✨ Add component BoxConditionDatetime

code/frontend/src/components/base/Button.module.css

@@ -5,7 +5,7 @@
     border-radius: 25px;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
-    padding: 10px;
+    padding: 5px;
     margin: 0 2px;
 
     cursor: pointer;

code/frontend/src/components/base/ButtonIconOnly.module.css

@@ -2,4 +2,6 @@
     width: 40px;
     height: 40px;
     border-radius: 20px;
+
+    flex-shrink: 0;
 }

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

@@ -0,0 +1,100 @@
+import React, { useState } from "react"
+import BoxFull from "../base/BoxFull"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import { faAt, faClock, faPlus } from "@fortawesome/free-solid-svg-icons"
+import InputWithIcon from "../base/InputWithIcon"
+import FormInline from "../base/FormInline"
+import Style from "./BoxConditionHashtag.module.css"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import Radio from "../base/Radio"
+import ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter"
+
+
+const INVALID_USER_CHARACTERS = /[^0-9TZ:-]/g
+
+
+/**
+ * A {@link BoxFull} that allows the user to select a Twitter user to search for, and then to add it as a Condition
+ * to the {@link ContextRepositoryEditor}.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function BoxConditionDatetime({ ...props }) {
+    const [datetime, setDatetime] = useState("")
+    const [ba, setBa] = useState(false)
+    const {conditions, appendCondition} = useRepositoryEditor()
+
+    const onInputChange = event => {
+        let text = event.target.value
+        text = text.toUpperCase()
+        text = text.replace(INVALID_USER_CHARACTERS, "")
+        return setDatetime(text)
+    }
+
+    const onButtonClick = () => {
+
+
+        const newCond = {
+            "id": null,
+            "type": 2,
+            "content": `${ba ? ">" : "<"} ${datetime}`
+        }
+
+        const date = new Date(datetime)
+        if(date.toString() === "Invalid Date") {
+            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is invalid.")
+            return
+        }
+
+        if(datetime === "") {
+            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
+            return
+        }
+
+        let duplicate = null;
+        for(const oldCond of conditions) {
+            if(newCond.type === oldCond.type && newCond.content === oldCond.content) {
+                duplicate = oldCond;
+                break;
+            }
+        }
+
+        if(duplicate) {
+            console.debug("Refusing to append ", newCond, " to the Conditions list, as ", duplicate, " already exists.")
+        }
+        else {
+            console.debug("Appending ", newCond, " to the Conditions list")
+            appendCondition(newCond)
+        }
+
+        setDatetime("")
+    }
+
+    return (
+        <BoxFull header={<span>Search by <FontAwesomeIcon icon={faClock}/> time period</span>} {...props}>
+            <FormInline>
+                <ButtonToggleBeforeAfter onUpdate={setBa}/>
+                <InputWithIcon
+                    className={Style.Input}
+                    id={"condition-datetime"}
+                    type={"datetime-local"}
+                    icon={faClock}
+                    value={datetime}
+                    onChange={onInputChange}
+                    placeholder={"2021-12-31T23:59"}
+                />
+                <ButtonIconOnly
+                    className={Style.Button}
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={onButtonClick}
+                />
+            </FormInline>
+        </BoxFull>
+    )
+}

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

@@ -0,0 +1,25 @@
+import React, { useState } from "react"
+import Style from "./ButtonToggleBeforeAfter.module.css"
+import classNames from "classnames"
+import Button from "../base/Button"
+
+
+export default function ButtonToggleBeforeAfter({ onUpdate, className, ...props }) {
+    const [value, setValue] = useState(false)
+
+    const onButtonClick = () => {
+        onUpdate(!value)
+        setValue(value => !value)
+    }
+
+    return (
+        <Button
+            color={"Grey"}
+            className={classNames(Style.ButtonToggleBeforeAfter, className)}
+            onClick={onButtonClick}
+            {...props}
+        >
+            {value ? "After" : "Before"}
+        </Button>
+    )
+}

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

@@ -0,0 +1,4 @@
+.ButtonToggleBeforeAfter {
+    width: 75px;
+    height: 28px;
+}

code/frontend/src/routes/PageDashboard.js

@@ -13,6 +13,7 @@ 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"
 
 
 export default function PageDashboard({ children, className, ...props }) {
@@ -28,11 +29,7 @@ export default function PageDashboard({ children, className, ...props }) {
                     🚧 Not implemented.
                 </BoxFull>
                 <BoxConditionHashtag className={Style.SearchByHashtags}/>
-                <BoxFull className={Style.SearchByTimePeriod} header={
-                    <label><Checkbox/> Search by time period</label>
-                }>
-                    🚧 Not implemented.
-                </BoxFull>
+                <BoxConditionDatetime classNmae={Style.SearchByTimePeriod}/>
                 <BoxConditions className={Style.Conditions}/>
                 <BoxFull className={Style.CreateDialog} header={"Create repository"}>
                     <FormLabelled>