unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-22 04:54:18 +00:00
Code Activity

💥 Refactor more more more more things

Browse source
This commit is contained in:
Steffo 2021-05-22 04:57:38 +02:00
parent 2bcfb3bdf7
commit 850adb5ba5
Signed by: steffo
GPG key ID: 6965406171929D01
13 changed files with 52 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
nest_frontend/components/interactive/BadgeCondition.js
View file

@ -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 (
<Badge
title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
color={color}
icon={icon}
onClickDelete={() => {
console.debug(`Removing Condition: `, condition)
removeRawCondition(condition)
}}
>
{displayedContent}
</Badge>
{...condition.display()}
onClickDelete={() => removeRawCondition(condition)}
/>
)
}

38
nest_frontend/components/interactive/BadgeCondition.module.css
View file

@ -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;
}

9
nest_frontend/components/interactive/BadgeFilter.js
View file

@ -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 (
<Badge
color={filter.color()}
icon={filter.icon()}
{...filter.display()}
onClickDelete={() => removeFilter(filter)}
>
{filter.text()}
</Badge>
/>
)
}

21
nest_frontend/components/interactive/BoxConditionDatetime.js
View file

@ -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 (
<BoxFull

7
nest_frontend/components/interactive/BoxConditionDatetime.module.css
View file

@ -1,7 +0,0 @@
.Input {
flex-shrink: 1;
}
.Button {
}

15
nest_frontend/components/interactive/BoxConditionHashtag.js
View file

@ -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 { faHashtag } from "@fortawesome/free-solid-svg-icons"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
import Condition from "../../utils/Condition"
import ContextLanguage from "../../contexts/ContextLanguage"
import FormInlineHashtag from "./FormInlineHashtag"
import { ConditionHashtag } from "../../objects/Condition"
/**
* 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}.
* A {@link BoxFull} that allows the user to select a Twitter hashtag to search for, and then to add it as a
* {@link ConditionHashtag} of a RepositoryEditor.
*
* @param props - Additional props to pass to the box.
* @returns {JSX.Element}
@ -20,9 +20,10 @@ export default function BoxConditionHashtag({ ...props }) {
const { addCondition } = useRepositoryEditor()
const { strings } = useContext(ContextLanguage)
const submit = value => {
addCondition(new Condition("HASHTAG", value))
}
const submit = useCallback(
value => addCondition(new ConditionHashtag(value)),
[addCondition]
)
return (
<BoxFull

21
nest_frontend/components/interactive/BoxConditionMap.js → nest_frontend/components/interactive/BoxConditionLocation.js
View file

@ -1,36 +1,29 @@
import React, { useCallback, useContext } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
import { faLocationArrow, faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
import ButtonIconOnly from "../base/ButtonIconOnly"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
import Condition from "../../utils/Condition"
import ContextLanguage from "../../contexts/ContextLanguage"
import BoxMap from "../base/BoxMap"
import useMapAreaState from "../../hooks/useMapAreaState"
import osmZoomLevels from "../../utils/osmZoomLevels"
import { ConditionLocation } from "../../objects/Condition"
/**
* A {@link BoxFull} that allows the user to select a geographical location to use to filter tweets.
* A {@link BoxMap} that allows the user to select a geographical location, and then to add it as a
* {@link ConditionLocation} of a RepositoryEditor.
*
* @param props - Additional props to pass to the box.
* @returns {JSX.Element}
* @constructor
*/
export default function BoxConditionMap({ ...props }) {
export default function BoxConditionLocation({ ...props }) {
const mapViewHook = useMapAreaState()
const { addCondition } = useRepositoryEditor()
const { strings } = useContext(ContextLanguage)
const onButtonClick = useCallback(
() => {
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 }) {
<span>
{strings.searchBy}
&nbsp;
<FontAwesomeIcon icon={faMapPin}/>
<FontAwesomeIcon icon={faLocationArrow}/>
&nbsp;
{strings.byZone}
</span>

15
nest_frontend/components/interactive/BoxConditionUser.js
View file

@ -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 (
<BoxFull

2
nest_frontend/components/interactive/BoxConditions.js
View file

@ -16,7 +16,7 @@ export default function BoxConditions({ ...props }) {
const { conditions } = useRepositoryEditor()
const { strings } = useContext(ContextLanguage)
const badges = conditions.map((cond, pos) => <BadgeCondition key={pos} {...cond}/>)
const badges = conditions.map((cond, pos) => <BadgeCondition key={pos} condition={cond}/>)
return (
<BoxFull header={strings.conditions} {...props}>

6
nest_frontend/components/interactive/FormInlineBADatetime.js
View file

@ -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("")
}

1
nest_frontend/components/providers/GlobalServer.js
View file

@ -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")
/**

12
nest_frontend/components/providers/GlobalUser.js
View file

@ -50,13 +50,13 @@ export default function GlobalUser({ children }) {
* @returns {Promise<void>}
*/
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 (

4
nest_frontend/components/providers/RepositoryEditor.js
View file

@ -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({
}}
>
<div className={classNames(Style.RepositoryEditor, className)}>
<BoxConditionMap className={Style.SearchByZone}/>
<BoxConditionLocation className={Style.SearchByZone}/>
<BoxConditionHashtag className={Style.SearchByHashtags}/>
<BoxConditionUser className={Style.SearchByUser}/>
<BoxConditionDatetime className={Style.SearchByTimePeriod}/>