material ui

unlisten when component unmounts
read from firebase
2019-11-09 04:50:32 -08:00 · 2019-10-25 15:31:15 -04:00 · 2019-10-25 14:54:02 -04:00 · 2019-10-25 13:46:11 -04:00 · 2019-10-25 13:07:41 -04:00 · 2019-10-25 13:03:31 -04:00
17 changed files with 1240 additions and 337 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
 registry=https://registry.npmjs.org 
--- a/package.json
+++ b/package.json
@@ -3,13 +3,16 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.6.0",
    "firebase": "^7.2.2",
    "node-sass": "^4.13.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-redux": "^7.1.1",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,12 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
    name="viewport"
    content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
  />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <meta
      name="description"
      content="Web site created using create-react-app"
--- a/src/App.css
+++ b/src/App.css
@@ -1,22 +0,0 @@
 .App {
  text-align: center;
 }
 .App-logo {
  height: 40vmin;
 }
 .App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
 }
 .App-link {
  color: #09d3ac;
 }
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,59 @@
 import React from "react";
 import { Provider } from "react-redux";
 import Boxes from "./boxes/Boxes";
 import styles from "./App.module.css";
 import {
  Grid,
  Paper,
  Container,
  Card,
  CardContent,
  Typography,
  CardActions,
  Button,
  AppBar,
  Toolbar,
  IconButton,
  Menu
 } from "@material-ui/core";
 import setupStore from "./store/setupStore.js";
 import CssBaseline from "@material-ui/core/CssBaseline";
 function App() {
  return (
    <CssBaseline>
      <Provider store={setupStore()}>
-      <div>Yoooooo</div>
+        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6">
              Retro.d
            </Typography>
          </Toolbar>
        </AppBar>
        <Container fluid>
          <Grid fluid container spacing={3}>
            <Grid item xs={4}>
              <Card>xs=3</Card>
            </Grid>
            <Grid item xs={4}>
              <Card>xs=3</Card>
            </Grid>
            <Grid item xs={4}>
              <Card>
                <CardContent>
                  <Typography component="p">
                    well meaning and kindly.
                  </Typography>
                  <CardActions>
                    <Button size="small">Dismiss</Button>
                  </CardActions>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Container>
      </Provider>
    </CssBaseline>
  );
 }
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -0,0 +1,14 @@
 .grid{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1em;
  margin: 1rem;
 }
 .column {
 }
 /* .cssBaseline {
  padding: 0;
 } */
--- a/src/Items/Items.js
+++ b/src/Items/Items.js
@@ -0,0 +1,9 @@
 import React from 'react';
 export default function Item({ item }) {
  return (
    <div style={{ textDecoration: item.completed ? "line-through" : "" }}>
      {item.title}
    </div>
  )
 }
--- a/src/NewItem/NewItem.js
+++ b/src/NewItem/NewItem.js
@@ -0,0 +1,23 @@
 import React, {useState} from 'react';
 export default function NewItem({ addItem }) {
  const [value, setValue ] = useState("");
  const handleSubmit = e => {
    e.preventDefault();
    if(!value) return;
    addItem(value);
    setValue("");
  }
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        placeholder="stuff"
        onChange={e => setValue(e.target.value)}
        />
    </form>
  )
 }
--- a/src/boxes/Boxes.js
+++ b/src/boxes/Boxes.js
@@ -0,0 +1,14 @@
 import React from 'react';
 import styles from './Boxes.module.css'
 import Cards from '../cards/Cards.js'
 export default function Boxes({ sectionName }) {
  return (
    <div>
      <h3>{sectionName}</h3>
      <div className={styles.box}>
        <Cards />
      </div>
    </div>
  )
 }
--- a/src/boxes/Boxes.module.css
+++ b/src/boxes/Boxes.module.css
@@ -0,0 +1,3 @@
 .box{
  border: .15rem solid black;
 }
--- a/src/cards/Cards.js
+++ b/src/cards/Cards.js
@@ -0,0 +1,56 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { databaseRef } from '../store/firebase.js'
 import Item from '../Items/Items.js';
 import NewItem from '../NewItem/NewItem.js'
 import uuid from "uuid";
 export function Cards({item, setItem}) {
        const addItem = title => {
          const newItem = [...item, {title, completed: false, id: uuid.v4()}];
          setItem(newItem)
        }
        const deleteItem = id => {
          const deleted = item.reduce((acc, current) => {
            if(current.id !== id){
              return [...acc, current];
            }
            return [...acc, {...current, completed: true}]
          }, [])
          setItem(deleted)
        }
        return (
          <>
            {item.map((i, index) => (
                            <div key={i.id}>
                              <Item
                                  item={i}
                                  index={index}
                              />
                                <button onClick={() => deleteItem(i.id) }>x</button>
                            </div>
                        ))}
            <NewItem addItem={addItem} />
          </>
        )
      }
 export default function FirebaseWrapper() {
  const [cards, setCards] = useState(null)
  const retroRef = useMemo(() => databaseRef.ref('retros/1'), []);
  useEffect(() => {
    retroRef.on('value', function(snapshot) {
      const values = Object.values(snapshot.val())
      setCards(values)
    });
    // this will be called when our component unmounts
    return () => {
      retroRef.off();
    }
  }, [retroRef]);
  if(!cards) {
    return <div>loading...</div>;
  };
  return <Cards item={cards} setItem={()=> {}}/>
 }
--- a/src/cards/Cards.module.scss
+++ b/src/cards/Cards.module.scss
--- a/src/deleteItem/DeleteItem.js
+++ b/src/deleteItem/DeleteItem.js
@@ -0,0 +1,12 @@
 import React, {useState} from 'react';
 export default function DeleteItem({ deleteItem }) {
  const handleClick = e => {
    deleteItem(value);
    setValue("");
  }
  return (
    <button onClick={handleClick}>x</button>
  )
 }
--- a/src/hooks/useFirebase.js
+++ b/src/hooks/useFirebase.js
@@ -0,0 +1,17 @@
 import { useState, useEffect, useMemo } from 'react';
 import { databaseRef } from '../store/firebase.js'
 export default function useFirebase(pathRef) {
    const [data, setData] = useState(null)
    const retroRef = useMemo(() => databaseRef.ref(pathRef), [pathRef]);
    useEffect(() => {
      retroRef.on('value', function(snapshot) {
        const values = Object.values(snapshot.val())
        setData(values)
      });
      // this will be called when our component unmounts
      return () => {
        retroRef.off();
      }
    }, [retroRef]);
    return [data]
 }
--- a/src/store/firebase.js
+++ b/src/store/firebase.js
@@ -0,0 +1,7 @@
 import * as firebase from 'firebase';const config = {
  apiKey: "AIzaSyC5krz4RBiT87RK7cEidh3n-A4H63uGcyM",
  authDomain: "retrod-7e2cd.firebaseapp.com",
  databaseURL: "https://retrod-7e2cd.firebaseio.com/",
 }
 firebase.initializeApp(config);
 export const databaseRef = firebase.database();
--- a/src/store/setupStore.js
+++ b/src/store/setupStore.js
@@ -1,13 +1,14 @@
 import { createStore, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 import rootReducer from "../reducers/main.js";
 const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
 export default function setupStore() {
  return createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk),
-        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+        (devTools || function(f) { return f; })
    )
  );
 }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Tommy Parnell	42cdf6c788	material ui	2019-11-09 04:50:32 -08:00
tparnell	de22b649a2	unlisten when component unmounts	2019-10-25 15:31:15 -04:00
Harmony	7bc236e7e7	read from firebase	2019-10-25 14:54:02 -04:00
Harmony	db72085762	delete items	2019-10-25 13:46:11 -04:00
Harmony	406a89db39	handle when no one has redux devtools	2019-10-25 13:07:41 -04:00
tparnell	3f01282bcc	redux should work	2019-10-25 13:03:31 -04:00
Harmony	998cf45a97	it works	2019-10-25 12:55:56 -04:00
Harmony	c474fe3792	merge card UI	2019-10-25 12:54:35 -04:00
Harmony	64a9420b01	stop	2019-10-25 12:53:46 -04:00
Harmony	90d633ed23	merging master	2019-10-25 12:46:30 -04:00
Harmony	5d3c81a650	Box set up	2019-10-25 10:59:41 -04:00