Week 5 solution: Add visibility and owner attributes to decks

Author: lonerz

.firebase/hosting.YnVpbGQ.cache

@@ -1,18 +1,18 @@
-asset-manifest.json,1593234178590,87c5078d84609a79373eae345b5be0dcbce16a10596d320b64fb55a7442310b5
-favicon.ico,1593234166094,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
-precache-manifest.57e88b941908e43f629a3c94be8a5ec4.js,1593234178590,f1cc40fe71b8eb50de615204918d3a8d2286e8561fdaebc558c9bbf575e6ab28
-index.html,1593234178590,4337e9ec08dd03b67a60b3f53d93960e0b50e44f58c6a2a07000cdca499480b5
-manifest.json,1593234166096,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-service-worker.js,1593234178590,1d4bddc2c6a315132e526f16a88cd9dfbf964ca98ac5e41f5ac52a19e013f4ba
-logo192.png,1593234166095,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-static/css/main.219eee2c.chunk.css,1593234178605,4347d08e217c04e1f5a2110d045f52f58aa98534ad519689d983249e1ab37a30
-static/css/main.219eee2c.chunk.css.map,1593234178604,8f0150377877b448bd8a7e1a28909ab9d2f9a1593fd8f74c67b49fcd4797bfb7
-static/js/2.4ba42089.chunk.js.LICENSE.txt,1593234178605,dd9d1b9bec559794681f77c3fdb43c6a7fb0be8ba26a7a1fca5f74b37e053554
-static/js/main.f69f2b0d.chunk.js,1593234178592,4f457c5ea344bb41cdf3066dab0895b1f5e90bbad4097374af6585ce97e30a9d
-static/js/runtime-main.7b067255.js,1593234178606,355ee36cff83c79265fa718c00e443e093fc34dd415f6d7399ba8d62ccb6f7d4
-static/js/main.f69f2b0d.chunk.js.map,1593234178606,b8f8030a276f8301f07e7ac71b31aac7e63b0f20106733dba7072fdb4ef618f9
-robots.txt,1593234166097,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-static/js/runtime-main.7b067255.js.map,1593234178606,4c037c810ae89acd48c2cc8145d8ecff3599efcc4e218f9c6a55b4ef3338510b
-logo512.png,1593234166096,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-static/js/2.4ba42089.chunk.js,1593234178606,3b0d9c2055c130ddb0b1a31969db147fb3839d11b058ce2e0e773b423cff4f97
-static/js/2.4ba42089.chunk.js.map,1593234178606,8fc7032a8595c5aab60d6d6f027f4a669897ecaf77cef2c138753681ffb8144c
+asset-manifest.json,1593934070074,72c53b4eaa18450ab570eb2785e51d7df5945180fd323ff15bf682cc2c64a62c
+index.html,1593934070073,d3db21928ffa7083498e972df191e487d1d0726a7eca151a9cbb54c5c10be167
+precache-manifest.e69a86ae19e3e961f34085d296792d3a.js,1593934070073,54bcde214d2a2bc9df9910298360a5471f4c1fcf11a18b101a12e37ec0cb05e1
+favicon.ico,1593934054050,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
+service-worker.js,1593934070073,15e89014f1f8a38465a8bba7daaf66403ec279e531d0a1a316f4dcae9287cd9b
+static/css/main.219eee2c.chunk.css,1593934070074,4347d08e217c04e1f5a2110d045f52f58aa98534ad519689d983249e1ab37a30
+logo192.png,1593934054051,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+static/css/main.219eee2c.chunk.css.map,1593934070090,8f0150377877b448bd8a7e1a28909ab9d2f9a1593fd8f74c67b49fcd4797bfb7
+static/js/2.6d38b086.chunk.js.LICENSE.txt,1593934070074,dd9d1b9bec559794681f77c3fdb43c6a7fb0be8ba26a7a1fca5f74b37e053554
+static/js/main.62dd6f74.chunk.js,1593934070090,3abffb96ead57eaaa7d6ea9ab0d5168ddeeec8a77f1f3d4d5d1e04b66b0b1f64
+static/js/runtime-main.7b067255.js,1593934070090,355ee36cff83c79265fa718c00e443e093fc34dd415f6d7399ba8d62ccb6f7d4
+logo512.png,1593934054052,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+static/js/runtime-main.7b067255.js.map,1593934070090,4c037c810ae89acd48c2cc8145d8ecff3599efcc4e218f9c6a55b4ef3338510b
+manifest.json,1593934054053,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+robots.txt,1593934054054,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+static/js/main.62dd6f74.chunk.js.map,1593934070090,444e33da47b7a98b6bf3f179e465c91fc9d4745f66a406cff7df6179d8db440c
+static/js/2.6d38b086.chunk.js,1593934070090,685eea2fd3d98914b9a8c96c6dde395e2d1f80ee82b70186a509928f5cd611bc
+static/js/2.6d38b086.chunk.js.map,1593934070091,73f1510781c301b06760ac669c0958d7d29c06ae56621b7ef3f86bf975b9e1af

src/CardEditor.js

@@ -17,6 +17,7 @@ class CardEditor extends React.Component {
       front: '',
       back: '',
       name: '',
+      private: false,
     };
   }
 
@@ -40,12 +41,24 @@ class CardEditor extends React.Component {
   handleChange = event =>
     this.setState({ [event.target.name]: event.target.value });
 
+  handleCheckboxChange = event =>
+    this.setState({ [event.target.name]: event.target.checked });
+
   createDeck = () => {
     const deckId = this.props.firebase.push('/flashcards').key;
     const updates = {};
-    const newDeck = { cards: this.state.cards, name: this.state.name };
+    const newDeck = {
+      cards: this.state.cards,
+      name: this.state.name,
+      owner: this.props.isLoggedIn,
+      visibility: this.state.private ? 'private' : 'public',
+    };
     updates[`/flashcards/${deckId}`] = newDeck;
-    updates[`/homepage/${deckId}`] = { name: this.state.name };
+    updates[`/homepage/${deckId}`] = {
+      name: this.state.name,
+      owner: this.props.isLoggedIn,
+      visibility: this.state.private ? 'private' : 'public',
+    };
     const onComplete = () => this.props.history.push(`/viewer/${deckId}`);
     this.props.firebase.update('/', updates, onComplete);
   };
@@ -105,6 +118,16 @@ class CardEditor extends React.Component {
         />
         <button onClick={this.addCard}>Add card</button>
         <hr />
+        <div>
+          Make this deck private{' '}
+          <input
+            name="private"
+            onChange={this.handleCheckboxChange}
+            type="checkbox"
+            value={this.state.private}
+          />
+        </div>
+        <br />
         <div>
           <button
             disabled={!this.state.name.trim() || this.state.cards.length === 0}

src/CardViewer.js

@@ -2,7 +2,12 @@ import React from 'react';
 import './CardViewer.css';
 
 import { Link, withRouter } from 'react-router-dom';
-import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase';
+import {
+  firebaseConnect,
+  isLoaded,
+  isEmpty,
+  populate,
+} from 'react-redux-firebase';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
@@ -53,6 +58,7 @@ class CardViewer extends React.Component {
     return (
       <div>
         <h2>{this.props.name}</h2>
+        <h4>Created by {this.props.username}</h4>
         Card {this.state.currentIndex + 1} out of {this.props.cards.length}.
         <div className="card" onClick={this.flipCard}>
           {card}
@@ -77,18 +83,21 @@ class CardViewer extends React.Component {
   }
 }
 
+const populates = [{ child: 'owner', root: 'users' }];
+
 const mapStateToProps = (state, props) => {
-  const deck = state.firebase.data[props.match.params.deckId];
+  const deck = populate(state.firebase, props.match.params.deckId, populates);
   const name = deck && deck.name;
   const cards = deck && deck.cards;
-  return { cards: cards, name: name };
+  const username = deck && deck.owner && deck.owner.username;
+  return { cards: cards, name: name, username: username };
 };
 
 export default compose(
   withRouter,
   firebaseConnect(props => {
     const deckId = props.match.params.deckId;
-    return [{ path: `/flashcards/${deckId}`, storeAs: deckId }];
+    return [{ path: `/flashcards/${deckId}`, storeAs: deckId, populates }];
   }),
   connect(mapStateToProps),
 )(CardViewer);

src/Homepage.js

@@ -10,9 +10,13 @@ const Homepage = props => {
   }
 
   const decks = Object.keys(props.homepage).map(deckId => {
+    const deck = props.homepage[deckId];
+    if (deck.visibility === 'private' && deck.owner !== props.isLoggedIn) {
+      return null;
+    }
     return (
       <div key={deckId}>
-        <Link to={`/viewer/${deckId}`}>{props.homepage[deckId].name}</Link>
+        <Link to={`/viewer/${deckId}`}>{deck.name}</Link>
       </div>
     );
   });