Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import firebase from 'firebase';
- import Modal from './components/Modal';
- import Card from './components/Card';
- const config = {
- apiKey: "AIzaSyDn_AeL8sGgUfxMwZ7cVWNKLYI_fSfmYRE",
- authDomain: "arczi-14a47.firebaseapp.com",
- databaseURL: "https://arczi-14a47.firebaseio.com",
- projectId: "arczi-14a47",
- storageBucket: "arczi-14a47.appspot.com",
- messagingSenderId: "951789644139"
- };
- const database = firebase.initializeApp(config);
- const firestore = database.firestore();
- const styles = {
- background: {
- 'position': 'fixed',
- 'width': '100%',
- 'height': '100vh',
- 'background': 'url("https://uc177927c710a1bcf482878a828a.previews.dropboxusercontent.com/p/thumb/AAUG0pUF8JhHEEX_m90uSqYIc-NmxTsu5kaZl6Z8Qcbn6aUQljG_F9YJz0-kQJhAZp4ZhtjD5cc8narC2oTUwTYGe4gV9Nl90lViSVgPGPLmFNsvGcwbeLfCfwuV6mEjAqOv4vE_jLk0_jpxV3A_ZfyK1KsEK2K8JsvkwSzNdOswLtcNR5bqtHQa0ULSIgSsjEjhqr9utKZ5TxvtYGMTQDHcOV8VULAcN3iY6SNugP9QaE15SkYBBrZpenGgXzcjRRetBxqZrqzyw9dKyyvonARV/p.jpeg?size=2048x1536&size_mode=3")',
- 'zIndex': '-1'
- },
- body: {
- 'fontFamily': 'Roboto, sans-serif'
- },
- menu: {
- 'backgroundColor': '#8e352e',
- 'color': 'white',
- }
- };
- class App extends Component {
- state = {
- loaded: false,
- czwartek: [],
- piatek: [],
- sobota: [],
- niedziela: []
- };
- sortFunction = (a, b) => {
- if (parseInt(a.godzina_start) - parseInt(b.godzina_start)) {
- return parseInt(a.godzina_start) - parseInt(b.godzina_start);
- } else return parseInt(a.minuta_start) - parseInt(b.minuta_start)
- };
- sort = () => {
- this.setState({
- czwartek: this.state.czwartek.sort(this.sortFunction),
- piatek: this.state.piatek.sort(this.sortFunction),
- sobota: this.state.sobota.sort(this.sortFunction),
- niedziela: this.state.niedziela.sort(this.sortFunction)
- })
- };
- componentDidMount() {
- Promise.all([this.getSnapshot('czwartek'), this.getSnapshot('piatek'), this.getSnapshot('sobota'), this.getSnapshot('niedziela')])
- .then(this.sort);
- }
- getSnapshot = (day) => new Promise(resolve => {
- firestore.collection(day).get()
- .then(snapshot => {
- snapshot.forEach(doc => this.setState({
- [day]: [...this.state[day], {
- id: doc.id,
- ...doc.data()
- }]
- }));
- resolve();
- });
- });
- generateEvents = day => ( this.state[day].length > 0 &&
- this.state[day].map(el => <React.Fragment key={el.id}>
- <Card
- database={firestore}
- removeEvent={this.removeEvent}
- id={el.id}
- day={day}
- opis={el.opis}
- kolor={el.kolor}
- godzina_start={el.godzina_start}
- godzina_koniec={el.godzina_koniec}
- minuta_start={el.minuta_start}
- minuta_koniec={el.minuta_koniec}
- />
- <br/>
- </React.Fragment>)
- );
- newEvent = (day, event) => this.setState({ [day]: [...this.state[day], event] });
- removeEvent = (day, id) => this.setState({ [day]: this.state[day].filter(event => event.id !== id)});
- render() {
- return (
- <>
- <div className="background" style={styles.background}/>
- <div className={'container-fluid'} style={styles.body}>
- <div className="row">
- <div className="col-12 my-4 text-center">
- <h1 style={{'color': 'white'}}>
- ZIMOWISKO KUGLARSKIE VOL.3
-
- <Modal buttonLabel={"DODAJ"} database={firestore} newEvent={this.newEvent}/>
- </h1>
- </div>
- </div>
- <div className="row py-2" style={styles.menu}>
- <div className="col-3 text-center">CZWARTEK</div>
- <div className="col-3 text-center">PIĄTEK</div>
- <div className="col-3 text-center">SOBOTA</div>
- <div className="col-3 text-center">NIEDZIELA</div>
- </div>
- <div className="row mt-4" style={{'background': 'url("")'}}>
- <div className="col-3">
- { this.generateEvents('czwartek') }
- </div>
- <div className="col-3">
- { this.generateEvents('piatek') }
- </div>
- <div className="col-3">
- { this.generateEvents('sobota') }
- </div>
- <div className="col-3">
- { this.generateEvents('niedziela') }
- </div>
- </div>
- </div>
- </>
- );
- }
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement