Challenge2 picture upload miguelgimenez

README.md

@@ -13,20 +13,30 @@ To start the server be sure to have installed mongoDB locally as a service then
 ```$xslt
     cd server
     npm i
-    node index.js
+    npm run build
+    npm start
 ```
 If you want to restart the server at any change you can also install nodemon and start the server like this
 ```
     cd server
     npm i
-    npm i -g nodemon
-    nodemon index.js
+    npm run dev
+
+```
+To run the test on the backend
+```
+    cd server
+    npm i
+    npm test
+
 ```
 - In the client repository you have the Front-end code of the blog that uses React and Redux.
-To start the Front-end
+To start the Front-end.
+(Since this project needs external libraries to work with node versions above v16 i added an .nvmrc file to explicitly show the node version required, that's why i wrote the script to use the correct version below )
 ```
     cd client
     npm i
+    nvm use 
     npm start
 ```
 

client/.env

@@ -0,0 +1 @@
+REACT_APP_API_URL= 'http://localhost:3000/api'

client/.nvmrc

@@ -0,0 +1 @@
+v16.13.0

client/package.json

@@ -4,16 +4,18 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
     "fetch": "^1.1.0",
-    "isomorphic-fetch": "^2.2.1",
+    "jwt-decode": "^3.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-loader-spinner": "^5.4.5",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1",

client/src/App.js

@@ -1,16 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-import './App.css';
+import React, { useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { useDispatch, useSelector } from 'react-redux';
 import { Route, BrowserRouter, Switch } from 'react-router-dom';
+import apiCaller from './util/apiCaller'
+import './App.css';
 import PostListPage from './Post/pages/PostListPage/PostListPage';
 import PostDetailPage from './Post/pages/PostDetailPage/PostDetailPage';
-import { Provider } from 'react-redux';
-
-import 'bootstrap/dist/css/bootstrap.min.css';
 import Navbar from './Nav/components/Navbar';
+import AccessPage from './User/pages/AccessPage/AccessPage';
+import { checkAuthentication } from './User/UserActions';
+import AlertComponent from './shared/components/Alert/AlertComponent';
+
 
-const theme = createMuiTheme({
+const theme = createTheme({
     palette: {
         primary: {
             main: '#1ecde2',
@@ -19,27 +22,33 @@ const theme = createMuiTheme({
 });
 
 function App(props) {
-  return (
-      <ThemeProvider theme={theme}>
-          <div className="w-100">
-              <Navbar />
-              <div className="w-100 pt-5 mt-5">
-                  <Provider store={props.store}>
-                    <BrowserRouter>
-                      <Switch>
-                          <Route path="/" exact component={PostListPage} />
-                          <Route path="/posts/:cuid/:slug" exact component={PostDetailPage} />
-                      </Switch>
-                    </BrowserRouter>
-                  </Provider>
-              </div>
-          </div>
-      </ThemeProvider>
-);
-}
+    const dispatch = useDispatch();
+    const accessToken = useSelector(state => state.user.accessToken)
+
+    useEffect(() => {
+        dispatch(checkAuthentication())
+        apiCaller.innerClient.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+    }, [accessToken])
+
 
-App.propTypes = {
-    store: PropTypes.object.isRequired,
-};
+    return (
+        <ThemeProvider theme={theme}>
+            <div className="w-100">
+                <BrowserRouter>
+                    <AlertComponent />
+                    <Navbar />
+                    <div className="w-100 pt-5 mt-5">
+                        <Switch>
+                            <Route path="/" exact component={PostListPage} />
+                            <Route path="/posts/:cuid/:slug" exact component={PostDetailPage} />
+                            <Route path="/access" exact component={AccessPage} />
+                        </Switch>
+
+                    </div>
+                </BrowserRouter>
+            </div>
+        </ThemeProvider >
+    );
+}
 
 export default App;

client/src/Nav/components/Navbar.js

@@ -3,14 +3,31 @@ import Toolbar from '@material-ui/core/Toolbar';
 import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@material-ui/core';
+import { useHistory } from "react-router-dom";
+import { logoutRequest } from '../../User/UserActions';
 
 function Navbar() {
+    const dispatch = useDispatch()
+    const history = useHistory()
+    const isAuthenticated = useSelector(state => state.user?.isAuthenticated);
+    const login = () => history.push('/access');
+    const logout = () => dispatch(logoutRequest())
+
     return (
         <AppBar position="fixed">
-            <Toolbar>
+            <Toolbar className='justify-content-between'>
                 <Typography variant="h6" >
                     <Link href="/" className="text-white">Home</Link>
                 </Typography>
+                {history.location.pathname !== '/access' && <Typography variant="h6" >
+                    <Button
+                        onClick={isAuthenticated ? logout : login}
+                        className="text-white">
+                        {isAuthenticated ? "Logout" : "Login"}
+                    </Button>
+                </Typography>}
             </Toolbar>
         </AppBar>
     );

client/src/Post/PostActions.js

@@ -1,11 +1,14 @@
-import callApi from '../util/apiCaller';
+import apiCaller from '../util/apiCaller';
+
 
 // Export Constants
 export const ADD_POST = 'ADD_POST';
 export const ADD_POSTS = 'ADD_POSTS';
 export const DELETE_POST = 'DELETE_POST';
+export const SET_LOADING = 'SET_LOADING';
 
 // Export Actions
+
 export function addPost(post) {
   return {
     type: ADD_POST,
@@ -15,13 +18,14 @@ export function addPost(post) {
 
 export function addPostRequest(post) {
   return (dispatch) => {
-    return callApi('posts', 'post', {
-      post: {
-        name: post.name,
-        title: post.title,
-        content: post.content,
-      },
-    }).then(res => dispatch(addPost(res.post)));
+    dispatch({ type: SET_LOADING, loading: true })
+    return apiCaller.callApi('posts', 'post',
+      post
+      , {})
+      .then(res => dispatch(addPost(res.post)))
+      .catch(error => {
+        dispatch({ type: SET_LOADING, loading: false })
+      })
   };
 }
 
@@ -34,15 +38,15 @@ export function addPosts(posts) {
 
 export function fetchPosts() {
   return (dispatch) => {
-    return callApi('posts').then(res => {
-      dispatch(addPosts(res.posts));
-    });
+    return apiCaller.callApi('posts').then(res => {
+      dispatch(addPosts(res.posts))
+    })
   };
 }
 
 export function fetchPost(cuid) {
   return (dispatch) => {
-    return callApi(`posts/${cuid}`).then(res => dispatch(addPost(res.post)));
+    return apiCaller.callApi(`posts/${cuid}`).then(res => dispatch(addPost(res.post)));
   };
 }
 
@@ -55,6 +59,10 @@ export function deletePost(cuid) {
 
 export function deletePostRequest(cuid) {
   return (dispatch) => {
-    return callApi(`posts/${cuid}`, 'delete').then(() => dispatch(deletePost(cuid)));
+    return apiCaller.callApi(`posts/${cuid}`, "delete").then((res) => {
+      if (res.ok) {
+        dispatch(deletePost(cuid));
+      }
+    });
   };
 }

client/src/Post/PostReducer.js

@@ -1,25 +1,36 @@
-import { ADD_POST, ADD_POSTS, DELETE_POST } from './PostActions';
+import { ADD_POST, ADD_POSTS, DELETE_POST, SET_LOADING } from './PostActions';
 
 // Initial State
-const initialState = { data: [] };
+const initialState = { data: [], loading: false };
 
 const PostReducer = (state = initialState, action) => {
   switch (action.type) {
-    case ADD_POST :
-      return {
-        data: [action.post, ...state.data],
-      };
+    case ADD_POST:
+      if (action.post) {
+        return {
+          data: [action.post, ...state.data],
+          loading: false
+        };
+      }
+      return state
+
 
-    case ADD_POSTS :
+    case ADD_POSTS:
       return {
         data: action.posts,
+        loading: false
       };
 
-    case DELETE_POST :
+    case DELETE_POST:
       return {
         data: state.data.filter(post => post.cuid !== action.cuid),
+        loading: false
       };
-
+    case SET_LOADING: {
+      return {
+        ...state, loading: action.loading
+      }
+    }
     default:
       return state;
   }

client/src/Post/components/PostCreateWidget.js

@@ -2,47 +2,72 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+import { InputLabel } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-// Import Style
+import { useSelector } from 'react-redux';
+
+import Loader from '../../shared/components/Loader/Loader';
+
+
 
 const useStyles = makeStyles(theme => ({
-    root: {
-        '& > *': {
-            margin: theme.spacing(1),
-        },
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
     },
+  },
 }));
 
 const PostCreateWidget = ({ addPost }) => {
 
-    const [state, setState] = useState({});
-    const classes = useStyles();
-
+  const [state, setState] = useState({});
+  const classes = useStyles();
+  const [imageFile, setImageFile] = useState(null);
+  const loading = useSelector(state => state.posts.loading);
 
+  const handleImageChange = (e) => {
+    setImageFile(e.target.files[0]);
+  };
 
   const submit = () => {
+    const formData = new FormData();
+    if (imageFile) {
+      formData.append('image', imageFile);
+    }
     if (state.name && state.title && state.content) {
-      addPost(state);
+      formData.append('name', state.name);
+      formData.append('title', state.title);
+      formData.append('content', state.content);
+
+      addPost(formData);
     }
+
+    setState({
+      name: undefined,
+      title: undefined,
+      content: undefined
+    })
   };
 
   const handleChange = (evt) => {
     const value = evt.target.value;
     setState({
-        ...state,
-        [evt.target.name]: value
+      ...state,
+      [evt.target.name]: value
     });
   };
-
+  if (loading) return <Loader />
   return (
     <div className={`${classes.root} d-flex flex-column my-4 w-100`}>
-        <h3>Create new post</h3>
-        <TextField variant="filled" label="Author name" name="name" onChange={handleChange} />
-        <TextField variant="filled" label="Post title" name="title" onChange={handleChange} />
-        <TextField variant="filled" multiline rows="4" label="Post content" name="content" onChange={handleChange} />
-        <Button className="mt-4" variant="contained" color="primary" onClick={() => submit()} disabled={!state.name || !state.title || !state.content}>
-            Submit
-        </Button>
+      <h3>Create new post</h3>
+      <TextField variant="filled" required label="Author name" name="name" onChange={handleChange} />
+      <TextField variant="filled" required label="Post title" name="title" onChange={handleChange} />
+      <TextField variant="filled" required multiline minRows="4" label="Post content" name="content" onChange={handleChange} />
+      <InputLabel htmlFor="background-image-input">Select background image</InputLabel>
+      <input type="file" placeholder="Add Background image" onChange={handleImageChange} />
+      <Button className="mt-4" variant="contained" color="primary" onClick={() => submit()} disabled={!state.name || !state.title || !state.content}>
+        Submit
+      </Button>
     </div>
   );
 };

client/src/Post/components/PostList.js

@@ -9,7 +9,7 @@ function PostList(props) {
     <div className="d-flex flex-column w-100">
       <h3 className="mt-4">Posts</h3>
       {
-        props.posts.map(post => (
+        (props.posts || []).map(post => (
           <PostListItem
             post={post}
             key={post.cuid}