All the Changes Compiled

README.md

@@ -53,11 +53,6 @@
           path='/single-board'
           component={() => <SingleBoard authed={authed} />}
         />
-        <Route
-          exact
-          path='/board-form'
-          component={() => <BoardForm authed={authed} />}
-        />
         <Route
           exact
           path='/boards'

src/App/index.js

@@ -36,7 +36,8 @@ class App extends React.Component {
       <div className='App'>
         <Router>
           <MyNavbar user={user}/>
-          <Routes user={user} />
+          {/* TODO: make sure the user has been evaluated on each route load */}
+          { user !== null && <Routes user={user} /> }
         </Router>
       </div>
     );

src/components/Cards/BoardsCard.js

@@ -3,17 +3,13 @@ import { Link } from 'react-router-dom';
 
 export default function BoardsCard({ board }) {
   return (
-    <div className='card m-2'>
-      <img className='card-img-top' src={board.imageUrl} alt='Card cap' />
-      <div className='card-body'>
-        <h5 className='card-title'>{board.name}</h5>
-        <p className='card-text'>
-          {board.description}
-        </p>
-        <Link className='btn btn-primary' to={`/boards/${board.firebaseKey}`}>
-          View Pins
-        </Link>
+    <Link to={`/boards/${board.firebaseKey}`} className='whole-card'>
+      <div style={{ backgroundImage: `url(${board.imageUrl})` }} className='card board-card m-2'>
+        <div className='card-body'>
+          <h6 className='card-title'>{board.name}</h6>
+          <p className='card-text'>{board.description}</p>
+        </div>
       </div>
-    </div>
+    </Link>
   );
 }

src/components/Cards/PinsCard.js

@@ -3,17 +3,16 @@ import { Link } from 'react-router-dom';
 
 export default function PinsCard({ pin }) {
   return (
-    <div className='card m-2'>
-      <img className='card-img-top' src={pin.imageUrl} alt='Card cap' />
-      <div className='card-body'>
-        <h5 className='card-title'>{pin.name}</h5>
-        <p className='card-text'>
-          {pin.description}
-        </p>
-        <Link className='btn btn-primary' to={`/pin-edit/${pin.firebaseKey}`}>
-          Edit Pin
-        </Link>
+    <Link className='whole-card' to={`/pins/${pin.firebaseKey}`}>
+      <div
+        style={{ backgroundImage: `url(${pin.imageUrl})` }}
+        className='card board-card m-2'
+      >
+        <div className='card-body'>
+          <h5 className='card-title'>{pin.name}</h5>
+          <p className='card-text'>{pin.description}</p>
+        </div>
       </div>
-    </div>
+    </Link>
   );
 }

src/components/Forms/BoardForm.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import firebase from 'firebase/app';
+import 'firebase/storage';
+import getUser from '../../helpers/data/authData';
+import { createBoard, updateBoard } from '../../helpers/data/boardData';
+
+export default class BoardForm extends Component {
+  state = {
+    firebaseKey: this.props.board?.firebaseKey || '',
+    name: this.props.board?.name || '',
+    imageUrl: this.props.board?.imageUrl || '',
+    userId: this.props.board?.userId || '',
+    description: this.props.board?.description || '',
+  }
+
+  componentDidMount() {
+    const userId = getUser();
+    this.setState({ userId });
+  }
+
+  handleChange = (e) => {
+    if (e.target.name === 'filename') {
+      this.setState({ imageUrl: '' });
+      const storageRef = firebase.storage().ref();
+      const imagesRef = storageRef.child(`pinterest/${this.state.userId}/${Date.now()}${e.target.files[0].name}`);
+
+      imagesRef.put(e.target.files[0]).then((snapshot) => {
+        snapshot.ref.getDownloadURL().then((imageUrl) => {
+          this.setState({ imageUrl });
+        });
+      });
+    } else {
+      this.setState({
+        [e.target.name]: e.target.value,
+      });
+    }
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.btn.setAttribute('disabled', 'disabled');
+    if (this.state.firebaseKey === '') {
+      createBoard(this.state)
+        .then(() => {
+          this.props.onUpdate?.();
+          this.setState({ success: true });
+        });
+    } else {
+      updateBoard(this.state)
+        .then(() => {
+          this.props.onUpdate?.(this.props.board.firebaseKey);
+          this.setState({ success: true });
+        });
+    }
+  }
+
+  render() {
+    const { success } = this.state;
+    return (
+      <>
+      { success && (<div className="alert alert-success" role="alert">Your Board was Updated/Created</div>)
+      }
+      <form onSubmit={this.handleSubmit}>
+        <div>
+        <input
+          type='text'
+          name='name'
+          value={this.state.name}
+          onChange={this.handleChange}
+          placeholder='Board Name'
+          className="form-control form-control-lg m-1"
+          required
+        />
+        </div>
+        <div>
+        <input
+          type='text'
+          name='description'
+          value={this.state.description}
+          onChange={this.handleChange}
+          placeholder='Board Description'
+          className="form-control form-control-lg m-1"
+          required
+        />
+        </div>
+        <div>
+        <input
+          type='url'
+          name='imageUrl'
+          value={this.state.imageUrl}
+          onChange={this.handleChange}
+          placeholder='Enter an Image URL or Upload a File'
+          className="form-control form-control-lg m-1"
+          required
+        />
+        </div>
+        <div>
+         <input className="m-2" type="file" id="myFile" name="filename" accept="image/*" onChange={this.handleChange} />
+         </div>
+         <button ref={(btn) => { this.btn = btn; }} className="btn btn-primary m-2">Submit</button>
+      </form>
+      </>
+    );
+  }
+}

src/components/Modal/index.js

@@ -0,0 +1,28 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import {
+  Button, Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
+
+const AppModal = (props) => {
+  const { className } = props;
+
+  const [modal, setModal] = useState(false);
+
+  const toggle = () => setModal(!modal);
+
+  return (
+    <div className={`app-modal ${className}`}>
+      <Button color={props.btnColor} onClick={toggle}>
+        <i className={`fas ${props.icon} fa-1x`}></i> {props.title}
+      </Button>
+      <Modal isOpen={modal} toggle={toggle} className='modal-dialog-centered modal-lg'>
+      <ModalHeader toggle={toggle}>{props.title}</ModalHeader>
+        <ModalBody>{props.children}</ModalBody>
+      </Modal>
+    </div>
+  );
+};
+
+export default AppModal;

src/components/MyNavbar/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import firebase from 'firebase/app';
 import 'firebase/auth';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import {
   Collapse,
   Navbar,
@@ -16,54 +16,62 @@ import {
 import SearchInput from '../SearchInput';
 
 export default function MyNavbar(props) {
+  const history = useHistory();
   const logMeOut = (e) => {
     e.preventDefault();
+    history.push('/');
     firebase.auth().signOut();
   };
   const { user } = props;
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
-  return (
+  return user && (
     <div>
-      <Navbar color='dark' dark expand='md' className='justify-content-between'>
-        <Link className="navbar-brand" to='/'>Pinterest</Link>
+      <Navbar color='dark' dark expand='md' className='justify-content-between fixed-top'>
+        <Link className='navbar-brand' to='/'>
+          Pinterest
+        </Link>
         <NavbarToggler onClick={toggle} />
         <Collapse isOpen={isOpen} navbar>
-          <Nav className='mr-auto' navbar>
+          <Nav className='flex-grow-1' navbar>
             <NavItem>
-              <Link className="nav-link" to='/boards'>Boards</Link>
+              <Link className='nav-link' to='/boards'>
+                Boards
+              </Link>
             </NavItem>
             <NavItem>
-              <Link className="nav-link" to='/pins'>
+              <Link className='nav-link' to='/pins'>
                 Pins
               </Link>
             </NavItem>
+            <NavItem className='flex-grow-1'>
+              <SearchInput {...props} />
+            </NavItem>
           </Nav>
-          <SearchInput {...props} />
           {/* "Optional chaining operator: (?.)" gives the prop time to load without throwing errors. Only use this if you know your props are correct and need time to load. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining */}
-          {
-            user
-            && <>
-              <img className="userInfo" src={user?.photoURL} alt={user?.displayName} />
+          {user && (
+            <>
+              <img
+                className='userInfo'
+                src={user?.photoURL}
+                alt={user?.displayName}
+              />
               <UncontrolledDropdown>
-              <DropdownToggle nav caret>
-              </DropdownToggle>
-              <DropdownMenu right>
-              <DropdownItem>
-                {user?.displayName}
-                </DropdownItem>
-                <DropdownItem>
-                  <div
-                    className='nav-link btn btn-danger'
-                    onClick={(e) => logMeOut(e)}
-                  >
-                    Logout
-                  </div>
-                </DropdownItem>
-              </DropdownMenu>
-            </UncontrolledDropdown>
+                <DropdownToggle nav caret></DropdownToggle>
+                <DropdownMenu right>
+                  <DropdownItem>{user?.displayName}</DropdownItem>
+                  <DropdownItem>
+                    <div
+                      className='nav-link btn btn-danger'
+                      onClick={(e) => logMeOut(e)}
+                    >
+                      Logout
+                    </div>
+                  </DropdownItem>
+                </DropdownMenu>
+              </UncontrolledDropdown>
             </>
-          }
+          )}
         </Collapse>
       </Navbar>
     </div>

src/components/PageHeader/index.js

@@ -0,0 +1,9 @@
+const PageHeader = (props) => (
+  <div className='user-board-info'>
+    <img src={props.user?.photoURL} alt={props.user?.displayName} />
+    <h3>{props.user?.displayName}</h3>
+    <h6>{props.user?.providerData[0].email}</h6>
+  </div>
+);
+
+export default PageHeader;

src/components/SearchInput/index.js

@@ -25,9 +25,9 @@ class SearchInput extends Component {
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
-        <input type='text' name='text' value={this.state.text} onChange={this.handleChange} />
-        <select name='type' value={this.state.type} onChange={this.handleChange} >
+      <form onSubmit={this.handleSubmit} className="d-flex search-input mx-5">
+        <input className="form-control" type='text' name='text' value={this.state.text} onChange={this.handleChange} placeholder={'Search...'}/>
+        <select className="btn btn-secondary dropdown-toggle" name='type' value={this.state.type} onChange={this.handleChange} >
           <option value='pins'>Pins</option>
           <option value='boards'>Boards</option>
         </select>