From 2b4e9230a2dfb51df1dcf46c6607008ac8c6f517 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C4=B1l=20=C5=9Eenay?= <anilsenay3@gmail.com>
Date: Mon, 3 Aug 2020 00:34:33 +0300
Subject: [PATCH] components feeding from our 'fake' api now

---
 components/header.js         | 36 ++++++++++++++++++-------------
 components/home-right-bar.js | 42 ++++++++++++++++++++----------------
 components/profile_pic.js    |  4 ++--
 components/stories.js        | 12 +++++------
 4 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/components/header.js b/components/header.js
index c06f820..6263b56 100644
--- a/components/header.js
+++ b/components/header.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useLayoutEffect } from "react";
 import { useRouter } from "next/router";
 
 import SearchBar from "./search_bar";
@@ -13,7 +13,7 @@ import ActivityIconActive from "./icons/activity_icon_active";
 import ProfilePic from "./profile_pic";
 import Clickable from "./clickable";
 
-import { useLoginUserData } from "../hooks/global_hook";
+import LoginUserHook from "../hooks/global_hook";
 
 export default function Header({ user }) {
   const router = useRouter();
@@ -44,7 +44,9 @@ export default function Header({ user }) {
       <ActivityIcon className="header-icon" />
     );
 
-  const loginUserData = useLoginUserData();
+  const { data, setLoginUser } = LoginUserHook();
+  const loginUserData = data;
+
   return (
     <nav className="navigation fixed z-20 top-0">
       <div className="header-container">
@@ -57,18 +59,22 @@ export default function Header({ user }) {
           <Clickable href="/messages">{messages}</Clickable>
           <Clickable href="/explore">{explore}</Clickable>
           <Clickable href="/activity">{activity}</Clickable>
-          <ProfilePic
-            className={
-              loginUserData.username === user ? "header-profile-pic-border" : ""
-            }
-            src={loginUserData?.image}
-            username={loginUserData?.username}
-            style={{
-              padding: loginUserData.username === user ? "2px" : "3px",
-              marginLeft: "-2px",
-            }}
-            size={22}
-          />
+          {user && (
+            <ProfilePic
+              className={
+                loginUserData.username === user
+                  ? "header-profile-pic-border"
+                  : ""
+              }
+              src={loginUserData?.image}
+              username={loginUserData?.username}
+              style={{
+                padding: loginUserData.username === user ? "2px" : "3px",
+                marginLeft: "-2px",
+              }}
+              size={22}
+            />
+          )}
         </div>
       </div>
     </nav>
diff --git a/components/home-right-bar.js b/components/home-right-bar.js
index 210787c..e8892f2 100644
--- a/components/home-right-bar.js
+++ b/components/home-right-bar.js
@@ -2,30 +2,34 @@ import React from "react";
 import ProfilePic from "./profile_pic";
 import RightBarSuggestions from "./right-bar-suggestions";
 import UsernameText from "./username-text";
-import { useLoginUserData } from "../hooks/global_hook";
+import LoginUserHook from "../hooks/global_hook";
 
 export default function HomeRightBar({ data }) {
-  const loginUserData = useLoginUserData();
+  const loginUserData = LoginUserHook().data;
 
   return (
     <div className="suggestions hidden lg:flex lg:flex-col">
-      <div className="right-bar-user-info flex items-center">
-        <ProfilePic
-          src={loginUserData.image}
-          size={56}
-          username={loginUserData.username}
-        />
-        <div className="user-info-texts ml-5 flex flex-col">
-          <UsernameText
-            style={{ paddingBottom: 2, paddingTop: 2 }}
-            username={loginUserData.username}
-          />
-          <span className="text-12-light">
-            {loginUserData?.name || "Name Surname"}
-          </span>
-        </div>
-      </div>
-      <RightBarSuggestions data={data} />
+      {data && (
+        <>
+          <div className="right-bar-user-info flex items-center">
+            <ProfilePic
+              src={loginUserData.image}
+              size={56}
+              username={loginUserData.username}
+            />
+            <div className="user-info-texts ml-5 flex flex-col">
+              <UsernameText
+                style={{ paddingBottom: 2, paddingTop: 2 }}
+                username={loginUserData.username}
+              />
+              <span className="text-12-light">
+                {loginUserData.name || "Name Surname"}
+              </span>
+            </div>
+          </div>
+          <RightBarSuggestions data={data} />
+        </>
+      )}
     </div>
   );
 }
diff --git a/components/profile_pic.js b/components/profile_pic.js
index 7762888..9562127 100644
--- a/components/profile_pic.js
+++ b/components/profile_pic.js
@@ -2,8 +2,8 @@ import React from "react";
 import Router from "next/router";
 
 export default function ProfilePic({
-  src = "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",
-  username = "anilsenay",
+  src,
+  username,
   size,
   border,
   href,
diff --git a/components/stories.js b/components/stories.js
index 147b28b..759ae1a 100644
--- a/components/stories.js
+++ b/components/stories.js
@@ -12,12 +12,11 @@ export default function Stories({ stories }) {
 
   useEffect(() => {
     if (windowRef.current.clientWidth > 0) {
-
       ((windowRef.current.clientWidth / 80) | 0) !== maxItems &&
         ((windowRef.current.clientWidth / 80) | 0) <= 7 &&
         setMaxItems((windowRef.current.clientWidth / 80) | 0);
 
-      setMinX(-((stories.length - maxItems) * 80 + (5 - maxItems) * 15));
+      setMinX(-((stories?.length - maxItems) * 80 + (5 - maxItems) * 15));
     }
   });
 
@@ -44,11 +43,12 @@ export default function Stories({ stories }) {
           className="stories-feed-floating flex relative transition ease-linear duration-300"
           style={{ transform: `translate(${x}px, 0px)` }}
         >
-          {stories.map((item) => {
-            return <StoryItem data={item} key={item.username} />;
-          })}
+          {stories &&
+            stories.map((item) => {
+              return <StoryItem data={item} key={item.username} />;
+            })}
         </div>
-        {x !== min_X && stories.length > maxItems && (
+        {x !== min_X && stories?.length > maxItems && (
           <ArrowButton
             place="right"
             text=">"