implement Home page

Dockerfile

@@ -4,6 +4,8 @@ WORKDIR /usr/src/app
 
 ENV INLINE_RUNTIME_CHUNK false
 
+ENV API_URL http://localhost:3000/api
+
 COPY package*.json ./
 
 RUN npm install

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     depends_on:
       - postgres
     environment:
-      API_URL: http://localhost:3000/
+      API_URL: http://localhost:3000/api
       DATABASE_URL: postgres://user:pass@postgres:5432/db
       NODE_ENV: development
       PORT: 3000

server/data/seeds/002_seed_resolutions.js

@@ -1,10 +1,15 @@
 exports.seed = (knex) => {
   return knex('resolution')
     .del()
-    .then(() => {
-      return knex('resolution').insert([
-        { user_id: 1, content: 'lose 15 lbs' },
-        { user_id: 1, content: 'actually fulfill resolutions this year' },
-      ]);
-    });
+    .then(() =>
+      knex
+        .select('id')
+        .from('user')
+        .then(([{ id }]) =>
+          knex('resolution').insert([
+            { user_id: id, content: 'Lose 15 lbs' },
+            { user_id: id, content: 'Actually fulfill resolutions this year' },
+          ])
+        )
+    );
 };

src/client/client.js

@@ -21,4 +21,10 @@ module.exports = {
       password,
     }),
   logoutClient: () => instance.post('/logout'),
+  getAllResolutions: () => instance.get('/resolution'),
+  getResloutionById: (id) => instance.get(`/resolution/${id}`),
+  createResolution: ({ content }) => instance.post('/resolution', { content }),
+  patchResolution: ({ id, content }) =>
+    instance.patch(`/resolution/${id}`, { content }),
+  deleteResolution: ({ id }) => instance.delete(`/resolution/${id}`),
 };

src/components/App/App.js

@@ -6,7 +6,15 @@ import LandingPage from '../LandingPage/LandingPage';
 import PageHeader from '../PageHeader/PageHeader';
 import RegistrationPage from '../RegistrationPage/RegistrationPage';
 import LoginPage from '../LoginPage/LoginPage';
-import { registerUser, loginClient, logoutClient } from '../../client/client';
+import HomePage from '../HomePage/HomePage';
+import CreateResolutionPage from '../CreateResolutionPage/CreateResolutionPage';
+import {
+  registerUser,
+  loginClient,
+  logoutClient,
+  getAllResolutions,
+  createResolution,
+} from '../../client/client';
 
 const theme = createMuiTheme({
   palette: {
@@ -36,7 +44,9 @@ function App() {
             handleSetUser={handleSetUser}
           />
           <Switch>
-            <Route exact path='/' component={LandingPage} user={user} />
+            <Route exact path='/'>
+              <LandingPage user={user} />
+            </Route>
             <Route path='/register'>
               <RegistrationPage registerUser={registerUser} user={user} />
             </Route>
@@ -47,6 +57,15 @@ function App() {
                 handleLogin={handleSetUser}
               />
             </Route>
+            <Route path='/home'>
+              <HomePage user={user} getAllResolutions={getAllResolutions} />
+            </Route>
+            <Route path='/createResolution'>
+              <CreateResolutionPage
+                user={user}
+                createResolution={createResolution}
+              />
+            </Route>
           </Switch>
         </div>
       </Router>

src/components/CreateResolutionPage/CreateResolutionPage.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { Link as RouterLink, Redirect } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import { Container, Typography, TextField, Button } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+function CreateResolutionPage({ user, createResolution }) {
+  const classes = useStyles();
+
+  const [content, setContent] = useState('');
+  const [redirect, setRedirect] = useState(false);
+  const [contentError, setContentError] = useState('');
+
+  useEffect(() => {
+    setContentError('');
+  }, [content]);
+
+  const handleChangeContent = (event) => {
+    setContent(event.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!content.trim()) {
+      setContentError('Resolution is required');
+    }
+
+    const noErrors = content.trim();
+
+    if (noErrors) {
+      createResolution({ content });
+      setRedirect(true);
+    }
+  };
+
+  return (
+    <Container component='main' maxWidth='xs'>
+      {user ? null : <Redirect to='/login' />}
+      {redirect ? <Redirect to='/home' /> : null}
+      <div className={classes.paper}>
+        <Typography component='h1' variant='h5'>
+          Create Resolution
+        </Typography>
+        <form className={classes.form} onSubmit={(e) => e.preventDefault()}>
+          <TextField
+            autoComplete='fname'
+            name='content'
+            variant='outlined'
+            required
+            fullWidth
+            id='content'
+            label='Resolution'
+            value={content}
+            onChange={handleChangeContent}
+            autoFocus
+            helperText={contentError}
+            error={!!contentError}
+          />
+          <Button
+            type='submit'
+            fullWidth
+            variant='contained'
+            color='primary'
+            className={classes.submit}
+            onClick={handleSubmit}
+            component={RouterLink}
+            to='/home'
+          >
+            Create Resolution
+          </Button>
+        </form>
+      </div>
+    </Container>
+  );
+}
+
+export default CreateResolutionPage;

src/components/CreateResolutionPage/CreateResolutionPage.test.js

@@ -0,0 +1,5 @@
+describe('CreateResolutionPage', () => {
+  it('should', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/components/HomePage/HomePage.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Link as RouterLink, Redirect } from 'react-router-dom';
+import { Container, Fab } from '@material-ui/core';
+import Resolution from '../Resolution/Resolution';
+import AddIcon from '@material-ui/icons/Add';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(10),
+    right: theme.spacing(10),
+  },
+  root: {
+    padding: theme.spacing(3),
+  },
+}));
+
+function HomePage({ user, getAllResolutions }) {
+  const classes = useStyles();
+  const [resolutions, setResolutions] = useState([]);
+
+  useEffect(() => {
+    getAllResolutions().then(({ data }) => {
+      console.log(data);
+      setResolutions(data);
+    });
+  }, [getAllResolutions]);
+
+  return (
+    <div className={classes.root}>
+      {user ? null : <Redirect to='/login' />}
+      <Container component='main' maxWidth='sm'>
+        {resolutions.map((resolution) => (
+          <Resolution resolution={resolution} />
+        ))}
+      </Container>
+      <Fab
+        className={classes.fab}
+        color='primary'
+        aria-label='add'
+        component={RouterLink}
+        to='/createResolution'
+      >
+        <AddIcon />
+      </Fab>
+    </div>
+  );
+}
+
+export default HomePage;

src/components/HomePage/HomePage.test.js

@@ -0,0 +1,5 @@
+describe('HomePage', () => {
+  it('should', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/components/LandingPage/LandingPage.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-
+import { Link as RouterLink, Redirect } from 'react-router-dom';
 import {
   Container,
   Typography,
@@ -30,10 +29,11 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LandingPage(props) {
+function LandingPage({ user }) {
   const classes = useStyles();
   return (
     <main className={classes.root}>
+      {user ? <Redirect to='/home' /> : null}
       <Typography
         component='div'
         align='center'
@@ -62,9 +62,14 @@ function LandingPage(props) {
           NuLeaf
         </Typography>
         <Container maxWidth='xs' className={classes.buttonContainer}>
-            <Button  variant='contained' color='primary' component={RouterLink} to='/register'>
-              Sign up today
-            </Button>
+          <Button
+            variant='contained'
+            color='primary'
+            component={RouterLink}
+            to='/register'
+          >
+            Sign up today
+          </Button>
         </Container>
       </Container>
     </main>

src/components/LoginPage/LoginPage.js

@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Copyright from '../Copyright/Copyright';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, Redirect } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function LoginPage({ loginClient, handleLogin }) {
+export default function LoginPage({ loginClient, handleLogin, user }) {
   const classes = useStyles();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -48,6 +48,7 @@ export default function LoginPage({ loginClient, handleLogin }) {
   }, [password]);
 
   const handleSubmit = (event) => {
+    event.preventDefault();
     if (email.trim() && password.trim()) {
       loginClient({ email, password }).then((res) => {
         handleLogin(res.data);
@@ -67,6 +68,7 @@ export default function LoginPage({ loginClient, handleLogin }) {
 
   return (
     <Container component='main' maxWidth='xs'>
+      {user ? <Redirect to='/home' /> : null}
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
           <LockOutlinedIcon />