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

🔧 Make BoxLoggedIn into its own component

Browse source
This commit is contained in:
Stefano Pigozzi 2021-04-26 16:40:25 +02:00
parent b69f4e6ef1
commit e0333ef261
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
3 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
code/frontend/src/components/BoxLoggedIn.js Normal file
View file

@ -0,0 +1,30 @@
import React, { useContext } from "react"
import BoxFull from "./BoxFull"
import LoggedInUser from "./LoggedInUser"
import Button from "./Button"
import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"
import ContextLogin from "../contexts/ContextLogin"
import { useHistory } from "react-router"
import Style from "./BoxLoggedIn.module.css"
export default function BoxLoggedIn({ ...props }) {
const {logout} = useContext(ContextLogin)
const history = useHistory()
return (
<BoxFull header={"Logged in"} {...props}>
<div className={Style.BoxLoggedInContents}>
<div>
You are currently logged in as <LoggedInUser/>.
</div>
<div>
<Button color={"Red"} onClick={e => {
logout()
history.push("/login")
}} icon={faSignOutAlt}>Logout</Button>
</div>
</div>
</BoxFull>
)
}

5
code/frontend/src/components/BoxLoggedIn.module.css Normal file
View file

@ -0,0 +1,5 @@
.BoxLoggedInContents {
display: flex;
justify-content: space-between;
align-items: center;
}

23
code/frontend/src/routes/PageSettings.js
View file

@ -1,34 +1,17 @@
import React, { useContext } from "react"
import React from "react"
import Style from "./PageSettings.module.css"
import classNames from "classnames"
import BoxHeader from "../components/BoxHeader"
import BoxFull from "../components/BoxFull"
import SelectTheme from "../components/SelectTheme"
import ContextLogin from "../contexts/ContextLogin"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import { faSignOutAlt, faUser } from "@fortawesome/free-solid-svg-icons"
import Button from "../components/Button"
import LoggedInUser from "../components/LoggedInUser"
import { useHistory } from "react-router"
import BoxLoggedIn from "../components/BoxLoggedIn"
export default function PageSettings({ children, className, ...props }) {
const {logout} = useContext(ContextLogin)
const history = useHistory()
return (
<div className={classNames(Style.PageSettings, className)} {...props}>
<BoxFull header={"Logged in"}>
<div>
You are currently logged in as <LoggedInUser/>.
</div>
<div>
<Button color={"Red"} onClick={e => {
logout()
history.push("/login")
}} icon={faSignOutAlt}>Logout</Button>
</div>
</BoxFull>
<BoxLoggedIn/>
<BoxHeader>
Switch theme: <SelectTheme/>
</BoxHeader>