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 (
-    <Provider store={setupStore()}>
-      <div>Yoooooo</div>
-    </Provider>
+    <CssBaseline>
+      <Provider store={setupStore()}>
+        <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