adding posts heading and new button

Author: github username

new-work-ny-frontend/src/App.js

@@ -14,6 +14,7 @@ function App() {
   return (
     <div className="app">
       <Provider store={store}>
+        {console.log("in app", store.getState())}
         <Router>
           <Switch>
             <Route exact path="/" render={(props) => <Home {...props} />} />

new-work-ny-frontend/src/actions/index.js

@@ -6,6 +6,7 @@ import {
   fetchLogIn,
   fetchNewPost,
   fetchPosts,
+  fetchUser,
 } from "../adapters";
 
 //USERS############################################################################
@@ -29,11 +30,30 @@ export const loggingIn = (dispatch, userData) => {
   return (dispatch) => {
     dispatch({ type: "ASYNC_START" });
     fetchLogIn(userData).then((data) => {
-      if (data.user) {
+      if (data !== "false") {
+        window.localStorage.setItem("userId", JSON.stringify(data.user.id));
+        dispatch({ type: LOG_IN, data });
+        history.push("/dashboard");
+      } else {
+        history.push("/");
+        alert("Please login again.");
+      }
+    });
+  };
+};
+
+export const setCurrentUser = (dispatch) => {
+  return (dispatch) => {
+    dispatch({ type: "ASYNC_START" });
+    fetchUser().then((data) => {
+      if (data.logged_in !== false) {
+        debugger;
+        window.localStorage.setItem("userId", `${data.user.id}`);
         dispatch({ type: LOG_IN, data });
         history.push("/dashboard");
       } else {
-        alert("Login failed, please try again.");
+        history.push("/");
+        alert("Please login again.");
       }
     });
   };
@@ -44,17 +64,19 @@ export const loggingIn = (dispatch, userData) => {
 export const newPost = (dispatch, postData) => {
   return (dispatch) => {
     dispatch({ type: "ASYNC_START" });
-    fetchNewPost(postData).then((data) => {
-      dispatch({ type: NEW_POST, data });
-    });
+    fetchNewPost(postData);
   };
 };
 
 export const getAllPosts = (dispatch) => {
   return (dispatch) => {
     dispatch({ type: "ASYNC_START" });
     fetchPosts().then((data) => {
-      dispatch({ type: GET_POSTS, data });
+      if (data !== null) {
+        dispatch({ type: GET_POSTS, data });
+      } else {
+        return null;
+      }
     });
   };
 };

new-work-ny-frontend/src/adapters/index.js

@@ -29,6 +29,23 @@ export const fetchLogIn = async (data) => {
     }
   );
   const json = await resp.json();
+  if (json.status !== 404) {
+    return json;
+  } else {
+    return "false";
+  }
+};
+
+export const fetchUser = async () => {
+  const resp = await fetch(
+    "https://new-work-ny-backend.herokuapp.com/logged_in",
+    {
+      headers: headers,
+      method: "GET",
+    }
+  );
+  const json = await resp.json();
+  console.log("in fetch user", json);
   return json;
 };
 
@@ -50,9 +67,11 @@ export const fetchPosts = async () => {
     method: "GET",
   });
   const response = await resp;
-  if (response.ok) {
-    return response.json();
-  } else {
+
+  if (response.statusText === "No Content" || response.posts === undefined) {
     return null;
+  } else {
+    console.log("in fetch posts", response);
+    return response;
   }
 };

new-work-ny-frontend/src/components/posts/NewPostModal.jsx

@@ -19,7 +19,7 @@ const NewPostModal = ({ currentUser, newPost }) => {
   };
 
   const handleSubmit = () => {
-    let author_id = currentUser.id;
+    let author_id = parseInt(window.localStorage.getItem("userId"));
     let data = {
       title,
       description,

new-work-ny-frontend/src/components/posts/postsContainer/Posts.jsx

@@ -2,20 +2,25 @@ import React, { Component } from "react";
 import { ParallaxLayer } from "react-spring/renderprops-addons";
 import { Layout, Button, Space, Col, Row, Divider } from "antd";
 import PostCard from "../postcard/PostCard";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import "./Posts.css";
 
 const { Header, Sider } = Layout;
 
 const Posts = ({ getAllPosts, posts }) => {
+  const [postList, editPostList] = useState([]);
+
   useEffect(() => {
     getAllPosts();
-  }, []);
 
-  const postCards = posts.map((post, i) => (
-    <PostCard id="flex-item" post={post} key={post.id} />
-  ));
+    if (posts.length) {
+      let postCards = posts.map((post, i) => (
+        <PostCard id="flex-item" post={post} key={post.id} />
+      ));
+      editPostList(postCards);
+    }
+  });
 
   return (
     <Layout
@@ -44,12 +49,11 @@ const Posts = ({ getAllPosts, posts }) => {
       <br />
       <br />
       <Divider orientation="center" />
-      <div id="container" align="middle" style={{ background: "none" }}>
-        <Space size="large">{posts.length ? postCards : null}</Space>
-        <Space size="large">{posts.length ? postCards : null}</Space>
-        <Space size="large">{posts.length ? postCards : null}</Space>
-        <Space size="large">{posts.length ? postCards : null}</Space>
-      </div>
+      {postList !== [] ? (
+        <div id="container" align="middle" style={{ background: "none" }}>
+          <Space size="large">{postList.length ? postList : null}</Space>
+        </div>
+      ) : null}
     </Layout>
   );
 };

new-work-ny-frontend/src/components/singUpLogIn/LogIn.jsx

@@ -7,7 +7,7 @@ import { useHistory } from "react-router-dom";
 import "./LogIn.css";
 const { Header } = Layout;
 
-const LogIn = ({ handleSubmit, handleFormView, formView }) => {
+const LogIn = ({ handleSubmit }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
@@ -23,7 +23,6 @@ const LogIn = ({ handleSubmit, handleFormView, formView }) => {
       password,
     };
     handleSubmit("login", data);
-    handleFormView("login");
     setEmail("");
     setPassword("");
   };

new-work-ny-frontend/src/containers/dashboard/Dashboard.jsx

@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import * as actions from "../../actions";
 import NewPostModal from "../../components/posts/NewPostModal";
 import Posts from "../../components/posts/postsContainer/Posts";
+import { useEffect, useState } from "react";
 
 const { Header } = Layout;
 
@@ -38,15 +39,9 @@ class Dashboard extends Component {
           >
             NEW WORK NEW YORK
           </Header>
-          <Header
-            id="coming-soon-header"
-            style={{
-              background: "none",
-              padding: "1%",
-            }}
-          >
-            More coming soon!
-          </Header>
+
+          <NewPostModal currentUser={currentUser} newPost={newPost} />
+          <Posts getAllPosts={getAllPosts} posts={posts} />
         </div>
       </div>
     );

new-work-ny-frontend/src/reducers/index.js

@@ -15,7 +15,7 @@ const userReducer = (state = null, action) => {
 const postsReducer = (state = [], action) => {
   switch (action.type) {
     case NEW_POST:
-      return state.posts.concat(action.data.post);
+      return [...state.posts, action.data.post];
     case GET_POSTS:
       return action.data.posts;
     default:

new-work-ny-frontend/src/store/configureStore.js

@@ -1,9 +1,10 @@
-import { createStore, applyMiddleware } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
 import reduxThunk from "redux-thunk";
 import rootReducer from "../reducers/index";
 
 const configureStore = () => {
-  return createStore(rootReducer, applyMiddleware(reduxThunk));
+  let store = createStore(rootReducer, compose(applyMiddleware(reduxThunk)));
+  return store;
 };
 
 export default configureStore;