added api pages

pages/api/feed.js

@@ -0,0 +1,8 @@
+import { data } from "../../static/example_data";
+const feed = data?.feed;
+
+export default function Feed(req, res) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(feed));
+}

pages/api/loginUser.js

@@ -0,0 +1,8 @@
+import { data } from "../../static/example_data";
+const loginUser = data?.loginUser;
+
+export default function LoginUser(req, res) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(loginUser));
+}

pages/api/stories.js

@@ -0,0 +1,8 @@
+import { data } from "../../static/example_data";
+const stories = data?.stories;
+
+export default function Stories(req, res) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(stories));
+}

pages/api/suggestions.js

@@ -0,0 +1,8 @@
+import { data } from "../../static/example_data";
+const suggestions = data?.suggestions;
+
+export default function Suggestions(req, res) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(suggestions));
+}

pages/index.js

@@ -1,22 +1,59 @@
+import { useState, useEffect } from "react";
+
 import Layout from "../components/layout";
 import Stories from "../components/stories";
 import FeedItem from "../components/feed-item";
 import HomeRightBar from "../components/home-right-bar";
-import { data } from "../static/example_data";
-import Modal from "../components/modal";
 import MoreModalItems from "../components/more-modal";
 
+import LoginUserHook from "../hooks/global_hook";
+
 export default function Home() {
+  const { data, setLoginUser } = LoginUserHook();
+
+  const [loginData, setLoginData] = useState(null);
+  const [stories, setStories] = useState(null);
+  const [suggestions, setSuggestions] = useState(null);
+  const [feed, setFeed] = useState(null);
+
+  const updateLoginUser = (data) => {
+    setLoginUser(data);
+    setLoginData(data);
+  };
+
+  useEffect(() => {
+    fetch("/api/loginUser")
+      .then((response) => response.json())
+      .then((data) => updateLoginUser(data));
+
+    fetch("/api/feed")
+      .then((response) => response.json())
+      .then((data) => setFeed(data));
+
+    fetch("/api/suggestions")
+      .then((response) => response.json())
+      .then((data) => setSuggestions(data));
+
+    fetch("/api/stories")
+      .then((response) => response.json())
+      .then((data) => setStories(data));
+  }, []);
+
   return (
-    <Layout user={data?.loginUser}>
-      <MoreModalItems />
-      <div className="homepage-feed lg:mr-8 flex flex-col ">
-        <Stories stories={data?.stories} />
-        {data?.feed.map((item) => {
-          return <FeedItem data={item} key={item.pid} />;
-        })}
-      </div>
-      <HomeRightBar data={data.suggestions} />
-    </Layout>
+    <>
+      {loginData && (
+        <Layout user={loginData}>
+          <MoreModalItems />
+          <div className="homepage-feed lg:mr-8 flex flex-col ">
+            <Stories stories={stories} />
+            {feed &&
+              feed.map((item) => {
+                return <FeedItem data={item} key={item.pid} />;
+              })}
+          </div>
+          <HomeRightBar data={suggestions} />
+        </Layout>
+      )}
+    </>
   );
 }