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-24 22:14:18 +00:00
Code Activity

🔧 Refactor more page stuff

Browse source
This commit is contained in:
Steffo 2021-05-25 04:06:14 +02:00
parent db167a7d8a
commit 6c0248cda6
Signed by: steffo
GPG key ID: 6965406171929D01
29 changed files with 485 additions and 341 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
nest_frontend/LocalizationStrings.js
View file

@ -141,7 +141,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: {

11
nest_frontend/PageSwitcher.js
View file

@ -9,9 +9,15 @@ 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"
export default function PageSwitcher({ ...props }) {
const strings = useStrings()
return (
<Switch {...props}>
<Route path={"/repositories/create"} exact={true}>
@ -38,9 +44,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>
)
}

19
nest_frontend/components/base/ButtonHeader.js Normal file
View file

@ -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}/>
)
}

4
nest_frontend/components/base/ButtonHeader.module.css Normal file
View file

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

12
nest_frontend/components/base/layout/BodyFlex.js Normal file
View file

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

7
nest_frontend/routes/PageLogin.module.css → nest_frontend/components/base/layout/BodyFlex.module.css
View file

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

17
nest_frontend/components/base/layout/BodyHorizontalHalves.js Normal file
View file

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

24
nest_frontend/components/base/layout/BodyHorizontalHalves.module.css Normal file
View file

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

20
nest_frontend/components/base/layout/BodyHorizontalUpperGrow.js Normal file
View file

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

29
nest_frontend/components/base/layout/BodyHorizontalUpperGrow.module.css Normal file
View file

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

22
nest_frontend/components/base/layout/PageWithHeader.js Normal file
View file

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

38
nest_frontend/components/base/layout/PageWithHeader.module.css Normal file
View file

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

136
nest_frontend/components/providers/RepositoryViewer.js
View file

@ -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
for(const filter of filters) {
tweets = tweets.filter(tweet => filter.exec(tweet))
}
const filteredTweets = useMemo(
() => {
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)),
[tweets],
() => objectToWordcloudFormat(countTweetWords(filteredTweets)),
[filteredTweets],
)
let contents
if(!repositoryBr.firstLoad || !rawTweetsBv.firstLoad) {
contents = <>
<BoxHeader className={Style.Header}>
<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}
// Page header
const header = useMemo(
() => (
<BoxHeader>
<FontAwesomeIcon icon={repository?.is_active ? faFolderOpen : faFolder}/> {repository?.name}
</BoxHeader>
),
[repository?.is_active, repository?.name]
)
<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}
// Page contents
const contents = useMemo(
() => {
if(!repositoryFirstLoad || !tweetsFirstLoad) {
return <Loading/>
}
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}/>
<PickerFilter className={Style.FilterPicker}/>
{filterTab === "contains" ? <BoxFilterContains className={Style.AddFilter}/> : null}
{filterTab === "hashtag" ? <BoxFilterHashtag className={Style.AddFilter}/> : null}
{filterTab === "user" ? <BoxFilterUser className={Style.AddFilter}/> : null}
{filterTab === "retweet" ? <BoxFilterIsNotRetweet className={Style.AddFilter}/> : null}
{filterTab === "image" ? <BoxFilterHasImage className={Style.AddFilter}/> : null}
{filterTab === "time" ? <BoxFilterDatetime className={Style.AddFilter}/> : null}
{filterTab === "place" ? <BoxFilterHasPlace className={Style.AddFilter}/> : null}
{filterTab === "location" ? <BoxFilterLocation className={Style.AddFilter}/> : null}
</>
}
<BoxFilters className={Style.Filters}/>
<PickerFilter className={Style.FilterPicker}/>
{filterTab === "contains" ? <BoxFilterContains className={Style.AddFilter}/> : null}
{filterTab === "hashtag" ? <BoxFilterHashtag className={Style.AddFilter}/> : null}
{filterTab === "user" ? <BoxFilterUser className={Style.AddFilter}/> : null}
{filterTab === "retweet" ? <BoxFilterIsNotRetweet className={Style.AddFilter}/> : null}
{filterTab === "image" ? <BoxFilterHasImage className={Style.AddFilter}/> : null}
{filterTab === "time" ? <BoxFilterDatetime className={Style.AddFilter}/> : null}
{filterTab === "place" ? <BoxFilterHasPlace 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,
tweets: filteredTweets,
words,
mapViewHook,
}}
>
<div className={classNames(Style.RepositoryViewer, className)} {...props}>
<PageWithHeader header={header}>
{contents}
</div>
</PageWithHeader>
</ContextRepositoryViewer.Provider>
)
}

7
nest_frontend/components/providers/RepositoryViewer.module.css
View file

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

32
nest_frontend/routes/PageLogin.js
View file

@ -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({ ...props }) {
const {user} = useContext(ContextUser)
const strings = useStrings()
@ -20,15 +20,21 @@ export default function PageLogin({ className, ...props }) {
}
return (
<div className={classNames(Style.PageLogin, className)} {...props}>
<BoxHeader>
{strings.welcomeToNest}
</BoxHeader>
<BoxSetServer/>
<BoxLogin/>
<BoxFull header={strings.changeLang}>
<SelectLanguage/>
</BoxFull>
</div>
<PageWithHeader
header={
<BoxHeader>
{strings.welcomeToNest}
</BoxHeader>
}
{...props}
>
<BodyFlex>
<BoxSetServer/>
<BoxLogin/>
<BoxFull header={strings.changeLang}>
<SelectLanguage/>
</BoxFull>
</BodyFlex>
</PageWithHeader>
)
}

71
nest_frontend/routes/PageRepositoriesList.js
View file

@ -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,7 +6,9 @@ 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 }) {
@ -27,40 +27,47 @@ export default function PageRepositoriesList({ children, className, ...props })
)
return (
<div className={classNames(Style.PageRepositories, className)} {...props}>
<BoxHeader className={Style.Header}>
<FontAwesomeIcon icon={faHome}/> {strings.dashboard}
</BoxHeader>
<div className={Style.Buttons}>
<Button
<PageWithHeader
header={
<BoxHeader>
<FontAwesomeIcon icon={faHome}/> {strings.dashboard}
</BoxHeader>
}
buttons={
<ButtonHeader
icon={faPlus}
color={"Green"}
onClick={() => history.push("/repositories/create")}
>
{strings.createRepo}
</Button>
</div>
<BoxRepositories
className={Style.ActiveRepositories}
header={strings.menuActive}
loading={!bv.firstLoad}
running={bv.running}
repositories={bv.resources.filter(r => r.is_active)}
view={pk => history.push(`/repositories/${pk}`)}
share={pk => history.push(`/repositories/${pk}/share`)}
alerts={pk => history.push(`/repositories/${pk}/alerts`)}
archive={archive}
edit={pk => history.push(`/repositories/${pk}/edit`)}
</ButtonHeader>
}
>
<BodyHorizontalHalves
upper={
<BoxRepositories
header={strings.menuActive}
loading={!bv.firstLoad}
running={bv.running}
repositories={bv.resources.filter(r => r.is_active)}
view={pk => history.push(`/repositories/${pk}`)}
share={pk => history.push(`/repositories/${pk}/share`)}
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
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>
</PageWithHeader>
)
}

39
nest_frontend/routes/PageRepositoriesList.module.css
View file

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

33
nest_frontend/routes/PageRepositoryAlerts.js
View file

@ -1,27 +1,40 @@
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 }) {
const { strings } = useContext(ContextLanguage)
const { id } = useParams()
const history = useHistory()
return (
<div className={classNames(Style.PageAlerts, className)} {...props}>
<BoxHeader className={Style.Header}>
{strings.alerts}
</BoxHeader>
<PageWithHeader
header={
<BoxHeader className={Style.Header}>
{makeIcon(faBell)} {strings.alerts}
</BoxHeader>
}
buttons={
<ButtonHeader
icon={faPlus}
color={"Green"}
onClick={() => history.push(`/repositories/${id}/alerts/create`)}
>
{strings.alertCreate}
</ButtonHeader>
}
>
<BoxFull header={strings.alertTitle} className={Style.YourAlerts}>
{strings.notImplemented}
</BoxFull>
<BoxFull header={strings.alertCreate} className={Style.CreateAlert}>
{strings.notImplemented}
</BoxFull>
</div>
</PageWithHeader>
)
}

25
nest_frontend/routes/PageRepositoryAlerts.module.css
View file

@ -2,10 +2,10 @@
display: grid;
grid-template-areas:
"a"
"b"
"c";
grid-template-rows: auto 1fr 1fr;
"a x"
"b b";
grid-template-columns: 4fr 1fr;
grid-template-rows: auto 1fr;
grid-gap: 10px;
@ -17,10 +17,19 @@
grid-area: a;
}
.Buttons {
grid-area: x;
display: flex;
flex-direction: row;
align-items: stretch;
}
.Buttons > * {
box-shadow: none;
flex-grow: 1;
}
.YourAlerts {
grid-area: b;
}
.CreateAlert {
grid-area: c;
}

23
nest_frontend/routes/PageRepositoryCreate.js
View file

@ -1,20 +1,25 @@
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({ ...props }) {
const { strings } = useContext(ContextLanguage)
return (
<div className={classNames(Style.PageHome, className)} {...props}>
<BoxHeader className={Style.Header}>
{strings.dashboardTitle}
</BoxHeader>
<RepositoryEditor className={Style.RepositoryEditor}/>
</div>
<PageWithHeader
header={
<BoxHeader>
{makeIcon(faPlus)} {strings.dashboardTitle}
</BoxHeader>
}
{...props}
>
<RepositoryEditor/>
</PageWithHeader>
)
}

21
nest_frontend/routes/PageRepositoryCreate.module.css
View file

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

21
nest_frontend/routes/PageRepositoryEdit.js
View file

@ -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,6 +6,9 @@ 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 }) {
@ -20,16 +21,20 @@ export default function PageRepositoryEdit({ className, ...props }) {
repositoryRequest,
data => {
console.debug("Data: ", data)
return <RepositoryEditor className={Style.RepositoryEditor} {...data}/>
return <RepositoryEditor {...data}/>
},
)
return (
<div className={classNames(Style.PageHome, className)} {...props}>
<BoxHeader className={Style.Header}>
{strings.repoEdit}
</BoxHeader>
<PageWithHeader
header={
<BoxHeader>
{makeIcon(faPencilAlt)} {strings.repoEdit}
</BoxHeader>
}
{...props}
>
{contents}
</div>
</PageWithHeader>
)
}

33
nest_frontend/routes/PageSettings.js
View file

@ -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 }) {
const { strings } = useContext(ContextLanguage)
return (
<div className={classNames(Style.PageSettings, className)} {...props}>
<BoxLoggedIn/>
<BoxFull header={strings.changeLang}>
<SelectLanguage/>
</BoxFull>
<BoxFull header={strings.switchTheme}>
<SelectTheme/>
</BoxFull>
</div>
<PageWithHeader
header={
<BoxHeader>
{makeIcon(faCog)} {strings.settings}
</BoxHeader>
}
>
<BodyFlex>
<BoxLoggedIn/>
<BoxFull header={strings.changeLang}>
<SelectLanguage/>
</BoxFull>
<BoxFull header={strings.switchTheme}>
<SelectTheme/>
</BoxFull>
</BodyFlex>
</PageWithHeader>
)
}

9
nest_frontend/routes/PageSettings.module.css
View file

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

60
nest_frontend/routes/PageShare.js
View file

@ -1,14 +1,13 @@
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 }) {
@ -71,30 +70,35 @@ export default function PageShare({ className, ...props }) {
)
return (
<div className={classNames(Style.PageShare, className)} {...props}>
<BoxHeader className={Style.Header}>
{strings.repoShare}
</BoxHeader>
<BoxUserList
className={Style.UserList}
users={users.filter(user => user["email"] !== loggedUser["email"] && !authorizations.map(a => a.email).includes(user.email))}
shareWithUser={shareWith}
header={strings.availableUsers}
running={usersBvRunning && authBvRunning}
<PageWithHeader
header={
<BoxHeader>
{strings.repoShare}
</BoxHeader>
}
>
<BodyHorizontalHalves
upper={
<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
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>
</PageWithHeader>
)
}

32
nest_frontend/routes/PageShare.module.css
View file

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

44
nest_frontend/routes/PageUsers.js
View file

@ -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 }) {
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}>
<BoxHeader className={Style.Header}>
{strings.manageUsers}
</BoxHeader>
<BoxUserCreate className={Style.CreateUser} createUser={bv.createResource} running={bv.running}/>
<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>
: null}
</div>
<PageWithHeader
header={
<BoxHeader>
{makeIcon(faUserCog)} {strings.manageUsers}
</BoxHeader>
}
>
<BodyHorizontalUpperGrow
upper={
<BoxUserList
users={resources}
destroyUser={destroyResource}
running={running}
/>
}
lower={
<BoxUserCreate
createUser={createResource}
running={running}
/>
}
error={error ? <AlertError error={error}/> : null}
/>
</PageWithHeader>
)
}

32
nest_frontend/routes/PageUsers.module.css
View file

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

2
nest_frontend/utils/countTweetWords.js
View file

@ -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) {