Merge pull request #11 from Will513r/chris/state-handler

Chris/state handler
Will513r · Aug 16, 2024 · 8eec636 · 8eec636
2 parents 24c03f1 + 74715db
commit 8eec636
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
@@ -29,6 +31,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
+    "uuidv4": "^6.2.13",
     "vite": "^5.3.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,15 +2,18 @@ import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 import { Mainpage } from "./components/Mainpage";
 import { Sidebar } from "./components/Sidebar";
+import { useState } from "react";
 
 export default function App() {
+  const [selectedPost, setSelectedPost] = useState(0);
+
   return (
     <div className="w-full bg-slate-200 dark:bg-slate-900">
       <div className="m-auto flex h-screen min-w-96 max-w-7xl flex-col bg-zinc-50 dark:bg-black dark:text-white">
-        <Header />
+        <Header setHeaderNavigation={setSelectedPost} />
         <div className="flex">
-          <Sidebar />
-          <Mainpage />
+          <Sidebar setSelectedPost={setSelectedPost} />
+          <Mainpage selectedPost={selectedPost} />
         </div>
         <Footer />
       </div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,40 +1,33 @@
-export function Header() {
+// import { useState } from "react";
+
+type HeaderProps = {
+  setHeaderNavigation: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export function Header({ setHeaderNavigation }: HeaderProps) {
+  function resetPageNumber() {
+    setHeaderNavigation(0);
+  }
   return (
     <header className="bg-black">
       <div className="container mx-auto flex items-center justify-between px-10 py-6">
         <div>
-          <h1 className="bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text text-4xl font-bold text-transparent hover:cursor-pointer">
-            React Blog
-          </h1>
+          <span
+            onClick={resetPageNumber}
+            className="bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text text-4xl font-bold text-transparent hover:cursor-pointer"
+          >
+            <a href="/Mainpage">React Blog</a>
+          </span>
         </div>
         <nav className="flex items-center">
           <ul className="hidden items-center space-x-4 sm:flex">
-            <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                Home
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                About
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                Posts
-              </a>
+            <li
+              onClick={resetPageNumber}
+              className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
+            >
+              <a href="/Mainpage">Home</a>
             </li>
           </ul>
-
           <div className="ml-8 hidden items-center space-x-4 md:flex lg:ml-12"></div>
         </nav>
       </div>

diff --git a/src/components/Mainpage.tsx b/src/components/Mainpage.tsx
@@ -1,14 +1,26 @@
-// import { PostPreview } from "./PostPreview";
-import { data } from "../content/content";
+import { PostPreview } from "./PostPreview";
+import { data, PostData } from "../content/content";
 import { Post } from "./Post";
+import { v4 as uuidv4 } from "uuid";
+type MainpageProps = {
+  selectedPost: number;
+};
 
-export function Mainpage() {
+const postData = [
+  data.map((post) => {
+    return <PostPreview key={uuidv4()} post={post} />;
+  }),
+  ...data,
+];
+
+export function Mainpage({ selectedPost }: MainpageProps) {
   return (
     <main className="container m-0 flex h-[calc(100vh_-_12.5rem)] flex-col overflow-scroll bg-white p-4">
-      {/* {data.map((post) => {
-        return <PostPreview post={post} />;
-      })} */}
-      <Post post={data[0]} />
+      {selectedPost > 0 ? (
+        <Post post={postData[selectedPost] as PostData} />
+      ) : (
+        (postData[0] as React.ReactNode[])
+      )}
     </main>
   );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,11 +1,21 @@
 import { useState } from "react";
+import { data } from "../content/content";
+import { v4 as uuidv4 } from "uuid";
 
-export function Sidebar() {
+type SidebarProps = {
+  setSelectedPost: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export function Sidebar({ setSelectedPost }: SidebarProps) {
   const [isOpen, setIsOpen] = useState(false);
 
-  const toggleSidebar = () => {
+  function toggleSidebar() {
     setIsOpen(!isOpen);
-  };
+  }
+
+  function selectPost(selection: number) {
+    setSelectedPost(selection);
+  }
   return (
     <>
       <button
@@ -48,46 +58,20 @@ export function Sidebar() {
             Posts
           </h1>
           <div className="list-none rounded-md bg-white text-center">
-            <li className="border-b-2 py-3">
-              <a
-                href="#"
-                className="text-1xl bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text font-bold text-transparent hover:cursor-pointer"
-              >
-                Post 1
-              </a>
-            </li>
-            <li className="border-b-2 py-3">
-              <a
-                href="#"
-                className="text-1xl bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text font-bold text-transparent hover:cursor-pointer"
-              >
-                Post 2
-              </a>
-            </li>
-            <li className="border-b-2 py-3">
-              <a
-                href="#"
-                className="text-1xl bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text font-bold text-transparent hover:cursor-pointer"
-              >
-                Post 3
-              </a>
-            </li>
-            <li className="border-b-2 py-3">
-              <a
-                href="#"
-                className="text-1xl bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text font-bold text-transparent hover:cursor-pointer"
-              >
-                Post 4
-              </a>
-            </li>
-            <li className="py-3">
-              <a
-                href="#"
-                className="text-1xl bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text font-bold text-transparent hover:cursor-pointer"
-              >
-                Post 5
-              </a>
-            </li>
+            {data.map((_, index) => {
+              const postNumber = index + 1;
+              return (
+                <li
+                  key={uuidv4()}
+                  className="text-1xl border-b-2 bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text py-3 font-bold text-transparent hover:cursor-pointer"
+                  onClick={() => {
+                    selectPost(postNumber);
+                  }}
+                >
+                  Post {postNumber}
+                </li>
+              );
+            })}
           </div>
         </div>
       </aside>