From 409f049fc519c045d6045f64f55fbcca0091df83 Mon Sep 17 00:00:00 2001
From: edsheebran <damien.armillon@student-cs.fr>
Date: Mon, 18 Nov 2019 19:43:52 +0100
Subject: [PATCH] Refactor front
---
front/src/App.js | 9 ++--
front/src/{view => utils}/LogoutButton.js | 0
.../showToucan => utils}/ModalSuppression.js | 2 +-
front/src/utils/yearSelector.js | 17 ++++---
front/src/view/AdminPage/AdminPage.js | 17 ++-----
.../view/AdminPage/showToucan/ToucanLine.js | 47 -------------------
.../view/AdminPage/showToucan/ToucanTable.js | 44 -----------------
front/src/view/AllToucanPage/AllToucanPage.js | 14 ++----
front/src/view/AllToucanPage/ToucanCard.js | 32 ++++++++++---
front/src/view/PageHeader.js | 14 ++++--
10 files changed, 58 insertions(+), 138 deletions(-)
rename front/src/{view => utils}/LogoutButton.js (100%)
rename front/src/{view/AdminPage/showToucan => utils}/ModalSuppression.js (97%)
delete mode 100644 front/src/view/AdminPage/showToucan/ToucanLine.js
delete mode 100644 front/src/view/AdminPage/showToucan/ToucanTable.js
diff --git a/front/src/App.js b/front/src/App.js
index 080821a..6e9e209 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -9,12 +9,13 @@ import env from './.env';
import isLogged from './utils/Oauth';
function App() {
- return (
+ const logged = isLogged();
+ return (
<Router >
- <PageHeader />
- <Route exact path='/' component={AllToucanPage} />
- <Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
+ <PageHeader isLogged={logged} />
+ <Route exact path='/admin' render={()=>logged ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
<Route exact path='/login/:token' component={Login} />
+ <AllToucanPage isAdmin={logged}/>
</Router>
);
}
diff --git a/front/src/view/LogoutButton.js b/front/src/utils/LogoutButton.js
similarity index 100%
rename from front/src/view/LogoutButton.js
rename to front/src/utils/LogoutButton.js
diff --git a/front/src/view/AdminPage/showToucan/ModalSuppression.js b/front/src/utils/ModalSuppression.js
similarity index 97%
rename from front/src/view/AdminPage/showToucan/ModalSuppression.js
rename to front/src/utils/ModalSuppression.js
index 95ae2b8..6a225cb 100644
--- a/front/src/view/AdminPage/showToucan/ModalSuppression.js
+++ b/front/src/utils/ModalSuppression.js
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import {Modal, Button, Image,Message} from 'semantic-ui-react'
-import env from '../../../.env'
+import env from '../.env'
class ModalSupression extends Component {
state = {error:''};
diff --git a/front/src/utils/yearSelector.js b/front/src/utils/yearSelector.js
index 368117e..11754b8 100644
--- a/front/src/utils/yearSelector.js
+++ b/front/src/utils/yearSelector.js
@@ -16,13 +16,16 @@ function SelectYear(props) {
});
}
return(
- <Dropdown
- selection
- placeholder="value"
- options = {years}
- defaultValue = {props.beginYear}
- onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
- />
+ <div style={props.style}>
+ <span style={{marginRight:'1em'}}>Année de parution :</span>
+ <Dropdown
+ selection
+ placeholder="value"
+ options = {years}
+ defaultValue = {props.beginYear}
+ onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
+ />
+ </div>
)
}
diff --git a/front/src/view/AdminPage/AdminPage.js b/front/src/view/AdminPage/AdminPage.js
index 744bc65..87e4cfc 100644
--- a/front/src/view/AdminPage/AdminPage.js
+++ b/front/src/view/AdminPage/AdminPage.js
@@ -1,29 +1,18 @@
import React, {Component} from 'react';
import {Segment} from 'semantic-ui-react';
-import ToucanTable from './showToucan/ToucanTable';
+//import ToucanTable from './showToucan/ToucanTable';
import FormToucan from './FormToucan';
-import LogoutButton from '../LogoutButton';
+//import LogoutButton from '../LogoutButton';
class MainPage extends Component {
render(){
return (
- <Segment.Group >
- <Segment padded style={{margin:"3%"}}>
- <div style={{textAlign:"right"}}>
- <LogoutButton />
- </div>
- <div>
+ <Segment style={{margin:"3em",padding:"2em"}}>
<h2 style={{textAlign:"center"}}>Rajout de Toucan</h2>
<FormToucan />
- </div>
</Segment>
- <Segment textAlign="center" padded style={{margin:"3%"}} >
- <h2>Les Toucans</h2>
- <ToucanTable style={{margin:"50px"}}/>
- </Segment>
- </Segment.Group>
);
}
diff --git a/front/src/view/AdminPage/showToucan/ToucanLine.js b/front/src/view/AdminPage/showToucan/ToucanLine.js
deleted file mode 100644
index 6e6d038..0000000
--- a/front/src/view/AdminPage/showToucan/ToucanLine.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {Component} from 'react'
-import {Table, Image, Button} from 'semantic-ui-react'
-import ModalSuppression from './ModalSuppression'
-import env from '../../../.env'
-
-class ToucanLine extends Component {
- constructor(props) {
- super(props)
- this.state = {isModalOpen: false}
- this.closeModal = this.closeModal.bind(this)
- }
-
- closeModal() {
- this.setState({ isModalOpen: false })
- }
-
- render(){
- return (
- <Table.Row>
- <Table.Cell >
- <a href={`${env.backURL}/toucan/pdf/${this.props.toucan["_id"]}.pdf`}>
- <Image
- src={`${env.backURL}/toucan/img/${this.props.toucan["_id"]}`}
- size="small"
- />
- </a>
- </Table.Cell>
- <Table.Cell >
- {this.props.toucan.title}
- </Table.Cell>
- <Table.Cell >
- {(new Date(this.props.toucan.date).toLocaleDateString())}
- </Table.Cell>
- <Table.Cell style={{width:"fit-content"}}>
- <Button negative icon="cancel" onClick={() => this.setState({isModalOpen: true})}/>
- <ModalSuppression
- open={this.state.isModalOpen}
- toucanId={this.props.toucan["_id"]}
- closeModal={this.closeModal}
- />
- </Table.Cell>
- </Table.Row>
- )
- }
-}
-
-export default ToucanLine
\ No newline at end of file
diff --git a/front/src/view/AdminPage/showToucan/ToucanTable.js b/front/src/view/AdminPage/showToucan/ToucanTable.js
deleted file mode 100644
index 24ff85a..0000000
--- a/front/src/view/AdminPage/showToucan/ToucanTable.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {Component} from 'react'
-import {Table} from 'semantic-ui-react'
-import ToucanLine from './ToucanLine'
-import env from '../../../.env'
-
-class ToucanTable extends Component{
- constructor(){
- super();
- this.state = {
- toucans: [],
- }
- }
-
- componentDidMount(){
- fetch(`${env.backURL}/toucan/toucans`)
- .then(result => {
- return result.json()
- })
- .then(toucans => {
- this.setState({toucans})
- })
- .catch(err => console.log(err))
- }
-
- render() {
- return(
- <Table style={{margin:"auto"}} celled padded collapsing size="small" textAlign="center">
- <Table.Header>
- <Table.Row>
- <Table.HeaderCell>Cover</Table.HeaderCell>
- <Table.HeaderCell>Thème</Table.HeaderCell>
- <Table.HeaderCell>Date</Table.HeaderCell>
- <Table.HeaderCell>Supprimer</Table.HeaderCell>
- </Table.Row>
- </Table.Header>
- {this.state.toucans.map(toucan => {
- return <ToucanLine key={toucan["_id"]} toucan={toucan}/>
- })}
- </Table>
- )
- }
-}
-
-export default ToucanTable
\ No newline at end of file
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index 0fd0ba5..3f3de7f 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -41,26 +41,20 @@ class AllToucan extends Component {
render(){
return (
<Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
+
<SelectYear
+ style={{marginBottom:"2em"}}
beginYear={beginYear}
updateFrame = {this.updateFrame.bind(this)}
/>
- {/* <Dropdown
- selection
- placeholder="value"
- options = {years}
- defaultValue = {beginYear}
- onChange = {(_,props) => this.setState({
- before : (new Date(props.value+1,7,31)).getTime(),
- after : (new Date(props.value,8,1)).getTime()
- }, () => this.updateToucan())}
- /> */}
<Card.Group centered >
{this.state.toucans.map( toucan => {
return <ToucanCard
image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
link={`${env.backURL}/toucan/pdf/${toucan["_id"]}.pdf`}
header={toucan.title}
+ toucanId={toucan._id}
+ isAdmin={this.props.isAdmin}
date={(new Date(toucan.date).toLocaleDateString())}
key={toucan._id}
/>
diff --git a/front/src/view/AllToucanPage/ToucanCard.js b/front/src/view/AllToucanPage/ToucanCard.js
index d13d80e..a4422c3 100644
--- a/front/src/view/AllToucanPage/ToucanCard.js
+++ b/front/src/view/AllToucanPage/ToucanCard.js
@@ -1,18 +1,38 @@
-import React from 'react'
-import {Card, Image} from 'semantic-ui-react'
+import React, {useState} from 'react'
+import {Card, Image, Button} from 'semantic-ui-react'
+import ModalSuppression from './../../utils//ModalSuppression'
const ToucanCard = ({...props}) => {
+ const [isModalOpen, setIsModalOpen] = useState(false)
+ let supressModal,suppressButton = undefined
+
+ if (props.isAdmin){
+ supressModal = <ModalSuppression
+ open= {isModalOpen}
+ toucanId={props.toucanId}
+ closeModal={()=> {setIsModalOpen(!isModalOpen); console.log(props.toucanId)}} />
+
+ suppressButton = <Button
+ style={{position:"absolute",left:"5px",top:"5px"}}
+ negative
+ icon="cancel"
+ onClick={(e) => {e.preventDefault(); setIsModalOpen(!isModalOpen)}}/>
+ }
+
return (
<Card
- href={props.link}
link
style={{margin:"1em"}}
>
- <Card.Content>
- <Card.Header content={props.header}/>
+ <Card.Content href={props.link} >
+ <Card.Header>
+ {suppressButton}
+ {props.header}
+ </Card.Header>
<Card.Meta content={props.date} textAlign="right"/>
</Card.Content>
- <Image src={props.image}/>
+ <Image href={props.link} src={props.image}/>
+ {supressModal}
</Card>
)
}
diff --git a/front/src/view/PageHeader.js b/front/src/view/PageHeader.js
index 6e5c4d0..fdb525e 100644
--- a/front/src/view/PageHeader.js
+++ b/front/src/view/PageHeader.js
@@ -1,19 +1,23 @@
import React from 'react';
import {Image, Button} from 'semantic-ui-react'
+import LogoutButton from '../utils/LogoutButton'
import {Link} from 'react-router-dom'
import logo from '../image/logo.png'
-const PageHeader = () => {
+const PageHeader = (props) => {
return (
[
// Si le format est celui d'un Pc
- <div class="desktopItem" style={{textAlign:"center"}}>
+ <div class="desktopItem" style={{textAlign:"center"}}> {console.log(props.isLogged)}
<Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
- <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
- <Button icon="male" content="Espace admin"/>
- </Link>
+ {props.isLogged ? <LogoutButton style={{position:"absolute",top:'2em' ,right:"2em"}}/>:
+ <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
+ <Button icon="male" content="Espace admin"/>
+ </Link>
+
+ }
</div>,
// Si le format est celui d'un téléphone
<div class="phoneItem" style={{textAlign:"center"}}>
--
GitLab