diff --git a/nest_frontend/components/interactive/BadgeCondition.js b/nest_frontend/components/interactive/BadgeCondition.js index 63a01fa..dc30660 100644 --- a/nest_frontend/components/interactive/BadgeCondition.js +++ b/nest_frontend/components/interactive/BadgeCondition.js @@ -1,65 +1,22 @@ import React, { useContext } from "react" -import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons" import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor" import Badge from "../base/Badge" -const CONDITION_COLORS = { - 0: "Grey", // Hashtag - 2: "Yellow", // Time - 3: "Red", // Coordinates - 4: "Red", // Place - 5: "Green", // User -} - - -const CONDITION_ICONS = { - 0: faHashtag, // Hashtag - 2: faClock, // Time - 3: faGlobe, // Coordinates - 4: faMapPin, // Place - 5: faAt, // User -} - - /** - * A {@link Badge} representing a Condition for a filter. + * A {@link Badge} representing a {@link Condition}. * - * @param condition - The Condition that this badge represents. + * @param condition - The {@link Condition} that this badge represents. * @returns {JSX.Element} * @constructor */ -export default function BadgeCondition({ ...condition }) { - const { id, type, content } = condition - const color = CONDITION_COLORS[type] - const icon = CONDITION_ICONS[type] +export default function BadgeCondition({ condition }) { const { removeRawCondition } = useContext(ContextRepositoryEditor) - let displayedContent = content - if(type === 3) { - let split = displayedContent.split(" ") - let radius = Number.parseFloat(split[1]).toFixed(0) - let radiusType = "m" - if(radius >= 2000) { - radius = Math.round(radius / 1000) - radiusType = "km" - } - let lat = Number(split[2]).toFixed(3) - let lng = Number(split[3]).toFixed(3) - displayedContent = `${split[0]} ${radius}${radiusType} ${lat} ${lng}` - } - return ( { - console.debug(`Removing Condition: `, condition) - removeRawCondition(condition) - }} - > - {displayedContent} - + {...condition.display()} + onClickDelete={() => removeRawCondition(condition)} + /> ) } diff --git a/nest_frontend/components/interactive/BadgeCondition.module.css b/nest_frontend/components/interactive/BadgeCondition.module.css deleted file mode 100644 index b67445c..0000000 --- a/nest_frontend/components/interactive/BadgeCondition.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.ConditionBadge { - display: inline-flex; - - gap: 5px; - padding: 0 5px; - border-radius: 25px; - margin: 0 2px; -} - -.ConditionBadgeRed { - background-color: var(--bg-red); - color: var(--fg-red) -} - -.ConditionBadgeYellow { - background-color: var(--bg-yellow); - color: var(--fg-yellow) -} - -.ConditionBadgeGrey { - background-color: var(--bg-grey); - color: var(--fg-grey) -} - -.ConditionBadgeGreen { - background-color: var(--bg-green); - color: var(--fg-green) -} - -.Text { - max-width: 350px; - overflow-x: hidden; -} - -.Icon { - width: 15px; - text-align: center; -} \ No newline at end of file diff --git a/nest_frontend/components/interactive/BadgeFilter.js b/nest_frontend/components/interactive/BadgeFilter.js index c031b61..d3571ed 100644 --- a/nest_frontend/components/interactive/BadgeFilter.js +++ b/nest_frontend/components/interactive/BadgeFilter.js @@ -1,6 +1,6 @@ import React, { useContext } from "react" -import Badge from "../base/Badge" import ContextRepositoryViewer from "../../contexts/ContextRepositoryViewer" +import Badge from "../base/Badge" /** @@ -15,11 +15,8 @@ export default function BadgeFilter({ filter }) { return ( removeFilter(filter)} - > - {filter.text()} - + /> ) } diff --git a/nest_frontend/components/interactive/BoxConditionDatetime.js b/nest_frontend/components/interactive/BoxConditionDatetime.js index 455a0b7..1145576 100644 --- a/nest_frontend/components/interactive/BoxConditionDatetime.js +++ b/nest_frontend/components/interactive/BoxConditionDatetime.js @@ -1,17 +1,16 @@ -import React, { useContext } from "react" +import React, { useCallback, useContext } from "react" import BoxFull from "../base/BoxFull" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faClock } from "@fortawesome/free-solid-svg-icons" import useRepositoryEditor from "../../hooks/useRepositoryEditor" -import Condition from "../../utils/Condition" -import convertToLocalISODate from "../../utils/convertToLocalISODate" import ContextLanguage from "../../contexts/ContextLanguage" import FormInlineBADatetime from "./FormInlineBADatetime" +import { ConditionTime } from "../../objects/Condition" /** - * 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}. + * A {@link BoxFull} that allows the user to select a Twitter user to search for, and then to add it as a + * {@link ConditionTime} of a RepositoryEditor. * * @param props - Additional props to pass to the box. * @returns {JSX.Element} @@ -21,14 +20,10 @@ export default function BoxConditionDatetime({ ...props }) { const { addCondition } = useRepositoryEditor() const { strings } = useContext(ContextLanguage) - const submit = ({ date, isBefore }) => { - if(date.toString() === "Invalid Date") { - console.debug("Refusing to add condition: ", date, " is an Invalid Date.") - return - } - const aware = convertToLocalISODate(date) - addCondition(new Condition("TIME", `${isBefore ? "<" : ">"} ${aware}`)) - } + const submit = useCallback( + timeRay => addCondition(new ConditionTime(timeRay)), + [addCondition] + ) return ( { - addCondition(new Condition("HASHTAG", value)) - } + const submit = useCallback( + value => addCondition(new ConditionHashtag(value)), + [addCondition] + ) return ( { - const radius = mapViewHook.zoom * osmZoomLevels[mapViewHook.zoom] - - addCondition(new Condition( - "COORDINATES", - `< ${radius} ${mapViewHook.center.lat} ${mapViewHook.center.lng}`, - )) - }, + () => addCondition(new ConditionLocation(mapViewHook.mapArea)), [mapViewHook, addCondition] ) @@ -41,7 +34,7 @@ export default function BoxConditionMap({ ...props }) { {strings.searchBy}   - +   {strings.byZone} diff --git a/nest_frontend/components/interactive/BoxConditionUser.js b/nest_frontend/components/interactive/BoxConditionUser.js index f7dced1..00bddd9 100644 --- a/nest_frontend/components/interactive/BoxConditionUser.js +++ b/nest_frontend/components/interactive/BoxConditionUser.js @@ -1,16 +1,16 @@ -import React, { useContext } from "react" +import React, { useCallback, useContext } from "react" import BoxFull from "../base/BoxFull" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faAt } from "@fortawesome/free-solid-svg-icons" import useRepositoryEditor from "../../hooks/useRepositoryEditor" -import Condition from "../../utils/Condition" import ContextLanguage from "../../contexts/ContextLanguage" import FormInlineUser from "./FormInlineUser" +import { ConditionHashtag, ConditionUser } from "../../objects/Condition" /** - * 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}. + * A {@link BoxFull} that allows the user to select a Twitter user to search for, and then to add it as a + * {@link ConditionUser} of a RepositoryEditor. * * @param props - Additional props to pass to the box. * @returns {JSX.Element} @@ -20,9 +20,10 @@ export default function BoxConditionUser({ ...props }) { const { addCondition } = useRepositoryEditor() const { strings } = useContext(ContextLanguage) - const submit = value => { - addCondition(new Condition("USER", value)) - } + const submit = useCallback( + value => addCondition(new ConditionUser(value)), + [addCondition] + ) return ( ) + const badges = conditions.map((cond, pos) => ) return ( diff --git a/nest_frontend/components/interactive/FormInlineBADatetime.js b/nest_frontend/components/interactive/FormInlineBADatetime.js index 1e4055c..ccf88dc 100644 --- a/nest_frontend/components/interactive/FormInlineBADatetime.js +++ b/nest_frontend/components/interactive/FormInlineBADatetime.js @@ -5,6 +5,7 @@ import { faClock, faPlus } from "@fortawesome/free-solid-svg-icons" import ButtonIconOnly from "../base/ButtonIconOnly" import Style from "./FormInlineText.module.css" import ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter" +import TimeRay from "../../objects/TimeRay" const INVALID_CHARACTERS = /[^0-9TZ:+-]/g @@ -26,10 +27,7 @@ export default function FormInlineBADatetime( const _onSubmit = event => { event.preventDefault() - submit({ - date: new Date(value), - isBefore, - }) + submit(new TimeRay(isBefore, new Date(value))) setValue("") } diff --git a/nest_frontend/components/providers/GlobalServer.js b/nest_frontend/components/providers/GlobalServer.js index 69a2346..0250e99 100644 --- a/nest_frontend/components/providers/GlobalServer.js +++ b/nest_frontend/components/providers/GlobalServer.js @@ -14,6 +14,7 @@ import isString from "is-string" * @constructor */ export default function GlobalServer({ children }) { + // TODO: Set this using an envvar const [server, setServer] = useLocalStorageState("server", "http://127.0.0.1:5000") /** diff --git a/nest_frontend/components/providers/GlobalUser.js b/nest_frontend/components/providers/GlobalUser.js index 8bbe256..8c2d798 100644 --- a/nest_frontend/components/providers/GlobalUser.js +++ b/nest_frontend/components/providers/GlobalUser.js @@ -50,13 +50,13 @@ export default function GlobalUser({ children }) { * @returns {Promise} */ const login = useCallback(async (email, password) => { - console.debug("Contattando il server per accedere...") + console.debug("Contacting the server to login...") const data = await fetchData("POST", `/api/v1/login`, { "email": email, "password": password, }) - console.debug("Memorizzando lo stato di login...") + console.debug("Saving login state...") setUser({ email: data["user"]["email"], isAdmin: data["user"]["isAdmin"], @@ -64,18 +64,18 @@ export default function GlobalUser({ children }) { token: data["access_token"], }) - console.info("Accesso effettuato!") + console.info("Login successful!") }, [fetchData, setUser]) /** * Logout from the currently active server. */ const logout = useCallback(() => { - console.debug("Ripulendo lo stato di login...") + console.debug("Clearing login state...") setUser(null) - console.debug("Stato di login ripulito!") + console.debug("Cleared login state!") - console.info("Logout avvenuto con successo!") + console.info("Logout successful!") }, [setUser]) return ( diff --git a/nest_frontend/components/providers/RepositoryEditor.js b/nest_frontend/components/providers/RepositoryEditor.js index 248b00a..f933204 100644 --- a/nest_frontend/components/providers/RepositoryEditor.js +++ b/nest_frontend/components/providers/RepositoryEditor.js @@ -2,7 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from "react" import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor" import useArrayState from "../../hooks/useArrayState" import Style from "./RepositoryEditor.module.css" -import BoxConditionMap from "../interactive/BoxConditionMap" +import BoxConditionLocation from "../interactive/BoxConditionLocation" import BoxConditionHashtag from "../interactive/BoxConditionHashtag" import BoxConditionUser from "../interactive/BoxConditionUser" import BoxConditionDatetime from "../interactive/BoxConditionDatetime" @@ -142,7 +142,7 @@ export default function RepositoryEditor({ }} >
- +