diff --git a/code/frontend/src/components/ButtonSmallX.module.css b/code/frontend/src/components/base/ButtonSmallX.module.css
similarity index 100%
rename from code/frontend/src/components/ButtonSmallX.module.css
rename to code/frontend/src/components/base/ButtonSmallX.module.css
diff --git a/code/frontend/src/components/Checkbox.js b/code/frontend/src/components/base/Checkbox.js
similarity index 100%
rename from code/frontend/src/components/Checkbox.js
rename to code/frontend/src/components/base/Checkbox.js
diff --git a/code/frontend/src/components/Checkbox.module.css b/code/frontend/src/components/base/Checkbox.module.css
similarity index 100%
rename from code/frontend/src/components/Checkbox.module.css
rename to code/frontend/src/components/base/Checkbox.module.css
diff --git a/code/frontend/src/components/base/FormInline.js b/code/frontend/src/components/base/FormInline.js
new file mode 100644
index 0000000..4eb7af3
--- /dev/null
+++ b/code/frontend/src/components/base/FormInline.js
@@ -0,0 +1,21 @@
+import React from "react"
+import Style from "./FormInline.module.css"
+import classNames from "classnames"
+
+
+/**
+ * A form displayed in a single line.
+ *
+ * @param children - The contents of the form.
+ * @param className - Additional class(es) to pass to the form.
+ * @param props - Additional props to pass to the form.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function FormInline({ children, className, ...props }) {
+ return (
+
+ )
+}
diff --git a/code/frontend/src/components/FormInline.module.css b/code/frontend/src/components/base/FormInline.module.css
similarity index 100%
rename from code/frontend/src/components/FormInline.module.css
rename to code/frontend/src/components/base/FormInline.module.css
diff --git a/code/frontend/src/components/FormLabelled.js b/code/frontend/src/components/base/FormLabelled.js
similarity index 83%
rename from code/frontend/src/components/FormLabelled.js
rename to code/frontend/src/components/base/FormLabelled.js
index 6d179d9..bc6e2c6 100644
--- a/code/frontend/src/components/FormLabelled.js
+++ b/code/frontend/src/components/base/FormLabelled.js
@@ -6,8 +6,6 @@ import classNames from "classnames"
/**
* A form with two columns: the leftmost one contains labels, while the rightmost one contains input elements.
*
- * The {@link FormLabel} element can be used to quickly generate labelled input elements.
- *
* @returns {JSX.Element}
* @constructor
*/
diff --git a/code/frontend/src/components/FormLabelled.module.css b/code/frontend/src/components/base/FormLabelled.module.css
similarity index 100%
rename from code/frontend/src/components/FormLabelled.module.css
rename to code/frontend/src/components/base/FormLabelled.module.css
diff --git a/code/frontend/src/components/Input.js b/code/frontend/src/components/base/Input.js
similarity index 100%
rename from code/frontend/src/components/Input.js
rename to code/frontend/src/components/base/Input.js
diff --git a/code/frontend/src/components/Input.module.css b/code/frontend/src/components/base/Input.module.css
similarity index 100%
rename from code/frontend/src/components/Input.module.css
rename to code/frontend/src/components/base/Input.module.css
diff --git a/code/frontend/src/components/InputWithIcon.js b/code/frontend/src/components/base/InputWithIcon.js
similarity index 97%
rename from code/frontend/src/components/InputWithIcon.js
rename to code/frontend/src/components/base/InputWithIcon.js
index b66638c..da72870 100644
--- a/code/frontend/src/components/InputWithIcon.js
+++ b/code/frontend/src/components/base/InputWithIcon.js
@@ -1,7 +1,7 @@
import React, {useState} from "react"
import Style from "./InputWithIcon.module.css"
import classNames from "classnames"
-import make_icon from "../utils/make_icon"
+import make_icon from "../../utils/make_icon"
/**
diff --git a/code/frontend/src/components/InputWithIcon.module.css b/code/frontend/src/components/base/InputWithIcon.module.css
similarity index 100%
rename from code/frontend/src/components/InputWithIcon.module.css
rename to code/frontend/src/components/base/InputWithIcon.module.css
diff --git a/code/frontend/src/components/Loading.js b/code/frontend/src/components/base/Loading.js
similarity index 61%
rename from code/frontend/src/components/Loading.js
rename to code/frontend/src/components/base/Loading.js
index b076e4d..02ad294 100644
--- a/code/frontend/src/components/Loading.js
+++ b/code/frontend/src/components/base/Loading.js
@@ -3,9 +3,15 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-export default function Loading({ ...props }) {
+/**
+ * A div with a spinning dots icon and a "Loading..." text.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Loading() {
return (
-
+
Loading...
)
diff --git a/code/frontend/src/components/Radio.js b/code/frontend/src/components/base/Radio.js
similarity index 100%
rename from code/frontend/src/components/Radio.js
rename to code/frontend/src/components/base/Radio.js
diff --git a/code/frontend/src/components/Radio.module.css b/code/frontend/src/components/base/Radio.module.css
similarity index 100%
rename from code/frontend/src/components/Radio.module.css
rename to code/frontend/src/components/base/Radio.module.css
diff --git a/code/frontend/src/components/Select.js b/code/frontend/src/components/base/Select.js
similarity index 100%
rename from code/frontend/src/components/Select.js
rename to code/frontend/src/components/base/Select.js
diff --git a/code/frontend/src/components/Select.module.css b/code/frontend/src/components/base/Select.module.css
similarity index 100%
rename from code/frontend/src/components/Select.module.css
rename to code/frontend/src/components/base/Select.module.css
diff --git a/code/frontend/src/components/Slider.js b/code/frontend/src/components/base/Slider.js
similarity index 100%
rename from code/frontend/src/components/Slider.js
rename to code/frontend/src/components/base/Slider.js
diff --git a/code/frontend/src/components/Slider.module.css b/code/frontend/src/components/base/Slider.module.css
similarity index 100%
rename from code/frontend/src/components/Slider.module.css
rename to code/frontend/src/components/base/Slider.module.css
diff --git a/code/frontend/src/components/TextArea.js b/code/frontend/src/components/base/TextArea.js
similarity index 100%
rename from code/frontend/src/components/TextArea.js
rename to code/frontend/src/components/base/TextArea.js
diff --git a/code/frontend/src/components/TextArea.module.css b/code/frontend/src/components/base/TextArea.module.css
similarity index 100%
rename from code/frontend/src/components/TextArea.module.css
rename to code/frontend/src/components/base/TextArea.module.css
diff --git a/code/frontend/src/components/FormAlert.js b/code/frontend/src/components/base/formparts/FormAlert.js
similarity index 94%
rename from code/frontend/src/components/FormAlert.js
rename to code/frontend/src/components/base/formparts/FormAlert.js
index 6449a0e..f30a707 100644
--- a/code/frontend/src/components/FormAlert.js
+++ b/code/frontend/src/components/base/formparts/FormAlert.js
@@ -1,7 +1,7 @@
import React from "react"
import Style from "./FormAlert.module.css"
import classNames from "classnames"
-import BoxAlert from "./BoxAlert"
+import BoxAlert from "../BoxAlert"
/**
diff --git a/code/frontend/src/components/FormAlert.module.css b/code/frontend/src/components/base/formparts/FormAlert.module.css
similarity index 100%
rename from code/frontend/src/components/FormAlert.module.css
rename to code/frontend/src/components/base/formparts/FormAlert.module.css
diff --git a/code/frontend/src/components/FormButton.js b/code/frontend/src/components/base/formparts/FormButton.js
similarity index 93%
rename from code/frontend/src/components/FormButton.js
rename to code/frontend/src/components/base/formparts/FormButton.js
index 0baeb61..7c93aa4 100644
--- a/code/frontend/src/components/FormButton.js
+++ b/code/frontend/src/components/base/formparts/FormButton.js
@@ -1,7 +1,7 @@
import React from "react"
import Style from "./FormButton.module.css"
import classNames from "classnames"
-import Button from "./Button"
+import Button from "../Button"
/**
diff --git a/code/frontend/src/components/FormButton.module.css b/code/frontend/src/components/base/formparts/FormButton.module.css
similarity index 100%
rename from code/frontend/src/components/FormButton.module.css
rename to code/frontend/src/components/base/formparts/FormButton.module.css
diff --git a/code/frontend/src/components/FormLabel.js b/code/frontend/src/components/base/formparts/FormLabel.js
similarity index 100%
rename from code/frontend/src/components/FormLabel.js
rename to code/frontend/src/components/base/formparts/FormLabel.js
diff --git a/code/frontend/src/components/FormLabel.module.css b/code/frontend/src/components/base/formparts/FormLabel.module.css
similarity index 100%
rename from code/frontend/src/components/FormLabel.module.css
rename to code/frontend/src/components/base/formparts/FormLabel.module.css
diff --git a/code/frontend/src/components/BoxConditionHashtag.js b/code/frontend/src/components/interactive/BoxConditionHashtag.js
similarity index 82%
rename from code/frontend/src/components/BoxConditionHashtag.js
rename to code/frontend/src/components/interactive/BoxConditionHashtag.js
index 7b00a13..a234e24 100644
--- a/code/frontend/src/components/BoxConditionHashtag.js
+++ b/code/frontend/src/components/interactive/BoxConditionHashtag.js
@@ -1,21 +1,29 @@
-import React, { useContext, useState } from "react"
-import BoxFull from "./BoxFull"
+import React, { useState } from "react"
+import BoxFull from "../base/BoxFull"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import { faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons"
-import InputWithIcon from "./InputWithIcon"
-import FormInline from "./FormInline"
+import InputWithIcon from "../base/InputWithIcon"
+import FormInline from "../base/FormInline"
import Style from "./BoxConditionHashtag.module.css"
-import ButtonIconOnly from "./ButtonIconOnly"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
// Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
// noinspection RegExpAnonymousGroup,LongLine
const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0100-\u024f\u0253-\u0254\u0256-\u0257\u0300-\u036f\u1e00-\u1eff\u0400-\u04ff\u0500-\u0527\u2de0-\u2dff\ua640-\ua69f\u0591-\u05bf\u05c1-\u05c2\u05c4-\u05c5\u05d0-\u05ea\u05f0-\u05f4\ufb12-\ufb28\ufb2a-\ufb36\ufb38-\ufb3c\ufb40-\ufb41\ufb43-\ufb44\ufb46-\ufb4f\u0610-\u061a\u0620-\u065f\u066e-\u06d3\u06d5-\u06dc\u06de-\u06e8\u06ea-\u06ef\u06fa-\u06fc\u0750-\u077f\u08a2-\u08ac\u08e4-\u08fe\ufb50-\ufbb1\ufbd3-\ufd3d\ufd50-\ufd8f\ufd92-\ufdc7\ufdf0-\ufdfb\ufe70-\ufe74\ufe76-\ufefc\u200c\u0e01-\u0e3a\u0e40-\u0e4e\u1100-\u11ff\u3130-\u3185\ua960-\ua97f\uac00-\ud7af\ud7b0-\ud7ff\uffa1-\uffdc\u30a1-\u30fa\u30fc-\u30fe\uff66-\uff9f\uff10-\uff19\uff21-\uff3a\uff41-\uff5a\u3041-\u3096\u3099-\u309e\u3400-\u4dbf\u4e00-\u9fff\u20000-\u2a6df\u2a700-\u2b73\u2b740-\u2b81\u2f800-\u2fa1])/g
+/**
+ * A {@link BoxFull} that allows the user to select a Twitter hashtag 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 BoxConditionHashtag({ ...props }) {
const [hashtag, setHashtag] = useState("")
- const {conditions, appendCondition} = useContext(ContextRepositoryEditor)
+ const {conditions, appendCondition} = useRepositoryEditor()
const onInputChange = event => {
let text = event.target.value
diff --git a/code/frontend/src/components/BoxConditionHashtag.module.css b/code/frontend/src/components/interactive/BoxConditionHashtag.module.css
similarity index 100%
rename from code/frontend/src/components/BoxConditionHashtag.module.css
rename to code/frontend/src/components/interactive/BoxConditionHashtag.module.css
diff --git a/code/frontend/src/components/BoxConditionUser.js b/code/frontend/src/components/interactive/BoxConditionUser.js
similarity index 72%
rename from code/frontend/src/components/BoxConditionUser.js
rename to code/frontend/src/components/interactive/BoxConditionUser.js
index 748f8d1..cc38959 100644
--- a/code/frontend/src/components/BoxConditionUser.js
+++ b/code/frontend/src/components/interactive/BoxConditionUser.js
@@ -1,20 +1,28 @@
-import React, { useContext, useState } from "react"
-import BoxFull from "./BoxFull"
+import React, { useState } from "react"
+import BoxFull from "../base/BoxFull"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import { faAt, faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons"
-import InputWithIcon from "./InputWithIcon"
-import FormInline from "./FormInline"
+import { faAt, 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 "./ButtonIconOnly"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/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 BoxConditionUser({ ...props }) {
const [user, setUser] = useState("")
- const {conditions, appendCondition} = useContext(ContextRepositoryEditor)
+ const {conditions, appendCondition} = useRepositoryEditor()
const onInputChange = event => {
let text = event.target.value
diff --git a/code/frontend/src/components/interactive/BoxConditions.js b/code/frontend/src/components/interactive/BoxConditions.js
new file mode 100644
index 0000000..fd542c9
--- /dev/null
+++ b/code/frontend/src/components/interactive/BoxConditions.js
@@ -0,0 +1,24 @@
+import React from "react"
+import BoxFull from "../base/BoxFull"
+import ConditionBadge from "./ConditionBadge"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+
+
+/**
+ * A box which renders all conditions of the {@link RepositoryEditor} as {@link ConditionBadge}s.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function BoxConditions({ ...props }) {
+ const {conditions} = useRepositoryEditor()
+
+ const badges = conditions.map((cond, pos) =>
)
+
+ return (
+
+ {badges}
+
+ )
+}
diff --git a/code/frontend/src/components/BoxLoggedIn.js b/code/frontend/src/components/interactive/BoxLoggedIn.js
similarity index 85%
rename from code/frontend/src/components/BoxLoggedIn.js
rename to code/frontend/src/components/interactive/BoxLoggedIn.js
index 533ead6..01340fd 100644
--- a/code/frontend/src/components/BoxLoggedIn.js
+++ b/code/frontend/src/components/interactive/BoxLoggedIn.js
@@ -1,9 +1,9 @@
import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
+import BoxFull from "../base/BoxFull"
import LoggedInUser from "./LoggedInUser"
-import Button from "./Button"
+import Button from "../base/Button"
import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
import { useHistory } from "react-router"
import Style from "./BoxLoggedIn.module.css"
import CurrentServer from "./CurrentServer"
@@ -27,7 +27,7 @@ export default function BoxLoggedIn({ ...props }) {
You are currently logged in at
as
.
- {
+ {
logout()
history.push("/login")
}} icon={faSignOutAlt}>Logout
diff --git a/code/frontend/src/components/BoxLoggedIn.module.css b/code/frontend/src/components/interactive/BoxLoggedIn.module.css
similarity index 100%
rename from code/frontend/src/components/BoxLoggedIn.module.css
rename to code/frontend/src/components/interactive/BoxLoggedIn.module.css
diff --git a/code/frontend/src/components/BoxLogin.js b/code/frontend/src/components/interactive/BoxLogin.js
similarity index 86%
rename from code/frontend/src/components/BoxLogin.js
rename to code/frontend/src/components/interactive/BoxLogin.js
index 2e09320..18e6286 100644
--- a/code/frontend/src/components/BoxLogin.js
+++ b/code/frontend/src/components/interactive/BoxLogin.js
@@ -1,13 +1,13 @@
import React, { useContext, useState } from "react"
-import FormLabelled from "./FormLabelled"
-import FormLabel from "./FormLabel"
-import InputWithIcon from "./InputWithIcon"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
import { faArrowRight, faEnvelope, faKey } from "@fortawesome/free-solid-svg-icons"
-import BoxFull from "./BoxFull"
-import FormButton from "./FormButton"
-import ContextUser from "../contexts/ContextUser"
+import BoxFull from "../base/BoxFull"
+import FormButton from "../base/formparts/FormButton"
+import ContextUser from "../../contexts/ContextUser"
import { useHistory } from "react-router"
-import FormAlert from "./FormAlert"
+import FormAlert from "../base/formparts/FormAlert"
/**
@@ -25,7 +25,7 @@ export default function BoxLogin({ ...props }) {
const {login} = useContext(ContextUser)
const history = useHistory()
- const doLogin = async (event) => {
+ const doLogin = async () => {
if(working) {
return;
}
diff --git a/code/frontend/src/components/BoxRepositoriesActive.js b/code/frontend/src/components/interactive/BoxRepositoriesActive.js
similarity index 71%
rename from code/frontend/src/components/BoxRepositoriesActive.js
rename to code/frontend/src/components/interactive/BoxRepositoriesActive.js
index 6db8da9..42ace13 100644
--- a/code/frontend/src/components/BoxRepositoriesActive.js
+++ b/code/frontend/src/components/interactive/BoxRepositoriesActive.js
@@ -1,12 +1,19 @@
import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import ContextUser from "../contexts/ContextUser"
-import useData from "../hooks/useData"
+import BoxFull from "../base/BoxFull"
+import ContextUser from "../../contexts/ContextUser"
+import useData from "../../hooks/useData"
import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "./Loading"
-import BoxAlert from "./BoxAlert"
+import Loading from "../base/Loading"
+import BoxAlert from "../base/BoxAlert"
+/**
+ * A {@link BoxFull} listing all the user's active repositories.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
export default function BoxRepositoriesActive({ ...props }) {
const {fetchDataAuth} = useContext(ContextUser)
const {data, started, loading, error} = useData(fetchDataAuth, "GET", "/api/repository/list", {
diff --git a/code/frontend/src/components/BoxRepositoriesArchived.js b/code/frontend/src/components/interactive/BoxRepositoriesArchived.js
similarity index 71%
rename from code/frontend/src/components/BoxRepositoriesArchived.js
rename to code/frontend/src/components/interactive/BoxRepositoriesArchived.js
index f947061..2b2d4a5 100644
--- a/code/frontend/src/components/BoxRepositoriesArchived.js
+++ b/code/frontend/src/components/interactive/BoxRepositoriesArchived.js
@@ -1,12 +1,19 @@
import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import ContextUser from "../contexts/ContextUser"
-import useData from "../hooks/useData"
+import BoxFull from "../base/BoxFull"
+import ContextUser from "../../contexts/ContextUser"
+import useData from "../../hooks/useData"
import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "./Loading"
-import BoxAlert from "./BoxAlert"
+import Loading from "../base/Loading"
+import BoxAlert from "../base/BoxAlert"
+/**
+ * A {@link BoxFull} listing all the user's archived repositories.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
export default function BoxRepositoriesArchived({ ...props }) {
const {fetchDataAuth} = useContext(ContextUser)
const {data, started, loading, error} = useData(fetchDataAuth, "GET", "/api/repository/list", {
diff --git a/code/frontend/src/components/BoxSetServer.js b/code/frontend/src/components/interactive/BoxSetServer.js
similarity index 79%
rename from code/frontend/src/components/BoxSetServer.js
rename to code/frontend/src/components/interactive/BoxSetServer.js
index 43a855c..ada5c92 100644
--- a/code/frontend/src/components/BoxSetServer.js
+++ b/code/frontend/src/components/interactive/BoxSetServer.js
@@ -1,10 +1,10 @@
import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import FormLabelled from "./FormLabelled"
-import FormLabel from "./FormLabel"
-import InputWithIcon from "./InputWithIcon"
+import BoxFull from "../base/BoxFull"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
import { faGlobe } from "@fortawesome/free-solid-svg-icons"
-import ContextServer from "../contexts/ContextServer"
+import ContextServer from "../../contexts/ContextServer"
/**
diff --git a/code/frontend/src/components/ConditionBadge.js b/code/frontend/src/components/interactive/ConditionBadge.js
similarity index 92%
rename from code/frontend/src/components/ConditionBadge.js
rename to code/frontend/src/components/interactive/ConditionBadge.js
index 668eeb2..0e8f410 100644
--- a/code/frontend/src/components/ConditionBadge.js
+++ b/code/frontend/src/components/interactive/ConditionBadge.js
@@ -2,9 +2,9 @@ import React, { useContext } from "react"
import Style from "./ConditionBadge.module.css"
import classNames from "classnames"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import ButtonSmallX from "./ButtonSmallX"
+import ButtonSmallX from "../base/ButtonSmallX"
import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
const CONDITION_COLORS = {
diff --git a/code/frontend/src/components/ConditionBadge.module.css b/code/frontend/src/components/interactive/ConditionBadge.module.css
similarity index 100%
rename from code/frontend/src/components/ConditionBadge.module.css
rename to code/frontend/src/components/interactive/ConditionBadge.module.css
diff --git a/code/frontend/src/components/CurrentServer.js b/code/frontend/src/components/interactive/CurrentServer.js
similarity index 90%
rename from code/frontend/src/components/CurrentServer.js
rename to code/frontend/src/components/interactive/CurrentServer.js
index 6b012d7..7508657 100644
--- a/code/frontend/src/components/CurrentServer.js
+++ b/code/frontend/src/components/interactive/CurrentServer.js
@@ -1,7 +1,7 @@
import React, { useContext } from "react"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import { faGlobe } from "@fortawesome/free-solid-svg-icons"
-import ContextServer from "../contexts/ContextServer"
+import ContextServer from "../../contexts/ContextServer"
/**
diff --git a/code/frontend/src/components/Layout.js b/code/frontend/src/components/interactive/Layout.js
similarity index 89%
rename from code/frontend/src/components/Layout.js
rename to code/frontend/src/components/interactive/Layout.js
index 28d123d..83094dd 100644
--- a/code/frontend/src/components/Layout.js
+++ b/code/frontend/src/components/interactive/Layout.js
@@ -1,8 +1,8 @@
import React, { useContext } from "react"
import Style from "./Layout.module.css"
import classNames from "classnames"
-import Sidebar from "./Sidebar"
-import ContextTheme from "../contexts/ContextTheme"
+import Sidebar from "../interactive/Sidebar"
+import ContextTheme from "../../contexts/ContextTheme"
/**
diff --git a/code/frontend/src/components/Layout.module.css b/code/frontend/src/components/interactive/Layout.module.css
similarity index 100%
rename from code/frontend/src/components/Layout.module.css
rename to code/frontend/src/components/interactive/Layout.module.css
diff --git a/code/frontend/src/components/LoggedInUser.js b/code/frontend/src/components/interactive/LoggedInUser.js
similarity index 92%
rename from code/frontend/src/components/LoggedInUser.js
rename to code/frontend/src/components/interactive/LoggedInUser.js
index fffb9c9..504dddb 100644
--- a/code/frontend/src/components/LoggedInUser.js
+++ b/code/frontend/src/components/interactive/LoggedInUser.js
@@ -1,7 +1,7 @@
import React, { useContext } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faUser } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
/**
diff --git a/code/frontend/src/components/Logo.js b/code/frontend/src/components/interactive/Logo.js
similarity index 85%
rename from code/frontend/src/components/Logo.js
rename to code/frontend/src/components/interactive/Logo.js
index 2ed7e77..be5e774 100644
--- a/code/frontend/src/components/Logo.js
+++ b/code/frontend/src/components/interactive/Logo.js
@@ -1,8 +1,8 @@
import React, {useContext} from "react"
import Style from "./Logo.module.css"
-import LogoDark from "../media/LogoDark.png"
-import LogoLight from "../media/LogoLight.png"
-import ContextTheme from "../contexts/ContextTheme"
+import LogoDark from "../../media/LogoDark.png"
+import LogoLight from "../../media/LogoLight.png"
+import ContextTheme from "../../contexts/ContextTheme"
import classNames from "classnames"
diff --git a/code/frontend/src/components/Logo.module.css b/code/frontend/src/components/interactive/Logo.module.css
similarity index 100%
rename from code/frontend/src/components/Logo.module.css
rename to code/frontend/src/components/interactive/Logo.module.css
diff --git a/code/frontend/src/components/RepositorySummaryBase.js b/code/frontend/src/components/interactive/RepositorySummaryBase.js
similarity index 98%
rename from code/frontend/src/components/RepositorySummaryBase.js
rename to code/frontend/src/components/interactive/RepositorySummaryBase.js
index 96aeffe..e241b88 100644
--- a/code/frontend/src/components/RepositorySummaryBase.js
+++ b/code/frontend/src/components/interactive/RepositorySummaryBase.js
@@ -2,7 +2,7 @@ import React from "react"
import Style from "./RepositorySummaryBase.module.css"
import classNames from "classnames"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import Button from "./Button"
+import Button from "../base/Button"
import { faArchive, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
diff --git a/code/frontend/src/components/RepositorySummaryBase.module.css b/code/frontend/src/components/interactive/RepositorySummaryBase.module.css
similarity index 100%
rename from code/frontend/src/components/RepositorySummaryBase.module.css
rename to code/frontend/src/components/interactive/RepositorySummaryBase.module.css
diff --git a/code/frontend/src/components/SelectTheme.js b/code/frontend/src/components/interactive/SelectTheme.js
similarity index 87%
rename from code/frontend/src/components/SelectTheme.js
rename to code/frontend/src/components/interactive/SelectTheme.js
index 8e28e75..60a7cc0 100644
--- a/code/frontend/src/components/SelectTheme.js
+++ b/code/frontend/src/components/interactive/SelectTheme.js
@@ -1,6 +1,6 @@
import React, {useContext} from "react"
-import Select from "./Select"
-import ContextTheme from "../contexts/ContextTheme"
+import Select from "../base/Select"
+import ContextTheme from "../../contexts/ContextTheme"
/**
diff --git a/code/frontend/src/components/Sidebar.js b/code/frontend/src/components/interactive/Sidebar.js
similarity index 92%
rename from code/frontend/src/components/Sidebar.js
rename to code/frontend/src/components/interactive/Sidebar.js
index ec6162c..5c0c625 100644
--- a/code/frontend/src/components/Sidebar.js
+++ b/code/frontend/src/components/interactive/Sidebar.js
@@ -1,10 +1,10 @@
import React, { Fragment, useContext } from "react"
import Style from "./Sidebar.module.css"
import classNames from "classnames"
-import Logo from "./Logo"
-import ButtonSidebar from "./ButtonSidebar"
+import Logo from "../interactive/Logo"
+import ButtonSidebar from "../base/ButtonSidebar"
import { faCog, faExclamationTriangle, faFolder, faHome, faKey, faWrench } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
/**
diff --git a/code/frontend/src/components/Sidebar.module.css b/code/frontend/src/components/interactive/Sidebar.module.css
similarity index 100%
rename from code/frontend/src/components/Sidebar.module.css
rename to code/frontend/src/components/interactive/Sidebar.module.css
diff --git a/code/frontend/src/components/GlobalServer.js b/code/frontend/src/components/providers/GlobalServer.js
similarity index 94%
rename from code/frontend/src/components/GlobalServer.js
rename to code/frontend/src/components/providers/GlobalServer.js
index a29f217..4e3272d 100644
--- a/code/frontend/src/components/GlobalServer.js
+++ b/code/frontend/src/components/providers/GlobalServer.js
@@ -1,6 +1,6 @@
import React, { useCallback } from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextServer from "../contexts/ContextServer"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextServer from "../../contexts/ContextServer"
import isString from "is-string"
diff --git a/code/frontend/src/components/GlobalTheme.js b/code/frontend/src/components/providers/GlobalTheme.js
similarity index 77%
rename from code/frontend/src/components/GlobalTheme.js
rename to code/frontend/src/components/providers/GlobalTheme.js
index 2dd467a..f763eca 100644
--- a/code/frontend/src/components/GlobalTheme.js
+++ b/code/frontend/src/components/providers/GlobalTheme.js
@@ -1,6 +1,6 @@
import React from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextTheme from "../contexts/ContextTheme"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextTheme from "../../contexts/ContextTheme"
/**
diff --git a/code/frontend/src/components/GlobalUser.js b/code/frontend/src/components/providers/GlobalUser.js
similarity index 93%
rename from code/frontend/src/components/GlobalUser.js
rename to code/frontend/src/components/providers/GlobalUser.js
index 0514031..4797ae6 100644
--- a/code/frontend/src/components/GlobalUser.js
+++ b/code/frontend/src/components/providers/GlobalUser.js
@@ -1,7 +1,7 @@
import React, { useCallback, useContext } from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextServer from "../contexts/ContextServer"
-import ContextUser from "../contexts/ContextUser"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextServer from "../../contexts/ContextServer"
+import ContextUser from "../../contexts/ContextUser"
/**
diff --git a/code/frontend/src/components/RepositoryEditor.js b/code/frontend/src/components/providers/RepositoryEditor.js
similarity index 87%
rename from code/frontend/src/components/RepositoryEditor.js
rename to code/frontend/src/components/providers/RepositoryEditor.js
index 2c92a3a..b62b796 100644
--- a/code/frontend/src/components/RepositoryEditor.js
+++ b/code/frontend/src/components/providers/RepositoryEditor.js
@@ -1,6 +1,6 @@
import React, { useState } from "react"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
-import useArrayState from "../hooks/useArrayState"
+import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import useArrayState from "../../hooks/useArrayState"
export default function RepositoryEditor({ children, id, name, start, end, conditions }) {
diff --git a/code/frontend/src/contexts/ContextRepositoryEditor.js b/code/frontend/src/contexts/ContextRepositoryEditor.js
index 5d9ff86..94b0ce5 100644
--- a/code/frontend/src/contexts/ContextRepositoryEditor.js
+++ b/code/frontend/src/contexts/ContextRepositoryEditor.js
@@ -1,5 +1,7 @@
import {createContext} from "react";
-const ContextRepositoryEditor = createContext(null)
-export default ContextRepositoryEditor
+/**
+ * @todo Document this.
+ */
+export default createContext(null)
diff --git a/code/frontend/src/hooks/useArrayState.js b/code/frontend/src/hooks/useArrayState.js
index ec529f4..08e169a 100644
--- a/code/frontend/src/hooks/useArrayState.js
+++ b/code/frontend/src/hooks/useArrayState.js
@@ -1,6 +1,12 @@
import { useCallback, useState } from "react"
+/**
+ * An hook similar to {@link useState} which stores an array of values.
+ *
+ * @param def - The starting value of the hook.
+ * @returns {{spliceValue, removeValue, setValue, appendValue, value}}
+ */
export default function useArrayState(def) {
const [value, setValue] = useState(def ?? [])
diff --git a/code/frontend/src/hooks/useRepositoryEditor.js b/code/frontend/src/hooks/useRepositoryEditor.js
new file mode 100644
index 0000000..387ad3b
--- /dev/null
+++ b/code/frontend/src/hooks/useRepositoryEditor.js
@@ -0,0 +1,14 @@
+import { useContext } from "react"
+import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+
+
+/**
+ * @todo Document this.
+ */
+export default function useRepositoryEditor() {
+ const context = useContext(ContextRepositoryEditor)
+ if(!context) {
+ throw new Error("This component must be placed inside a RepositoryEditor.")
+ }
+ return context
+}
\ No newline at end of file
diff --git a/code/frontend/src/routes/PageAlerts.js b/code/frontend/src/routes/PageAlerts.js
index 5770e89..bbb5437 100644
--- a/code/frontend/src/routes/PageAlerts.js
+++ b/code/frontend/src/routes/PageAlerts.js
@@ -1,7 +1,7 @@
import React from "react"
import Style from "./PageAlerts.module.css"
import classNames from "classnames"
-import BoxFull from "../components/BoxFull"
+import BoxFull from "../components/base/BoxFull"
export default function PageAlerts({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageDashboard.js b/code/frontend/src/routes/PageDashboard.js
index ba10f90..cf4da58 100644
--- a/code/frontend/src/routes/PageDashboard.js
+++ b/code/frontend/src/routes/PageDashboard.js
@@ -1,15 +1,15 @@
import React from "react"
import Style from "./PageDashboard.module.css"
import classNames from "classnames"
-import BoxHeader from "../components/BoxHeader"
-import BoxFull from "../components/BoxFull"
-import Checkbox from "../components/Checkbox"
-import InputWithIcon from "../components/InputWithIcon"
+import BoxHeader from "../components/base/BoxHeader"
+import BoxFull from "../components/base/BoxFull"
+import Checkbox from "../components/base/Checkbox"
+import InputWithIcon from "../components/base/InputWithIcon"
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
-import Radio from "../components/Radio"
-import Button from "../components/Button"
-import FormLabelled from "../components/FormLabelled"
-import FormLabel from "../components/FormLabel"
+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"
export default function PageDashboard({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageLogin.js b/code/frontend/src/routes/PageLogin.js
index 9392428..4ef8c9a 100644
--- a/code/frontend/src/routes/PageLogin.js
+++ b/code/frontend/src/routes/PageLogin.js
@@ -1,8 +1,8 @@
import React from "react"
import Style from "./PageLogin.module.css"
import classNames from "classnames"
-import BoxSetServer from "../components/BoxSetServer"
-import BoxLogin from "../components/BoxLogin"
+import BoxSetServer from "../components/interactive/BoxSetServer"
+import BoxLogin from "../components/interactive/BoxLogin"
export default function PageLogin({ className, ...props }) {
diff --git a/code/frontend/src/routes/PageRepositories.js b/code/frontend/src/routes/PageRepositories.js
index eb3c7db..c064790 100644
--- a/code/frontend/src/routes/PageRepositories.js
+++ b/code/frontend/src/routes/PageRepositories.js
@@ -1,8 +1,8 @@
import React from "react"
import Style from "./PageRepositories.module.css"
import classNames from "classnames"
-import BoxRepositoriesActive from "../components/BoxRepositoriesActive"
-import BoxRepositoriesArchived from "../components/BoxRepositoriesArchived"
+import BoxRepositoriesActive from "../components/interactive/BoxRepositoriesActive"
+import BoxRepositoriesArchived from "../components/interactive/BoxRepositoriesArchived"
export default function PageRepositories({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageSettings.js b/code/frontend/src/routes/PageSettings.js
index 92c633c..d05272a 100644
--- a/code/frontend/src/routes/PageSettings.js
+++ b/code/frontend/src/routes/PageSettings.js
@@ -1,10 +1,10 @@
import React from "react"
import Style from "./PageSettings.module.css"
import classNames from "classnames"
-import BoxHeader from "../components/BoxHeader"
-import BoxFull from "../components/BoxFull"
-import SelectTheme from "../components/SelectTheme"
-import BoxLoggedIn from "../components/BoxLoggedIn"
+import BoxHeader from "../components/base/BoxHeader"
+import BoxFull from "../components/base/BoxFull"
+import SelectTheme from "../components/interactive/SelectTheme"
+import BoxLoggedIn from "../components/interactive/BoxLoggedIn"
export default function PageSettings({ children, className, ...props }) {