everything fetches from static object now

atoms/globalState.js

@@ -0,0 +1,13 @@
+import { atom } from "recoil";
+
+const loginUser = atom({
+  key: "login_user",
+  default: {
+    username: "anilsenay",
+    name: "Anıl Şenay",
+    image:
+      "https://instagram.fsaw1-3.fna.fbcdn.net/v/t51.2885-19/s150x150/88129994_218553312873090_187843388282765312_n.jpg?_nc_ht=instagram.fsaw1-3.fna.fbcdn.net&_nc_ohc=siFEGZag29UAX9Sytdg&oh=56e1226fa0938ff569eb491980eb95a7&oe=5F4278CA",
+  },
+});
+
+export { loginUser };

components/feed-item-comment.js

@@ -6,7 +6,7 @@ export default function FeedItemComment({ data }) {
 
   return (
     <div className="overflow-hidden mx-4 text-14-light inherit">
-      <UsernameText username="username" />
+      <UsernameText username={data.username} />
       <span className={!showMore ? "feed-item-text-description " : "inherit"}>
         {data?.description ||
           "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"}

components/feed-item-header.js

@@ -9,7 +9,7 @@ export default function FeedItemHeader({ username, image }) {
       <ProfilePic src={image} size={32} />
       <UsernameText
         className="feed-item-header-text text-14-bold mr-1 ml-4 cursor-pointer"
-        username={"username"}
+        username={username || "username"}
       />
       <button className="ml-auto flex">
         <MoreSettings />

components/feed-item.js

@@ -8,22 +8,17 @@ import FeedItemPhotos from "./feed-item-photos";
 import Router from "next/router";
 
 export default function FeedItem({ data }) {
-  const photos = [
-    "https://picsum.photos/id/227/600/600",
-    "https://picsum.photos/id/247/600/600",
-    "https://picsum.photos/id/257/600/600",
-    "https://picsum.photos/id/287/600/600",
-    "https://picsum.photos/id/267/600/600",
-  ];
   return (
     <Box className="feed-item-container flex flex-col">
-      <FeedItemHeader image={data?.image} username={data?.username} />
-      <FeedItemPhotos photos={data.photos || photos} />
+      <FeedItemHeader image={data.user.image} username={data.user.username} />
+      <FeedItemPhotos photos={data.photos} />
       <FeedItemButtons className="feed-item-buttons-container w-full h-10 pl-2 pr-2 mt-2 flex items-center" />
       <a href="#" className="feed-item-text text-14-bold mr-1 ml-4">
-        {data?.likes || "0"} likes
+        {data?.likeCount || "0"} likes
       </a>
-      <FeedItemComment data={data?.userComment} />
+      <FeedItemComment
+        data={{ username: data.user.username, description: data.description }}
+      />
       <a
         className="overflow-hidden mx-4 text-14-light cursor-pointer"
         style={{ color: "#9a9a9a", display: "flex" }}
@@ -33,15 +28,21 @@ export default function FeedItem({ data }) {
       >
         Wiew all {data?.commentCount || "0"} comment
       </a>
-      <FeedItemComment data={{ description: "Hellooo, nice pic!" }} />
-      <FeedItemComment data={{ description: "Wow, you look nice!" }} />
+      {data.popularComments.map((item) => {
+        return (
+          <FeedItemComment
+            data={{ username: item.username, description: item.description }}
+          />
+        );
+      })}
+
       <a
-        className="feed-item-date-text cursor-pointer"
+        className="feed-item-date-text cursor-pointer uppercase"
         onClick={() =>
           Router.push("/post/[pid]", `/post/${data?.pid || "post-test"}`)
         }
       >
-        12 HOURS AGO
+        {data.time}
       </a>
       <AddComment />
     </Box>

components/header.js

@@ -6,8 +6,12 @@ import ExploreIcon from "./icons/explore_icon";
 import ActivityIcon from "./icons/activity_icon";
 import ProfilePic from "./profile_pic";
 import Clickable from "./clickable";
+import { useRecoilState } from "recoil";
+import { loginUser } from "../atoms/globalState";
 
 export default function Header({ user }) {
+  const [loginUserData, setLoginUserData] = useRecoilState(loginUser);
+
   return (
     <nav className="navigation fixed z-20 top-0">
       <div className="header-container">
@@ -29,8 +33,8 @@ export default function Header({ user }) {
             <ActivityIcon className="header-icon" />
           </Clickable>
           <ProfilePic
-            src={user?.image}
-            username={user?.username || "anilsenay"}
+            src={loginUserData?.image}
+            username={loginUserData?.username}
             size={22}
           />
         </div>

components/home-right-bar.js

@@ -2,21 +2,27 @@ import React from "react";
 import ProfilePic from "./profile_pic";
 import RightBarSuggestions from "./right-bar-suggestions";
 import UsernameText from "./username-text";
+import { useRecoilState } from "recoil";
+import { loginUser } from "../atoms/globalState";
 
 export default function HomeRightBar({ data }) {
+  const [loginUserData, setLoginUserData] = useRecoilState(loginUser);
+
   return (
     <div className="suggestions hidden lg:flex lg:flex-col">
       <div className="right-bar-user-info flex items-center">
-        <ProfilePic size={56} />
+        <ProfilePic src={loginUserData.image} size={56} />
         <div className="user-info-texts ml-5 flex flex-col">
           <UsernameText
             style={{ paddingBottom: 2, paddingTop: 2 }}
-            username="username"
+            username={loginUserData.username}
           />
-          <span className="text-12-light">{data?.name || "Name Surname"}</span>
+          <span className="text-12-light">
+            {loginUserData?.name || "Name Surname"}
+          </span>
         </div>
       </div>
-      <RightBarSuggestions />
+      <RightBarSuggestions data={data} />
     </div>
   );
 }

components/right-bar-suggestions.js

@@ -1,8 +1,7 @@
 import React from "react";
 import SuggestionItem from "./suggestion-item";
 
-export default function RightBarSuggestions() {
-  const suggestions = [1, 2, 3, 4, 5];
+export default function RightBarSuggestions({ data }) {
   return (
     <div className="flex flex-col">
       <div className="suggestions-header flex" style={{ marginTop: 12 }}>
@@ -17,7 +16,7 @@ export default function RightBarSuggestions() {
         className="right-bar-suggestions"
         style={{ paddingBottom: 8, paddingTop: 8 }}
       >
-        {suggestions.map((item) => {
+        {data.map((item) => {
           return <SuggestionItem data={item} />;
         })}
       </div>

components/suggestion-item.js

@@ -6,15 +6,13 @@ import UsernameText from "./username-text";
 export default function SuggestionItem({ data }) {
   return (
     <div className="suggestion-item py-2 h-auto flex items-center">
-      <ProfilePic size={32} />
+      <ProfilePic size={32} src={data.image} />
       <div className="suggestion-user-info ml-3 flex flex-col">
         <UsernameText
-          username="username"
+          username={data.username}
           className="text-14-bold cursor-pointer"
         />
-        <span className="text-12-light">
-          {data?.info || "Followed by username + 99 more"}
-        </span>
+        <span className="text-12-light">{data?.text}</span>
       </div>
       <div className="follow-button text-12-bold flex items-center ml-auto text-blue cursor-pointer">
         Follow

package.json

@@ -11,6 +11,7 @@
     "next": "9.4.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "recoil": "0.0.10",
     "tailwindcss": "^1.5.2"
   },
   "devDependencies": {

pages/_app.js

@@ -1,5 +1,16 @@
 import "../styles/index.css";
+import {
+  RecoilRoot,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue,
+} from "recoil";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <RecoilRoot>
+      <Component {...pageProps} />
+    </RecoilRoot>
+  );
 }

pages/index.js

@@ -1,77 +1,21 @@
-import Header from "../components/header";
 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";
 
 export default function Home() {
   const feed = [1, 2, 3, 4, 5, 6, 7];
-  const data = {
-    loginUser: {
-      username: "anilsenay",
-      image:
-        "https://instagram.fsaw1-3.fna.fbcdn.net/v/t51.2885-19/s150x150/88129994_218553312873090_187843388282765312_n.jpg?_nc_ht=instagram.fsaw1-3.fna.fbcdn.net&_nc_ohc=siFEGZag29UAX9Sytdg&oh=56e1226fa0938ff569eb491980eb95a7&oe=5F4278CA",
-    },
-    stories: [
-      {
-        username: "testuser",
-        image: "https://picsum.photos/id/237/200/200",
-      },
-      {
-        username: "asafasaasc",
-        image: "https://picsum.photos/id/236/200/200",
-      },
-      {
-        username: "sadcasca",
-        image: "https://picsum.photos/id/238/200/200",
-      },
-      {
-        username: "sdsacasca",
-        image: "https://picsum.photos/id/239/200/200",
-      },
-      {
-        username: "xaxxsxa",
-        image: "https://picsum.photos/id/227/200/200",
-      },
-      {
-        username: "asd_sksc_s",
-        image: "https://picsum.photos/id/229/200/200",
-      },
-      {
-        username: "ascsama",
-        image: "https://picsum.photos/id/247/200/200",
-      },
-      {
-        username: "aaasccc",
-        image: "https://picsum.photos/id/240/200/200",
-      },
-      {
-        username: "anilsenay",
-        image: "https://picsum.photos/id/257/200/200",
-      },
-      {
-        username: "anilsenay1",
-        image: "https://picsum.photos/id/256/200/200",
-      },
-      {
-        username: "anilsenay2",
-        image: "https://picsum.photos/id/267/200/200",
-      },
-      {
-        username: "anilsenay3",
-        image: "https://picsum.photos/id/266/200/200",
-      },
-    ],
-  };
+
   return (
     <Layout user={data?.loginUser}>
       <div className="homepage-feed lg:mr-8 flex flex-col ">
         <Stories stories={data?.stories} />
-        {feed.map((item) => {
-          return <FeedItem data={item} key={item} />;
+        {data?.feed.map((item) => {
+          return <FeedItem data={item} key={item.pid} />;
         })}
       </div>
-      <HomeRightBar />
+      <HomeRightBar data={data.suggestions} />
     </Layout>
   );
 }