Skip to content

GitLab

Commit 409f049f authored by Damien Armillon's avatar Damien Armillon
Browse files

Refactor front

parent cef6fe15
Hide whitespace changes
Inline Side-by-side
front/src/App.js
View file @ 409f049f
......@@ -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>
);
}
......
front/src/view/AdminPage/showToucan/ModalSuppression.js → front/src/utils/ModalSuppression.js
View file @ 409f049f
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
View file @ 409f049f
......@@ -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>
)
}
......
front/src/view/AdminPage/AdminPage.js
View file @ 409f049f
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 deleted 100644 → 0
View file @ cef6fe15
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 deleted 100644 → 0
View file @ cef6fe15
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
View file @ 409f049f
......@@ -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
View file @ 409f049f
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
View file @ 409f049f
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"}}>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment