sending data as props for now, but need a global state

anilsenay · Jul 23, 2020 · 3615411 · 3615411
1 parent 2415596
commit 3615411
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 10 deletions.
diff --git a/components/header.js b/components/header.js
@@ -7,7 +7,7 @@ import ActivityIcon from "./icons/activity_icon";
 import ProfilePic from "./profile_pic";
 import Clickable from "./clickable";
 
-export default function Header() {
+export default function Header({ user }) {
   return (
     <nav className="navigation fixed z-20 top-0">
       <div className="header-container">
@@ -28,7 +28,11 @@ export default function Header() {
           <Clickable href="/activity">
             <ActivityIcon className="header-icon" />
           </Clickable>
-          <ProfilePic href="/profile" size={22} />
+          <ProfilePic
+            src={user?.image}
+            username={user?.username || "anilsenay"}
+            size={22}
+          />
         </div>
       </div>
     </nav>

diff --git a/components/layout.js b/components/layout.js
@@ -1,10 +1,10 @@
 import React from "react";
 import Header from "./header";
 
-export default function Layout({ children }) {
+export default function Layout({ children, user }) {
   return (
     <div className="container">
-      <Header />
+      <Header user={user} />
       <div className="homepage-container flex justify-center">{children}</div>
     </div>
   );

diff --git a/components/stories.js b/components/stories.js
@@ -1,10 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import StoryItem from "./story-item";
 import Box from "./box";
-import Clickable from "./clickable";
 
-export default function Stories() {
-  const stories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export default function Stories({ stories }) {
   const [x, setX] = useState(0);
   const [maxItems, setMaxItems] = useState(7);
 

diff --git a/components/story-item.js b/components/story-item.js
@@ -17,7 +17,7 @@ export default function StoryItem({ data }) {
         ></ProfilePic>
       </div>
       <UsernameText
-        username="username"
+        username={data?.username || "username"}
         className="story-username text-black text-12-light mt-1"
       />
     </div>

diff --git a/pages/index.js b/pages/index.js
@@ -6,10 +6,67 @@ import HomeRightBar from "../components/home-right-bar";
 
 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>
+    <Layout user={data?.loginUser}>
       <div className="homepage-feed lg:mr-8 flex flex-col ">
-        <Stories />
+        <Stories stories={data?.stories} />
         {feed.map((item) => {
           return <FeedItem data={item} key={item} />;
         })}

diff --git a/styles/index.css b/styles/index.css
@@ -107,6 +107,12 @@ body {
   background: linear-gradient(45deg, #f37b12, #c62d90);
   border-radius: 100%;
 }
+.story-username {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 80px;
+  text-align: center;
+}
 
 .stories-button {
   position: absolute;