Merge remote-tracking branch 'origin/main' into main

nest_frontend/LocalizationStrings.js

@@ -71,6 +71,11 @@ export default {
         alerts: "Allarmi",
         alertTitle: "I tuoi allarmi",
         alertCreate: "Crea un allarme",
+        alertName: "Nome allarme", // TODO: tradurre
+        createAlert: "Crea allarme", // TODO: tradurre
+        alertLimit: "Limite", // TODO: tradurre e migliorare?
+        alertWindow: "Finestra (in ore)", // TODO: tradurre
+
         notImplemented: "🚧 Non implementato.",
 
         settings: "Impostazioni",
@@ -141,7 +146,8 @@ export default {
         errorViewNotAllowed: "Errore: Non è permesso effettuare la richiesta.",
         errorServerNotConfigured: "Errore: Non è stato configurato nessun server.",
         errorDecodeError: "Errore: Non è stato possibile deserializzare i dati ricevuti dal backend.",
-        errorSerializationError: "Errore: Non è stato possibile serializzare i dati da inviare al backend."
+        errorSerializationError: "Errore: Non è stato possibile serializzare i dati da inviare al backend.",
+        errorPageNotFound: "Errore: Pagina non trovata.", // TODO: Tradurre
     },
     // 🇬🇧
     en: {

nest_frontend/PageSwitcher.js

@@ -9,15 +9,25 @@ import PageRepositoryEdit from "./routes/PageRepositoryEdit"
 import PageUsers from "./routes/PageUsers"
 import PageRepositoryAnalyze from "./routes/PageRepositoryAnalyze"
 import PageShare from "./routes/PageShare"
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons"
+import makeIcon from "./utils/makeIcon"
+import useStrings from "./hooks/useStrings"
+import Alert from "./components/base/Alert"
+import PageRepositoryAlertsCreate from "./routes/PageRepositoryAlertsCreate"
 
 
 export default function PageSwitcher({ ...props }) {
+    const strings = useStrings()
+
     return (
         <Switch {...props}>
             <Route path={"/repositories/create"} exact={true}>
                 <PageRepositoryCreate/>
             </Route>
-            <Route path={"/repositories/:id/alerts"} exact={true}>
+            <Route path={"/repositories/:id/alerts/create"} exact={true}>
+                <PageRepositoryAlertsCreate/>
+            </Route>
+            <Route path={"/repositories/:id/alerts/"} exact={true}>
                 <PageRepositoryAlerts/>
             </Route>
             <Route path={"/repositories/:id/share"} exact={true}>
@@ -38,9 +48,12 @@ export default function PageSwitcher({ ...props }) {
             <Route path={"/settings"} exact={true}>
                 <PageSettings/>
             </Route>
-            <Route path={"/"}>
+            <Route path={"/"} exact={true}>
                 <PageLogin/>
             </Route>
+            <Route>
+                <Alert color={"Red"}>{makeIcon(faQuestionCircle)} {strings.errorPageNotFound}</Alert>
+            </Route>
         </Switch>
     )
 }

nest_frontend/components/base/ButtonHeader.js

@@ -0,0 +1,19 @@
+import React from "react"
+import Style from "./ButtonHeader.module.css"
+import classNames from "classnames"
+import Button from "./Button"
+
+
+/**
+ * A {@link Button} without `boxShadow` and with `flexGrow`, to be used in {@link PageWithHeader}.
+ *
+ * @param className - Additional class(es) to add to the button.
+ * @param props - Additional props to pass to the button.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function ButtonHeader({ className, ...props }) {
+    return (
+        <Button className={classNames(Style.ButtonHeader, className)} {...props}/>
+    )
+}

nest_frontend/components/base/ButtonHeader.module.css

@@ -0,0 +1,4 @@
+.ButtonHeader {
+    box-shadow: none;
+    flex-grow: 1;
+}

nest_frontend/components/base/layout/BodyFlex.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./BodyFlex.module.css"
+import classNames from "classnames"
+
+
+export default function BodyFlex({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.BodyFlex, className)} {...props}>
+            {children}
+        </div>
+    )
+}

nest_frontend/components/base/layout/BodyFlex.module.css

@@ -1,9 +1,6 @@
-.PageLogin {
+.BodyFlex {
     display: flex;
     flex-direction: column;
-
+    align-items: stretch;
     gap: 10px;
-
-    width: 100%;
-    height: 100%;
 }

nest_frontend/components/base/layout/BodyHorizontalHalves.js

@@ -0,0 +1,17 @@
+import React from "react"
+import Style from "./BodyHorizontalHalves.module.css"
+import classNames from "classnames"
+
+
+export default function BodyHorizontalHalves({ upper, lower, className, ...props }) {
+    return (
+        <div className={classNames(Style.BodyHorizontalHalves, className)} {...props}>
+            <div className={Style.Upper}>
+                {upper}
+            </div>
+            <div className={Style.Lower}>
+                {lower}
+            </div>
+        </div>
+    )
+}

nest_frontend/components/base/layout/BodyHorizontalHalves.module.css

@@ -0,0 +1,24 @@
+.BodyHorizontalHalves {
+    display: grid;
+    grid-template-areas: "upper" "lower";
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 10px;
+}
+
+.Upper {
+    grid-area: upper;
+}
+
+.Upper > * {
+    width: 100%;
+    height: 100%;
+}
+
+.Lower {
+    grid-area: lower;
+}
+
+.Lower > * {
+    width: 100%;
+    height: 100%;
+}

nest_frontend/components/base/layout/BodyHorizontalUpperGrow.js

@@ -0,0 +1,20 @@
+import React from "react"
+import Style from "./BodyHorizontalUpperGrow.module.css"
+import classNames from "classnames"
+
+
+export default function BodyHorizontalUpperGrow({ upper, lower, error, className, ...props }) {
+    return (
+        <div className={classNames(Style.BodyHorizontalUpperGrow, className)} {...props}>
+            <div className={Style.Upper}>
+                {upper}
+            </div>
+            <div className={Style.Lower}>
+                {lower}
+            </div>
+            <div className={Style.Error}>
+                {error}
+            </div>
+        </div>
+    )
+}

nest_frontend/components/base/layout/BodyHorizontalUpperGrow.module.css

@@ -0,0 +1,29 @@
+.BodyHorizontalUpperGrow {
+    display: grid;
+    grid-template-areas: "upper" "lower" "error";
+    grid-template-rows: 1fr auto auto;
+}
+
+.Upper {
+    grid-area: upper;
+}
+
+.Upper > * {
+    width: 100%;
+    height: 100%;
+}
+
+.Lower {
+    grid-area: lower;
+    margin-top: 10px;
+}
+
+.Lower > * {
+    width: 100%;
+    height: 100%;
+}
+
+.Error {
+    grid-area: error;
+    margin-top: 10px;
+}

nest_frontend/components/base/layout/PageWithHeader.js

@@ -0,0 +1,22 @@
+import React from "react"
+import Style from "./PageWithHeader.module.css"
+import classNames from "classnames"
+
+
+export default function PageWithHeader({ header, buttons, children, className, ...props }) {
+    return (
+        <div className={classNames(Style.PageWithHeader, className)} {...props}>
+            <div className={Style.Header}>
+                {header}
+            </div>
+            {buttons ?
+                <div className={Style.Buttons}>
+                   {buttons}
+                </div>
+            : null}
+            <div className={Style.Body}>
+                {children}
+            </div>
+        </div>
+    )
+}

nest_frontend/components/base/layout/PageWithHeader.module.css

@@ -0,0 +1,38 @@
+.PageWithHeader {
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+    grid-template-areas:
+            "header button"
+            "body body";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+}
+
+.Header {
+    grid-area: header;
+    margin-bottom: 10px;
+}
+
+.Buttons {
+    grid-area: button;
+    margin-left: 10px;
+    margin-bottom: 10px;
+
+    display: flex;
+    flex-direction: row;
+}
+
+.Buttons > * {
+    flex-grow: 1;
+}
+
+.Body {
+    grid-area: body;
+}
+
+.Body > * {
+    width: 100%;
+    height: 100%;
+}

nest_frontend/components/interactive/BadgeCondition.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import ContextRepositoryEditor from "../../contexts/ContextConditionEditor"
 import Badge from "../base/Badge"
 
 

nest_frontend/components/interactive/BoxAlertCreate.js

@@ -0,0 +1,109 @@
+import React from "react"
+import BoxFull from "../base/BoxFull"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
+import {
+    faBackward, faBell,
+    faFolder,
+    faPencilAlt,
+    faPlus, faStopwatch,
+    faThermometerThreeQuarters,
+} from "@fortawesome/free-solid-svg-icons"
+import Radio from "../base/Radio"
+import Button from "../base/Button"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+import FormAlert from "../base/formparts/FormAlert"
+import { useHistory } from "react-router"
+import useStrings from "../../hooks/useStrings"
+
+
+export default function BoxAlertCreate(
+    {
+        name,
+        setName,
+        evaluationMode,
+        setEvaluationMode,
+        limit,
+        setLimit,
+        windowSize,
+        setWindowSize,
+        running,
+        error,
+        save,
+        ...props
+    }) {
+
+    const strings = useStrings()
+
+    return (
+        <BoxFull header={strings.createRepo} {...props}>
+            <FormLabelled
+                onSubmit={e => {
+                    e.preventDefault()
+                    save()
+                }}
+            >
+                <FormLabel htmlFor={"alert-name"} text={strings.alertName}>
+                    <InputWithIcon
+                        id={"alert-name"}
+                        icon={faBell}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                    />
+                </FormLabel>
+                <FormLabel htmlFor={"filter-mode"} text={strings.request}>
+                    <label>
+                        <Radio
+                            name={"filter-mode"}
+                            onChange={() => setEvaluationMode(0)}
+                            checked={evaluationMode === 0}
+                        />
+                        {strings.filterOR}
+                    </label>
+                    &nbsp;
+                    <label>
+                        <Radio
+                            name={"filter-mode"}
+                            onChange={() => setEvaluationMode(1)}
+                            checked={evaluationMode === 1}
+                        />
+                        {strings.filterAND}
+                    </label>
+                </FormLabel>
+                <FormLabel htmlFor={"alert-limit"} text={strings.alertLimit}>
+                    <InputWithIcon
+                        id={"alert-limit"}
+                        type={"number"}
+                        icon={faThermometerThreeQuarters}
+                        value={limit}
+                        onChange={e => setLimit(e.target.limit)}
+                    />
+                </FormLabel>
+                <FormLabel htmlFor={"alert-window"} text={strings.alertWindow}>
+                    <InputWithIcon
+                        id={"alert-window"}
+                        type={"number"}
+                        icon={faStopwatch}
+                        value={windowSize}
+                        onChange={e => setWindowSize(e.target.limit)}
+                    />
+                </FormLabel>
+                {error ?
+                 <FormAlert color={"Red"}>
+                     {strings[error.data.code]}
+                 </FormAlert>
+                       : null}
+                 <Button
+                     style={{ "gridColumn": "1 / 3" }}
+                     icon={faPlus}
+                     color={"Green"}
+                     onClick={save}
+                     disabled={running}
+                 >
+                     {strings.createAlert}
+                 </Button>
+            </FormLabelled>
+        </BoxFull>
+    )
+}

nest_frontend/components/interactive/BoxRepositoryCreate.js

@@ -15,24 +15,33 @@ import useStrings from "../../hooks/useStrings"
 /**
  * A {@link BoxFull} allowing the user to save the changes made in the current {@link RepositoryEditor}.
  *
+ * @param id - The id of the repository.
+ * @param name - The current name of the repository.
+ * @param setName - Function to change the name of the repository.
+ * @param evaluationMode - The current evaluation mode of the repository.
+ * @param setEvaluationMode - Function to change the current evaluation mode of the repository.
  * @param running - If a request is running, disabling the buttons.
+ * @param error - If a request error occoured, the error.
+ * @param revert - Function to cancel the changes made to the repository.
+ * @param save - Function to apply the changes made to the repository.
  * @param props - Additional props to pass to the box.
  * @returns {JSX.Element}
  * @constructor
  */
-export default function BoxRepositoryCreate({ running, ...props }) {
+export default function BoxRepositoryCreate(
-    const {
+    {
         id,
-        evaluationMode,
-        setEvaluationMode,
         name,
         setName,
-        save,
+        evaluationMode,
-        revert,
+        setEvaluationMode,
+        running,
         error,
-    } = useRepositoryEditor()
+        revert,
+        save,
+        ...props
+    }) {
 
-    const history = useHistory()
     const strings = useStrings()
 
     return (

nest_frontend/components/providers/AlertEditor.js

@@ -0,0 +1,145 @@
+import React, { useCallback, useState } from "react"
+import ContextConditionEditor from "../../contexts/ContextConditionEditor"
+import useArrayState from "../../hooks/useArrayState"
+import Style from "./RepositoryEditor.module.css"
+import BoxConditionLocation from "../interactive/BoxConditionLocation"
+import BoxConditionHashtag from "../interactive/BoxConditionHashtag"
+import BoxConditionUser from "../interactive/BoxConditionUser"
+import BoxConditionDatetime from "../interactive/BoxConditionDatetime"
+import BoxConditions from "../interactive/BoxConditions"
+import classNames from "classnames"
+import { Condition } from "../../objects/Condition"
+import useBackendViewset from "../../hooks/useBackendViewset"
+import { Redirect, useParams } from "react-router"
+import BoxAlertCreate from "../interactive/BoxAlertCreate"
+
+
+export default function AlertEditor({className}) {
+    /** The connected repository id. */
+    const {id: repoId} = useParams()
+
+    /** The alert name. */
+    const [_name, setName] = useState("")
+
+    /** The alert limit. */
+    const [limit, setLimit] = useState(10)
+
+    /** The window size. */
+    const [windowSize, setWindowSize] = useState(24)
+
+    /** The conditions of the data gathering. */
+    const {
+        value: rawConditions,
+        setValue: setRawConditions,
+        appendValue: appendRawCondition,
+        removeValue: removeRawCondition,
+        spliceValue: spliceRawCondition,
+    } = useArrayState([])
+    const _conditions = rawConditions.map(cond => Condition.fromRaw(cond))
+
+    /** The operator the conditions should be evaluated with. */
+    const [_evaluationMode, setEvaluationMode] = useState(0)
+
+    /** The backend viewset to use to create / edit the repository. */
+    const {running, error, createResource} = useBackendViewset(
+        `/api/v1/repositories/${repoId}/alerts/`,
+        "name",
+        {
+            list: false,
+            create: true,
+            retrieve: false,
+            edit: false,
+            destroy: false,
+            command: false,
+            action: false,
+        }
+    )
+
+    /** If `true`, switches to the repository page on the next render. */
+    const [switchPage, setSwitchPage] = useState(false)
+
+    /**
+     * Save the current changes, creating or editing it as needed.
+     *
+     * @type {(function(): Promise<void>)|*}
+     */
+    const save = useCallback(
+        async () => {
+            const body = {
+                "repository_id": repoId,
+                "name": _name,
+                "window_size": windowSize,
+                "limit": limit,
+                "evaluation_mode": _evaluationMode,
+                "conditions": _conditions,
+            }
+
+            console.info("Creating new alert with body: ", body)
+            await createResource(body)
+            setSwitchPage(true)
+        },
+        [repoId, createResource, _conditions, _evaluationMode, _name, limit],
+    )
+
+    /**
+     * Try to add a new condition, logging a message to the console if something goes wrong.
+     *
+     * @type {(function(): void)|*}
+     */
+    const addCondition = useCallback(
+        (newCond) => {
+
+            // Check for duplicates
+            let duplicate = null
+            for(const oldCond of _conditions) {
+                if(newCond.type === oldCond.type && newCond.content === oldCond.content) {
+                    duplicate = oldCond
+                    break
+                }
+            }
+            if(duplicate) {
+                console.debug("Cannot add ", newCond, ": ", duplicate, " already exists.")
+                return
+            }
+
+            console.debug("Adding ", newCond, " to the repository conditions")
+            appendRawCondition(newCond)
+        },
+        [_conditions, appendRawCondition],
+    )
+
+    // Hack to switch page on success
+    if(!error && switchPage) {
+        return <Redirect to={`/repositories/${repoId}/alerts/`}/>
+    }
+
+    return (
+        <ContextConditionEditor.Provider
+            value={{
+                conditions: _conditions, addCondition, appendRawCondition, removeRawCondition, spliceRawCondition,
+            }}
+        >
+            <div className={classNames(Style.RepositoryEditor, className)}>
+                <BoxConditionLocation className={Style.SearchByZone}/>
+                <BoxConditionHashtag className={Style.SearchByHashtags}/>
+                <BoxConditionUser className={Style.SearchByUser}/>
+                <BoxConditionDatetime className={Style.SearchByTimePeriod}/>
+                <BoxConditions className={Style.Conditions}/>
+                <BoxAlertCreate
+                    className={Style.CreateDialog}
+                    name={_name}
+                    setName={setName}
+                    evaluationMode={_evaluationMode}
+                    setEvaluationMode={setEvaluationMode}
+                    limit={limit}
+                    setLimit={setLimit}
+                    windowSize={windowSize}
+                    setWindowSize={setWindowSize}
+                    running={running}
+                    error={error}
+                    save={save}
+                />
+            </div>
+        </ContextConditionEditor.Provider>
+    )
+}

nest_frontend/components/providers/RepositoryEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useState } from "react"
-import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import ContextConditionEditor from "../../contexts/ContextConditionEditor"
 import useArrayState from "../../hooks/useArrayState"
 import Style from "./RepositoryEditor.module.css"
 import BoxConditionLocation from "../interactive/BoxConditionLocation"
@@ -142,14 +142,9 @@ export default function RepositoryEditor({
     }
 
     return (
-        <ContextRepositoryEditor.Provider
+        <ContextConditionEditor.Provider
             value={{
-                id,
-                name: _name, setName,
                 conditions: _conditions, addCondition, appendRawCondition, removeRawCondition, spliceRawCondition,
-                evaluationMode: _evaluationMode, setEvaluationMode,
-                error, running,
-                revert, save,
             }}
         >
             <div className={classNames(Style.RepositoryEditor, className)}>
@@ -158,8 +153,19 @@ export default function RepositoryEditor({
                 <BoxConditionUser className={Style.SearchByUser}/>
                 <BoxConditionDatetime className={Style.SearchByTimePeriod}/>
                 <BoxConditions className={Style.Conditions}/>
-                <BoxRepositoryCreate running={running} className={Style.CreateDialog}/>
+                <BoxRepositoryCreate
+                    className={Style.CreateDialog}
+                    id={id}
+                    name={_name}
+                    setName={setName}
+                    evaluationMode={_evaluationMode}
+                    setEvaluationMode={setEvaluationMode}
+                    running={running}
+                    error={error}
+                    revert={revert}
+                    save={save}
+                />
             </div>
-        </ContextRepositoryEditor.Provider>
+        </ContextConditionEditor.Provider>
     )
 }

nest_frontend/components/providers/RepositoryViewer.js

@@ -1,6 +1,5 @@
 import React, { useContext, useMemo, useState } from "react"
 import Style from "./RepositoryViewer.module.css"
-import classNames from "classnames"
 import ContextLanguage from "../../contexts/ContextLanguage"
 import useBackendResource from "../../hooks/useBackendResource"
 import useBackendViewset from "../../hooks/useBackendViewset"
@@ -9,7 +8,7 @@ import countTweetWords from "../../utils/countTweetWords"
 import BoxHeader from "../base/BoxHeader"
 import Loading from "../base/Loading"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faFolder, faFolderOpen, faTrash } from "@fortawesome/free-solid-svg-icons"
+import { faFolder, faFolderOpen, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"
 import BoxRepositoryTweets from "../interactive/BoxRepositoryTweets"
 import PickerVisualization from "../interactive/PickerVisualization"
 import BoxVisualizationWordcloud from "../interactive/BoxVisualizationWordcloud"
@@ -29,6 +28,9 @@ import BoxFilterDatetime from "../interactive/BoxFilterDatetime"
 import BoxFilterHasPlace from "../interactive/BoxFilterHasPlace"
 import BoxFilterHasImage from "../interactive/BoxFilterHasImage"
 import BoxFilterIsNotRetweet from "../interactive/BoxFilterIsNotRetweet"
+import PageWithHeader from "../base/layout/PageWithHeader"
+import ButtonHeader from "../base/ButtonHeader"
+import AlertError from "../interactive/AlertError"
 
 
 export default function RepositoryViewer({ id, className, ...props }) {
@@ -49,7 +51,11 @@ export default function RepositoryViewer({ id, className, ...props }) {
     const mapViewHook = useMapAreaState()
 
     // Repository
-    const repositoryBr = useBackendResource(
+    const {
+        resource: repository,
+        error: repositoryError,
+        firstLoad: repositoryFirstLoad,
+    } = useBackendResource(
         `/api/v1/repositories/${id}`,
         {
             retrieve: true,
@@ -58,11 +64,13 @@ export default function RepositoryViewer({ id, className, ...props }) {
             action: false,
         },
     )
-    const repository = repositoryBr.error ? null : repositoryBr.resource
-
 
     // Tweets
-    const rawTweetsBv = useBackendViewset(
+    const {
+        resources: tweets,
+        error: tweetsError,
+        firstLoad: tweetsFirstLoad,
+    } = useBackendViewset(
         `/api/v1/repositories/${id}/tweets/`,
         "snowflake",
         {
@@ -75,63 +83,73 @@ export default function RepositoryViewer({ id, className, ...props }) {
             action: false,
         },
     )
-    const rawTweets = rawTweetsBv.resources && rawTweetsBv.error ? [] : rawTweetsBv.resources
-
 
     // Filtering
-    let tweets = rawTweets
+    const filteredTweets = useMemo(
-    for(const filter of filters) {
+        () => {
-        tweets = tweets.filter(tweet => filter.exec(tweet))
+            let tempTweets = tweets
-    }
+            for(const filter of filters) {
-
+                tempTweets = tempTweets.filter(tweet => filter.exec(tweet))
+            }
+            return tempTweets
+        },
+        [tweets, filters]
+    )
 
     // Words
     const words = useMemo(
-        () => objectToWordcloudFormat(countTweetWords(tweets)),
+        () => objectToWordcloudFormat(countTweetWords(filteredTweets)),
-        [tweets],
+        [filteredTweets],
     )
 
-
+    // Page header
-    let contents
+    const header = useMemo(
-    if(!repositoryBr.firstLoad || !rawTweetsBv.firstLoad) {
+        () => (
-        contents = <>
+            <BoxHeader>
-            <BoxHeader className={Style.Header}>
+                <FontAwesomeIcon icon={repository?.is_active ? faFolderOpen : faFolder}/> {repository?.name}
-                <Loading/>
-            </BoxHeader>
-        </>
-    }
-    else if(repository === null) {
-        contents = <>
-            <BoxHeader className={Style.Header}>
-                <FontAwesomeIcon icon={faTrash}/> <i>{strings.repoDeleted}</i>
-            </BoxHeader>
-        </>
-    }
-    else {
-        contents = <>
-            <BoxHeader className={Style.Header}>
-                <FontAwesomeIcon icon={repository.is_active ? faFolderOpen : faFolder}/> {repository.name}
             </BoxHeader>
+        ),
+        [repository?.is_active, repository?.name]
+    )
 
-            <BoxRepositoryTweets className={Style.Tweets}/>
+    // Page contents
-            <PickerVisualization className={Style.VisualizationPicker}/>
+    const contents = useMemo(
-            {visualizationTab === "wordcloud" ? <BoxVisualizationWordcloud className={Style.Visualization}/> : null}
+        () => {
-            {visualizationTab === "chart" ? <BoxVisualizationChart className={Style.Visualization}/> : null}
+            if(!repositoryFirstLoad || !tweetsFirstLoad) {
-            {visualizationTab === "map" ? <BoxVisualizationMap className={Style.Visualization}/> : null}
+                return <Loading/>
-            {visualizationTab === "stats" ? <BoxVisualizationStats className={Style.Visualization}/> : null}
+            }
+            else if(repositoryError) {
+                return <AlertError error={repositoryError}/>
+            }
+            else if(tweetsError) {
+                return <AlertError error={tweetsError}/>
+            }
+            else {
+                return (
+                    <div className={Style.RepositoryViewer}>
+                        <BoxRepositoryTweets className={Style.Tweets}/>
+                        <PickerVisualization className={Style.VisualizationPicker}/>
+                        {visualizationTab === "wordcloud" ? <BoxVisualizationWordcloud className={Style.Visualization}/> : null}
+                        {visualizationTab === "chart" ? <BoxVisualizationChart className={Style.Visualization}/> : null}
+                        {visualizationTab === "map" ? <BoxVisualizationMap className={Style.Visualization}/> : null}
+                        {visualizationTab === "stats" ? <BoxVisualizationStats className={Style.Visualization}/> : null}
 
-            <BoxFilters className={Style.Filters}/>
+                        <BoxFilters className={Style.Filters}/>
-            <PickerFilter className={Style.FilterPicker}/>
+                        <PickerFilter className={Style.FilterPicker}/>
-            {filterTab === "contains" ? <BoxFilterContains className={Style.AddFilter}/> : null}
+                        {filterTab === "contains" ? <BoxFilterContains className={Style.AddFilter}/> : null}
-            {filterTab === "hashtag" ? <BoxFilterHashtag className={Style.AddFilter}/> : null}
+                        {filterTab === "hashtag" ? <BoxFilterHashtag className={Style.AddFilter}/> : null}
-            {filterTab === "user" ? <BoxFilterUser className={Style.AddFilter}/> : null}
+                        {filterTab === "user" ? <BoxFilterUser className={Style.AddFilter}/> : null}
-            {filterTab === "retweet" ? <BoxFilterIsNotRetweet className={Style.AddFilter}/> : null}
+                        {filterTab === "retweet" ? <BoxFilterIsNotRetweet className={Style.AddFilter}/> : null}
-            {filterTab === "image" ? <BoxFilterHasImage className={Style.AddFilter}/> : null}
+                        {filterTab === "image" ? <BoxFilterHasImage className={Style.AddFilter}/> : null}
-            {filterTab === "time" ? <BoxFilterDatetime className={Style.AddFilter}/> : null}
+                        {filterTab === "time" ? <BoxFilterDatetime className={Style.AddFilter}/> : null}
-            {filterTab === "place" ? <BoxFilterHasPlace className={Style.AddFilter}/> : null}
+                        {filterTab === "place" ? <BoxFilterHasPlace className={Style.AddFilter}/> : null}
-            {filterTab === "location" ? <BoxFilterLocation className={Style.AddFilter}/> : null}
+                        {filterTab === "location" ? <BoxFilterLocation className={Style.AddFilter}/> : null}
-        </>
+                    </div>
-    }
+                )
+            }
+        },
+        [repositoryFirstLoad, tweetsFirstLoad, visualizationTab, filterTab]
+    )
 
     return (
         <ContextRepositoryViewer.Provider
@@ -145,20 +163,16 @@ export default function RepositoryViewer({ id, className, ...props }) {
                 appendFilter,
                 spliceFilter,
                 removeFilter,
-                repositoryBr,
                 repository,
-                rawTweetsBv,
+                rawTweets: tweets,
-                rawTweets,
+                tweets: filteredTweets,
-                tweets,
                 words,
                 mapViewHook,
             }}
         >
-
+            <PageWithHeader header={header}>
-            <div className={classNames(Style.RepositoryViewer, className)} {...props}>
                 {contents}
-            </div>
+            </PageWithHeader>
-
         </ContextRepositoryViewer.Provider>
     )
 }

nest_frontend/components/providers/RepositoryViewer.module.css

@@ -2,7 +2,6 @@
     display: grid;
 
     grid-template-areas:
-        "h h"
         "a b"
         "a c"
         "d e"
@@ -10,16 +9,12 @@
 
     grid-gap: 10px;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto 1fr auto auto;
+    grid-template-rows: auto 1fr auto auto;
 
     width: 100%;
     height: 100%;
 }
 
-.Header {
-    grid-area: h;
-}
-
 .Tweets {
     grid-area: a;
 }

nest_frontend/contexts/ContextConditionEditor.js

@@ -2,7 +2,7 @@ import { createContext } from "react"
 
 
 /**
- * React Context representing containing all variables of a {@link RepositoryEditor}.
+ * React Context representing a list of {@link Condition}s as provided by {@link useArrayState}.
  *
  * It is `null` outside a RepositoryEditor.
  */

nest_frontend/hooks/useRepositoryEditor.js

@@ -1,5 +1,5 @@
 import { useContext } from "react"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ContextRepositoryEditor from "../contexts/ContextConditionEditor"
 
 
 /**

nest_frontend/routes/PageLogin.js

@@ -1,6 +1,4 @@
 import React, { useContext } from "react"
-import Style from "./PageLogin.module.css"
-import classNames from "classnames"
 import BoxSetServer from "../components/interactive/BoxSetServer"
 import BoxLogin from "../components/interactive/BoxLogin"
 import ContextUser from "../contexts/ContextUser"
@@ -9,9 +7,11 @@ import BoxHeader from "../components/base/BoxHeader"
 import useStrings from "../hooks/useStrings"
 import BoxFull from "../components/base/BoxFull"
 import SelectLanguage from "../components/interactive/SelectLanguage"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import BodyFlex from "../components/base/layout/BodyFlex"
 
 
-export default function PageLogin({ className, ...props }) {
+export default function PageLogin() {
     const {user} = useContext(ContextUser)
     const strings = useStrings()
 
@@ -20,15 +20,20 @@ export default function PageLogin({ className, ...props }) {
     }
 
     return (
-        <div className={classNames(Style.PageLogin, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader>
+            header={
-                {strings.welcomeToNest}
+                <BoxHeader>
-            </BoxHeader>
+                    {strings.welcomeToNest}
-            <BoxSetServer/>
+                </BoxHeader>
-            <BoxLogin/>
+            }
-            <BoxFull header={strings.changeLang}>
+        >
-                <SelectLanguage/>
+            <BodyFlex>
-            </BoxFull>
+                <BoxSetServer/>
-        </div>
+                <BoxLogin/>
+                <BoxFull header={strings.changeLang}>
+                    <SelectLanguage/>
+                </BoxFull>
+            </BodyFlex>
+        </PageWithHeader>
     )
 }

nest_frontend/routes/PageRepositoriesList.js

@@ -1,6 +1,4 @@
 import React, { useCallback, useContext } from "react"
-import Style from "./PageRepositoriesList.module.css"
-import classNames from "classnames"
 import useBackendViewset from "../hooks/useBackendViewset"
 import BoxRepositories from "../components/interactive/BoxRepositories"
 import { useHistory } from "react-router"
@@ -8,10 +6,12 @@ import ContextLanguage from "../contexts/ContextLanguage"
 import BoxHeader from "../components/base/BoxHeader"
 import { faHome, faPlus } from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import Button from "../components/base/Button"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import ButtonHeader from "../components/base/ButtonHeader"
+import BodyHorizontalHalves from "../components/base/layout/BodyHorizontalHalves"
 
 
-export default function PageRepositoriesList({ children, className, ...props }) {
+export default function PageRepositoriesList() {
     const bv = useBackendViewset("/api/v1/repositories/", "id")
     const history = useHistory()
     const { strings } = useContext(ContextLanguage)
@@ -27,40 +27,47 @@ export default function PageRepositoriesList({ children, className, ...props })
     )
 
     return (
-        <div className={classNames(Style.PageRepositories, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                <FontAwesomeIcon icon={faHome}/> {strings.dashboard}
+                <BoxHeader>
-            </BoxHeader>
+                    <FontAwesomeIcon icon={faHome}/> {strings.dashboard}
-            <div className={Style.Buttons}>
+                </BoxHeader>
-                <Button
+            }
+            buttons={
+                <ButtonHeader
                     icon={faPlus}
                     color={"Green"}
                     onClick={() => history.push("/repositories/create")}
                 >
                     {strings.createRepo}
-                </Button>
+                </ButtonHeader>
-            </div>
+            }
-            <BoxRepositories
+        >
-                className={Style.ActiveRepositories}
+            <BodyHorizontalHalves
-                header={strings.menuActive}
+                upper={
-                loading={!bv.firstLoad}
+                    <BoxRepositories
-                running={bv.running}
+                        header={strings.menuActive}
-                repositories={bv.resources.filter(r => r.is_active)}
+                        loading={!bv.firstLoad}
-                view={pk => history.push(`/repositories/${pk}`)}
+                        running={bv.running}
-                share={pk => history.push(`/repositories/${pk}/share`)}
+                        repositories={bv.resources.filter(r => r.is_active)}
-                alerts={pk => history.push(`/repositories/${pk}/alerts`)}
+                        view={pk => history.push(`/repositories/${pk}`)}
-                archive={archive}
+                        share={pk => history.push(`/repositories/${pk}/share`)}
-                edit={pk => history.push(`/repositories/${pk}/edit`)}
+                        alerts={pk => history.push(`/repositories/${pk}/alerts/`)}
+                        archive={archive}
+                        edit={pk => history.push(`/repositories/${pk}/edit`)}
+                    />
+                }
+                lower={
+                    <BoxRepositories
+                        header={strings.menuArchived}
+                        loading={!bv.firstLoad}
+                        running={bv.running}
+                        repositories={bv.resources.filter(r => !r.is_active)}
+                        view={pk => history.push(`/repositories/${pk}`)}
+                        destroy={bv.destroyResource}
+                    />
+                }
             />
-            <BoxRepositories
+        </PageWithHeader>
-                className={Style.ArchivedRepositories}
-                header={strings.menuArchived}
-                loading={!bv.firstLoad}
-                running={bv.running}
-                repositories={bv.resources.filter(r => !r.is_active)}
-                view={pk => history.push(`/repositories/${pk}`)}
-                destroy={bv.destroyResource}
-            />
-        </div>
     )
 }

nest_frontend/routes/PageRepositoriesList.module.css

@@ -1,39 +0,0 @@
-.PageRepositories {
-    display: grid;
-
-    grid-template-areas:
-        "h x"
-        "a a"
-        "b b";
-    grid-template-columns: 4fr 1fr;
-    grid-template-rows: auto 1fr 1fr;
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}
-
-.Header {
-    grid-area: h;
-}
-
-.Buttons {
-    grid-area: x;
-
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-}
-
-.Buttons > * {
-    box-shadow: none;
-    flex-grow: 1;
-}
-
-.ActiveRepositories {
-    grid-area: a;
-}
-
-.ArchivedRepositories {
-    grid-area: b;
-}

nest_frontend/routes/PageRepositoryAlerts.js

@@ -1,27 +1,39 @@
 import React, { useContext } from "react"
-import Style from "./PageRepositoryAlerts.module.css"
-import classNames from "classnames"
 import BoxFull from "../components/base/BoxFull"
 import ContextLanguage from "../contexts/ContextLanguage"
 import BoxHeader from "../components/base/BoxHeader"
-import { useParams } from "react-router"
+import { useHistory, useParams } from "react-router"
+import { faBell, faPlus } from "@fortawesome/free-solid-svg-icons"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import ButtonHeader from "../components/base/ButtonHeader"
+import makeIcon from "../utils/makeIcon"
 
 
-export default function PageRepositoryAlerts({ children, className, ...props }) {
+export default function PageRepositoryAlerts() {
     const { strings } = useContext(ContextLanguage)
     const { id } = useParams()
+    const history = useHistory()
 
     return (
-        <div className={classNames(Style.PageAlerts, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                {strings.alerts}
+                <BoxHeader>
-            </BoxHeader>
+                    {makeIcon(faBell)} {strings.alerts}
-            <BoxFull header={strings.alertTitle} className={Style.YourAlerts}>
+                </BoxHeader>
+            }
+            buttons={
+                <ButtonHeader
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={() => history.push(`/repositories/${id}/alerts/create`)}
+                >
+                    {strings.alertCreate}
+                </ButtonHeader>
+            }
+        >
+            <BoxFull header={strings.alertTitle}>
                 {strings.notImplemented}
             </BoxFull>
-            <BoxFull header={strings.alertCreate} className={Style.CreateAlert}>
+        </PageWithHeader>
-                {strings.notImplemented}
-            </BoxFull>
-        </div>
     )
 }

nest_frontend/routes/PageRepositoryAlerts.module.css

@@ -1,26 +0,0 @@
-.PageAlerts {
-    display: grid;
-
-    grid-template-areas:
-        "a"
-        "b"
-        "c";
-    grid-template-rows: auto 1fr 1fr;
-
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}
-
-.Header {
-    grid-area: a;
-}
-
-.YourAlerts {
-    grid-area: b;
-}
-
-.CreateAlert {
-    grid-area: c;
-}

nest_frontend/routes/PageRepositoryAlertsCreate.js

@@ -0,0 +1,25 @@
+import React, { useContext } from "react"
+import ContextLanguage from "../contexts/ContextLanguage"
+import BoxHeader from "../components/base/BoxHeader"
+import { useParams } from "react-router"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import makeIcon from "../utils/makeIcon"
+import AlertEditor from "../components/providers/AlertEditor"
+
+
+export default function PageRepositoryAlertsCreate() {
+    const { strings } = useContext(ContextLanguage)
+
+    return (
+        <PageWithHeader
+            header={
+                <BoxHeader>
+                    {makeIcon(faPlus)} {strings.alertCreate}
+                </BoxHeader>
+            }
+        >
+            <AlertEditor/>
+        </PageWithHeader>
+    )
+}

nest_frontend/routes/PageRepositoryAnalyze.js

@@ -3,7 +3,7 @@ import { useParams } from "react-router"
 import RepositoryViewer from "../components/providers/RepositoryViewer"
 
 
-export default function PageRepositoryAnalyze({ className, ...props }) {
+export default function PageRepositoryAnalyze({...props }) {
     const { id } = useParams()
 
     return (

nest_frontend/routes/PageRepositoryCreate.js

@@ -1,20 +1,24 @@
 import React, { useContext } from "react"
-import Style from "./PageRepositoryCreate.module.css"
-import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
 import RepositoryEditor from "../components/providers/RepositoryEditor"
 import ContextLanguage from "../contexts/ContextLanguage"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import makeIcon from "../utils/makeIcon"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 
-export default function PageRepositoryCreate({ children, className, ...props }) {
+export default function PageRepositoryCreate() {
     const { strings } = useContext(ContextLanguage)
 
     return (
-        <div className={classNames(Style.PageHome, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                {strings.dashboardTitle}
+                <BoxHeader>
-            </BoxHeader>
+                    {makeIcon(faPlus)} {strings.dashboardTitle}
-            <RepositoryEditor className={Style.RepositoryEditor}/>
+                </BoxHeader>
-        </div>
+            }
+        >
+            <RepositoryEditor/>
+        </PageWithHeader>
     )
 }

nest_frontend/routes/PageRepositoryCreate.module.css

@@ -1,21 +0,0 @@
-.PageHome {
-    display: grid;
-
-    grid-template-areas:
-        "a"
-        "b";
-    grid-template-rows: auto 1fr;
-
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}
-
-.Header {
-    grid-area: a;
-}
-
-.RepositoryEditor {
-    grid-area: b;
-}

nest_frontend/routes/PageRepositoryEdit.js

@@ -1,6 +1,4 @@
 import React, { useContext } from "react"
-import Style from "./PageRepositoryCreate.module.css"
-import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
 import RepositoryEditor from "../components/providers/RepositoryEditor"
 import useBackendImmediately from "../hooks/useBackendImmediately"
@@ -8,9 +6,12 @@ import ContextUser from "../contexts/ContextUser"
 import renderContents from "../utils/renderContents"
 import { useParams } from "react-router"
 import ContextLanguage from "../contexts/ContextLanguage"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import makeIcon from "../utils/makeIcon"
+import { faPencilAlt } from "@fortawesome/free-solid-svg-icons"
 
 
-export default function PageRepositoryEdit({ className, ...props }) {
+export default function PageRepositoryEdit() {
     const { strings } = useContext(ContextLanguage)
 
     const { id } = useParams()
@@ -18,18 +19,18 @@ export default function PageRepositoryEdit({ className, ...props }) {
     const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`)
     const contents = renderContents(
         repositoryRequest,
-        data => {
+        data => <RepositoryEditor {...data}/>
-            console.debug("Data: ", data)
-            return <RepositoryEditor className={Style.RepositoryEditor} {...data}/>
-        },
     )
 
     return (
-        <div className={classNames(Style.PageHome, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                {strings.repoEdit}
+                <BoxHeader>
-            </BoxHeader>
+                    {makeIcon(faPencilAlt)} {strings.repoEdit}
+                </BoxHeader>
+            }
+        >
             {contents}
-        </div>
+        </PageWithHeader>
     )
 }

nest_frontend/routes/PageSettings.js

@@ -1,25 +1,36 @@
 import React, { useContext } from "react"
-import Style from "./PageSettings.module.css"
-import classNames from "classnames"
 import BoxFull from "../components/base/BoxFull"
 import SelectTheme from "../components/interactive/SelectTheme"
 import BoxLoggedIn from "../components/interactive/BoxLoggedIn"
 import SelectLanguage from "../components/interactive/SelectLanguage"
 import ContextLanguage from "../contexts/ContextLanguage"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import BoxHeader from "../components/base/BoxHeader"
+import { faCog } from "@fortawesome/free-solid-svg-icons"
+import makeIcon from "../utils/makeIcon"
+import BodyFlex from "../components/base/layout/BodyFlex"
 
 
-export default function PageSettings({ children, className, ...props }) {
+export default function PageSettings() {
     const { strings } = useContext(ContextLanguage)
 
     return (
-        <div className={classNames(Style.PageSettings, className)} {...props}>
+        <PageWithHeader
-            <BoxLoggedIn/>
+            header={
-            <BoxFull header={strings.changeLang}>
+                <BoxHeader>
-                <SelectLanguage/>
+                    {makeIcon(faCog)} {strings.settings}
-            </BoxFull>
+                </BoxHeader>
-            <BoxFull header={strings.switchTheme}>
+            }
-                <SelectTheme/>
+        >
-            </BoxFull>
+            <BodyFlex>
-        </div>
+                <BoxLoggedIn/>
+                <BoxFull header={strings.changeLang}>
+                    <SelectLanguage/>
+                </BoxFull>
+                <BoxFull header={strings.switchTheme}>
+                    <SelectTheme/>
+                </BoxFull>
+            </BodyFlex>
+        </PageWithHeader>
     )
 }

nest_frontend/routes/PageSettings.module.css

@@ -1,9 +0,0 @@
-.PageSettings {
-    display: flex;
-    flex-direction: column;
-
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}

nest_frontend/routes/PageShare.js

@@ -1,17 +1,16 @@
 import React, { useCallback, useContext } from "react"
-import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
-import ContextLanguage from "../contexts/ContextLanguage"
-import Style from "./PageShare.module.css"
 import BoxUserList from "../components/interactive/BoxUserList"
 import useBackendViewset from "../hooks/useBackendViewset"
 import { useParams } from "react-router"
 import ContextUser from "../contexts/ContextUser"
-import Alert from "../components/base/Alert"
 import useStrings from "../hooks/useStrings"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import BodyHorizontalHalves from "../components/base/layout/BodyHorizontalHalves"
+import AlertError from "../components/interactive/AlertError"
 
 
-export default function PageShare({ className, ...props }) {
+export default function PageShare() {
     const strings = useStrings()
     const { user: loggedUser } = useContext(ContextUser)
     const { id } = useParams()
@@ -71,30 +70,35 @@ export default function PageShare({ className, ...props }) {
     )
 
     return (
-        <div className={classNames(Style.PageShare, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                {strings.repoShare}
+                <BoxHeader>
-            </BoxHeader>
+                    {strings.repoShare}
-            <BoxUserList
+                </BoxHeader>
-                className={Style.UserList}
+            }
-                users={users.filter(user => user["email"] !== loggedUser["email"] && !authorizations.map(a => a.email).includes(user.email))}
+        >
-                shareWithUser={shareWith}
+            <BodyHorizontalHalves
-                header={strings.availableUsers}
+                upper={
-                running={usersBvRunning && authBvRunning}
+                    <BoxUserList
+                        users={users.filter(user => user["email"] !== loggedUser["email"] && !authorizations.map(a => a.email).includes(user.email))}
+                        shareWithUser={shareWith}
+                        header={strings.availableUsers}
+                        running={usersBvRunning || authBvRunning}
+                    />
+                }
+                lower={<>
+                    <BoxUserList
+                        users={users.filter(user => user["email"] === loggedUser["email"] || authorizations.map(a => a.email).includes(user.email))}
+                        unshareWithUser={unshareWith}
+                        header={strings.sharingWith}
+                        running={usersBvRunning || authBvRunning}
+                    />
+                </>}
+                error={<>
+                    {authBvError ? <AlertError error={authBvError}/> : null}
+                    {usersBvError ? <AlertError error={usersBvError}/> : null}
+                </>}
             />
-            <BoxUserList
+        </PageWithHeader>
-                className={Style.SharingWith}
-                users={users.filter(user => user["email"] === loggedUser["email"] || authorizations.map(a => a.email).includes(user.email))}
-                unshareWithUser={unshareWith}
-                header={strings.sharingWith}
-                running={usersBvRunning && authBvRunning}
-            />
-            {authBvError ?
-                <Alert color={"Red"} className={Style.Error}>{strings[authBvError?.data?.code ?? "errorUnknownError"]}</Alert>
-            : null}
-            {usersBvError ?
-                <Alert color={"Red"} className={Style.Error}>{strings[usersBvError?.data?.code ?? "errorUnknownError"]}</Alert>
-            : null}
-        </div>
     )
 }

nest_frontend/routes/PageShare.module.css

@@ -1,32 +0,0 @@
-.PageShare {
-    display: grid;
-
-    grid-template-areas:
-        "a"
-        "b"
-        "c"
-        "d";
-    grid-template-rows: auto 1fr 1fr auto;
-    grid-template-columns: 1fr;
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}
-
-
-.Header {
-    grid-area: a;
-}
-
-.UserList {
-    grid-area: b;
-}
-
-.SharingWith {
-    grid-area: c;
-}
-
-.Error {
-    grid-area: d;
-}

nest_frontend/routes/PageUsers.js

@@ -1,29 +1,45 @@
 import React, { useContext } from "react"
-import Style from "./PageUsers.module.css"
-import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
 import BoxUserCreate from "../components/interactive/BoxUserCreate"
 import useBackendViewset from "../hooks/useBackendViewset"
 import BoxUserList from "../components/interactive/BoxUserList"
 import ContextLanguage from "../contexts/ContextLanguage"
-import Alert from "../components/base/Alert"
+import PageWithHeader from "../components/base/layout/PageWithHeader"
+import { faUserCog } from "@fortawesome/free-solid-svg-icons"
+import makeIcon from "../utils/makeIcon"
+import AlertError from "../components/interactive/AlertError"
+import BodyHorizontalUpperGrow from "../components/base/layout/BodyHorizontalUpperGrow"
 
 
-export default function PageUsers({ children, className, ...props }) {
+export default function PageUsers() {
     const { strings } = useContext(ContextLanguage)
 
-    const bv = useBackendViewset("/api/v1/users/", "email")
+    const {createResource, running, resources, destroyResource, error} = useBackendViewset("/api/v1/users/", "email")
 
     return (
-        <div className={classNames(Style.PageUsers, className)} {...props}>
+        <PageWithHeader
-            <BoxHeader className={Style.Header}>
+            header={
-                {strings.manageUsers}
+                <BoxHeader>
-            </BoxHeader>
+                    {makeIcon(faUserCog)} {strings.manageUsers}
-            <BoxUserCreate className={Style.CreateUser} createUser={bv.createResource} running={bv.running}/>
+                </BoxHeader>
-            <BoxUserList className={Style.UserList} users={bv.resources} destroyUser={bv.destroyResource} running={bv.running}/>
+            }
-            {bv.error ?
+        >
-                <Alert className={Style.Error} color={"red"}>{strings[bv.error?.data?.code ?? "errorUnknownError"]}</Alert>
+            <BodyHorizontalUpperGrow
-            : null}
+                upper={
-        </div>
+                    <BoxUserList
+                        users={resources}
+                        destroyUser={destroyResource}
+                        running={running}
+                    />
+                }
+                lower={
+                    <BoxUserCreate
+                        createUser={createResource}
+                        running={running}
+                    />
+                }
+                error={error ? <AlertError error={error}/> : null}
+            />
+        </PageWithHeader>
     )
 }

nest_frontend/routes/PageUsers.module.css

@@ -1,32 +0,0 @@
-.PageUsers {
-    display: grid;
-
-    grid-template-areas:
-        "a"
-        "b"
-        "c"
-        "e";
-    grid-template-rows: auto 1fr auto auto;
-    grid-template-columns: 1fr;
-
-    grid-gap: 10px;
-
-    width: 100%;
-    height: 100%;
-}
-
-.Header {
-    grid-area: a;
-}
-
-.UserList {
-    grid-area: b;
-}
-
-.CreateUser {
-    grid-area: c;
-}
-
-.Error {
-    grid-area: e;
-}

nest_frontend/utils/countTweetWords.js

@@ -4,7 +4,7 @@ import sw from "stopword"
 const stopwords = [...sw.it, ...sw.en, "rt"]
 
 
-export default function countTweetWords(tweets = {}) {
+export default function countTweetWords(tweets = []) {
     let words = {}
     for(const tweet of tweets) {
         if(!tweet.content) {

nest_frontend/utils/renderContents.js

@@ -4,6 +4,9 @@ import Alert from "../components/base/Alert"
 import Starting from "../components/base/Starting"
 
 
+/**
+ * @deprecated
+ */
 export default function renderContents(requestHookResults, renderFunction) {
     const { data, error, loading } = requestHookResults