Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

switch to using react hooks and functional components #17

Merged
merged 2 commits into from
Dec 19, 2019
Merged

switch to using react hooks and functional components #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e8f170
switch to using react hooks and functional components
butlerx Dec 15, 2019
764f9da
ensure an element is always returned from imageGrid
butlerx Dec 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,567 changes: 2,186 additions & 1,381 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
"dependencies": {
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-images-viewer": "^1.6.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
"react-scripts": "^3.3.0"
},
"scripts": {
"start": "react-scripts start",
Expand Down
Binary file added public/glitch_brick.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 110 additions & 94 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,130 @@
import React from 'react';
import './core.css';
import Navbar from './Components/navbar';
import Home from './Components/home';
import Status from './Components/status';
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import About from './Components/about';
import Page from './Components/page';
import Committee from './Components/committee';
import Constitution from './Components/constitution';
import Regulations from './Components/regulations';
import societyPage from './Components/About/thesociety'
import contactPage from './Components/About/contact'
import Services from './Components/services';
import Help from './Components/help';
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import Navbar from './components/navbar';
import Home from './components/home';
import Status from './components/status';
import About from './components/about';
import Page from './components/page';
import Committee from './components/committee';
import Constitution from './components/constitution';
import Regulations from './components/regulations';
import Services from './components/services';
import Help from './components/help';
import Error from './components/error';

class App extends React.Component {
constructor(){
super()
this.state = {
events: [],
pastEvents: [],
slides: [],
committee: [],
images: [],
}
this.dataURL = "https://fraz.redbrick.dcu.ie/data.json"
fetch(this.dataURL).then((resp) => {
resp.json().then((js) => {
let data = js
console.log(data)
this.setState({
events: data[0],
pastEvents: data[1],
committee: data[2],
slides: data[3],
images: data[4],
})
})
})
}
import societyPage from './content/theSociety';
import contactPage from './content/contact';

render(){
import { shuffle } from './utils/shuffle';
import './core.css';

const getRandomImages = (amount) => {
let max = this.state.images.length
if (amount >= max)
return this.state.images
let possibilites = Object.assign(this.state.images)
while (possibilites.length > amount)
{
let val = Math.floor(Math.random() * possibilites.length)
possibilites.splice(val, 1)
}
return possibilites
}
const getRandomImages = (images, amount) =>
amount >= images.length ? images : shuffle(images).slice(0, amount);

export default function App() {
const [events, setEvents] = useState([]);
const [pastEvents, setPastEvents] = useState([]);
const [slides, setSlides] = useState([]);
const [committee, setCommittee] = useState([]);
const [images, setImages] = useState([]);
const dataURL = 'https://fraz.redbrick.dcu.ie/data.json';
useEffect(() => {
fetch(dataURL)
.then(resp => resp.json())
.then(data => {
setEvents(data[0]);
setPastEvents(data[1]);
setCommittee(data[2]);
setSlides(data[3]);
setImages(data[4]);
});
}, [dataURL]);

const images = getRandomImages(18)
return (
<Router>
<div className="Core">
{console.log(this.state)}

<Navbar />
<div className="Right">
<Status />
<Switch>
<div className="Core">
<Navbar />
<div className="Right">
<Status />
<Switch>
<Route exact path="/">
<Home images={images} pastEvents={this.state.pastEvents} slides={this.state.slides} events={this.state.events} isEventsPage={false} />
<Home
images={getRandomImages(images, 18)}
pastEvents={pastEvents}
slides={slides}
events={events}
isEventsPage={false}
/>
</Route>
<Route path="/Events">
<Home events={this.state.events} pastEvents={this.state.pastEvents} slides={this.state.slides} isEventsPage={true} />
<Route path="/events">
<Home events={events} pastEvents={pastEvents} slides={slides} isEventsPage={true} />
</Route>
<Route exact path="/About">
<Route exact path="/about">
<About />
</Route>
<Route path="/About/The-Society">
<Page page={societyPage}/>
</Route>
<Route path="/About/Committee">
<Committee year={"2019/20"} cmtmembers={this.state.committee} />
</Route>
<Route path="/About/Constitution">
<Constitution />
</Route>
<Route path="/About/Contact">
<Page page={contactPage} />
</Route>
<Route path="/About/Regulations">
<Regulations />
</Route>
<Route path="/Help">
<Route path="/about/society">
<Page page={societyPage} />
</Route>
<Route path="/about/committee">
<Committee year="2019/20" members={committee} />
</Route>
<Route path="/about/constitution">
<Constitution />
</Route>
<Route path="/about/contact">
<Page page={contactPage} />
</Route>
<Route path="/about/regulations">
<Regulations />
</Route>
<Route path="/help">
<Help />
</Route>
<Route path="/Services">
<Route path="/services">
<Services />
</Route>
<Route path="/401">
<Error code="401" message="Permission Denied">
You do not have permission to access this section. If you think this is an error
please contact the{' '}
<a style={{ color: 'crimson' }} href="mailto:[email protected]">
webmaster
</a>
</Error>
</Route>
<Route path="/403">
<Error code="403" message="Forbidden">
Access to this section Forbidden.
</Error>
</Route>
<Route path="/500">
<Error code="500" message="Internal Server Error">
An Unexpected Error has occured. Please try again or contact the{' '}
<a style={{ color: 'crimson' }} href="mailto:[email protected]">
webmaster
</a>{' '}
with details.
</Error>
</Route>
<Route path="/503">
<Error code="503" message="Service Unavailable">
The server cannot handle the request because it is overloaded or down for
maintenance.
</Error>
</Route>
<Route>
<h1 style={{marginLeft: "2em"}}>404 - Page not found :(</h1>
<h2 style={{marginLeft: "3em"}}>If you think this is shouldn't be happening... email <a style={{color: "crimson" }}href="mailto:[email protected]">me</a></h2>
</Route>
</Switch>
<Error code="404" message="Page not Found">
The Page you are looking for could not be found. If you think this is an error
please contact the{' '}
<a style={{ color: 'crimson' }} href="mailto:[email protected]">
webmaster
</a>
</Error>
</Route>
</Switch>
</div>
</div>
</div>
</Router>
);
}
}

export default App;
Loading