switching between sprints

src/App.js

@@ -13,7 +13,7 @@ const config = {
 };
 const uiConfig = {
   signInFlow: 'popup',
-  signInSuccessUrl: '/signedIn',
+  signInSuccessUrl: '/',
   signInOptions: [
     firebase.auth.GoogleAuthProvider.PROVIDER_ID,
   ]

src/Items/items.module.css

@@ -8,6 +8,7 @@ button{
 }
 .checkmark{
   color: green;
+  cursor: pointer;
 }
 .redx{
   color: red;

src/NewItem/NewItem.js

@@ -4,7 +4,6 @@ import uuid from "uuid";
 
 export default function NewItem({ addItem, boxId, sprint }) {
   const [value, setValue ] = useState("");
-console.log(sprint);
   const handleSubmit = e => {
     e.preventDefault();
     let retroRef;
@@ -28,7 +27,6 @@ console.log(sprint);
       title: value,
     }
     let objectId = retroRef.push(item);
-    console.log(objectId.key);
     databaseRef.ref(url + `/` + objectId.key + `/id`).set(objectId.key)
     setValue("")
   }

src/SignedIn/SignedIn.js

@@ -1,11 +1,9 @@
-import React, { useState } from "react";
+import React from "react";
-import firebase from'firebase'
+import firebase from'firebase';
-import { Link } from "@reach/router";
+import SprintSelect from "../sprintSelect/SprintSelect"
-import Boxes from "../boxes/Boxes";
 import styles from "./signedIn.module.css";
 
 export default function SignedIn() {
-  const [sprint, setSprint] = useState(1);
   return (
     <div>
       <div className={styles.alignRight}>
@@ -17,16 +15,7 @@ export default function SignedIn() {
           <button className={styles.signOutButton} onClick={() => firebase.auth().signOut()}>Sign Out</button>
         </div>
       </div>
-      <nav>
+      <SprintSelect />
-      <Link onClick={() => setSprint(sprint + 1)} to={`/` + sprint}>Sprint (+))</Link>
-      {console.log(sprint)}
-      </nav>
-      <h3>Sprint {sprint}</h3>
-        <div className={styles.grid}>
-          <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'}/>
-          <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
-          <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
-        </div>
     </div>
   )
 }

src/SignedIn/signedIn.module.css

@@ -1,12 +1,6 @@
 body{
   background: lightseagreen;
 }
-.grid{
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-column-gap: 1em;
-  margin: 1rem;
-}
 .alignRight{
   width: 100%;
   display: flex;

src/boxes/Boxes.js

@@ -6,7 +6,7 @@ export default function Boxes({ sectionName, boxId, sprint }) {
   return (
     <div>
       <div className={styles.box}>
-        <Cards sectionName={sectionName} boxId={boxId} sprint={sprint}/>
+        <Cards sectionName={sectionName} boxId={boxId} sprint={sprint} />
       </div>
     </div>
   )

src/cards/Cards.js

@@ -5,12 +5,12 @@ import NewItem from '../NewItem/NewItem.js'
 import DeleteItem from '../deleteItem/DeleteItem.js'
 import styles from "./cards.module.css";
 
-export function Cards({item, setItem, boxId, sprint, sectionName}) {
+export function Cards({item, setItem, boxId, sprint, sectionName, sprint_id}) {
   return (
     <>
     <h3>{sectionName}</h3>
       {item.map((i, index) => (
-                      <div className={styles.cardBackground} key={i.id}>
+                      <div className={i.sprint_id === sprint ? styles.cardBackground : styles.hide} key={i.id}>
                         <Item
                             item={i}
                             index={index}

src/cards/cards.module.css

@@ -3,3 +3,6 @@
   margin: .5em;
   padding: 1em;
 }
+.hide{
+  display: none;
+}

src/deleteItem/deleteItem.module.css

@@ -6,4 +6,5 @@
   font-size: .5em;
   font-weight: bolder;
   letter-spacing: 1px;
+  cursor: pointer;
 }

src/sprintSelect/SprintSelect.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import Boxes from "../boxes/Boxes";
+import { databaseRef } from '../store/firebase.js'
+import styles from "../sprintSelect/sprintSelect.module.css";
+
+export function SprintSelect({item}) {
+  const [sprint, setSprint] = useState(1);
+  let sprintArray = [];
+  let sortedSprint;
+  sortedSprint = item.map((i, index) => (
+          sprintArray.push(i.sprint_id)
+        ))
+        .reduce((unique, item) => {
+          return unique.includes(item) ? unique : [...unique, item]
+        }, [])
+        .sort();
+  let dropdownSprint;
+  dropdownSprint = sortedSprint.map((i, index) => (
+          <option onClick={() => setSprint(i)}>{i}</option>
+        ));
+  return (
+    <div>
+      <label>Choose Sprint:</label>
+      <select>
+      {dropdownSprint}
+      </select>
+      <h3>Sprint {sprint}</h3>
+        <div className={styles.grid}>
+          <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'} />
+          <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
+          <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
+        </div>
+    </div>
+  )
+}
+
+export default function FirebaseWrapper() {
+  const [cards, setCards] = useState(null)
+  let retro = databaseRef.ref(`retros/1/www`);
+  const retroRef = useMemo(() => databaseRef.ref(retro), []);
+  useEffect(() => {
+    retroRef.on('value', function(snapshot) {
+      const values = Object.values(snapshot.val())
+      setCards(values)
+    });
+    return () => {
+      retroRef.off();
+    }
+  }, [retroRef]);
+  if(!cards) {
+    return <div>loading...</div>;
+  };
+  return <SprintSelect item={cards} setItem={()=> {}}/>
+}

src/sprintSelect/sprintSelect.module.css

@@ -0,0 +1,6 @@
+.grid{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 1em;
+  margin: 1rem;
+}