Refactor front

front/src/App.js

@@ -9,12 +9,13 @@ import env from './.env';
 import isLogged from './utils/Oauth';
 
 function App() {
+	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>
   );
 }

front/src/view/AdminPage/showToucan/ModalSuppression.js → front/src/utils/ModalSuppression.js

 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:''};

front/src/utils/yearSelector.js

@@ -16,6 +16,8 @@ function SelectYear(props) {
 		});
 	}
 	return(
+		<div style={props.style}>
+			<span style={{marginRight:'1em'}}>Année de parution :</span> 
 			<Dropdown
 			selection
 			placeholder="value"
@@ -23,6 +25,7 @@ function SelectYear(props) {
 			defaultValue = {props.beginYear}
 			onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
 			/>
+		</div>
 	)
 }
 

front/src/view/AdminPage/AdminPage.js

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

front/src/view/AdminPage/showToucan/ToucanLine.js

-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

front/src/view/AdminPage/showToucan/ToucanTable.js

-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

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

front/src/view/AllToucanPage/ToucanCard.js

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

front/src/view/PageHeader.js

 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%'}} />
+				{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"}}>