Merge pull request #16 from Friendsofthepeople/issues

add issued and update sidebar

app/api/issues/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+const base_url = process.env.BASE_URL;
+const token = process.env.ACCESS_TOKEN
+
+export async function GET(req: any) {
+  const endpoint = `${base_url}/api/issues/`;
+
+  try {
+
+    const response = await fetch(endpoint, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${token}`}
+      })
+
+    if (response.ok) {
+      const res = await response.json();
+      return NextResponse.json({
+        data: res,
+      });
+    } else {
+      const error = await response.json();
+
+      return NextResponse.json(
+        {
+          error,
+        },
+        {
+          status: response.status,
+        },
+      );
+    }
+  } catch (error: any) {
+    return NextResponse.json(
+      {
+        message: "Failed to connect to the server.",
+        error: error.message,
+      },
+      {
+        status: 500,
+      },
+    );
+  }
+}

app/dashboard/components/SideBar.tsx

@@ -1,14 +1,21 @@
 "use client"
 
-import React, { useState } from 'react'
+import React, { FC, useState } from 'react'
 import { TbGavel, TbLayoutDashboard } from "react-icons/tb";
 import { LuHistory } from "react-icons/lu";
 import { FaRegCircleUser } from "react-icons/fa6";
 import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdOutlineLogout, MdOutlineChat, MdOutlineCalendarMonth, } from "react-icons/md";
 
-function SideBar() {
+
+
+interface SideBarProps{
+  handleSetActiveView : (viewName: string) => void
+}
+
+const SideBar: FC<SideBarProps> = ({handleSetActiveView}) => {
   // State to keep track of the active button
   const [activeButton, setActiveButton] = useState<string | null>(null);
+  const [activeView, setActiveView] = useState<string | null>(null);
   const [expanded, setExpanded] = useState<boolean>(true)
 
   // Function to handle button click and update active state
@@ -17,8 +24,9 @@ function SideBar() {
   };
 
   // Function to handle button click and update active state
-  const handleButtonClick = (buttonName: string) => {
+  const handleButtonClick = (buttonName: string, viewName: string) => {
     setActiveButton(buttonName);
+    handleSetActiveView(viewName)
   };
 
   function MenuItem({ icon, label, isActive, onClick }: {
@@ -57,35 +65,35 @@ function SideBar() {
         <MenuItem
           icon={<TbLayoutDashboard size={20} />}
           label="Dashboard" isActive={activeButton === 'dashboard'}
-          onClick={() => handleButtonClick('dashboard')} />
+          onClick={() => handleButtonClick('dashboard', 'issues')} />
         <MenuItem
           icon={<TbGavel size={20} />}
           label="Law" isActive={activeButton === 'Law'}
-          onClick={() => handleButtonClick('Law')} />
+          onClick={() => handleButtonClick('Law', 'law')} />
         <MenuItem
           icon={<LuHistory size={20} />}
           label="History" isActive={activeButton === 'History'}
-          onClick={() => handleButtonClick('History')} />
+          onClick={() => handleButtonClick('History', 'history')} />
         <MenuItem
           icon={<MdOutlineChat size={20} />}
           label="Discussions" isActive={activeButton === 'Discussions'}
-          onClick={() => handleButtonClick('Discussions')} />
+          onClick={() => handleButtonClick('Discussions', 'discussions')} />
 
         <MenuItem
           icon={<MdOutlineCalendarMonth size={20} />}
           label="Calendar" isActive={activeButton === 'Calendar'}
-          onClick={() => handleButtonClick('Calendar')} />
+          onClick={() => handleButtonClick('Calendar', 'calender')} />
         <MenuItem
           icon={<FaRegCircleUser size={20} />}
           label="Profile" isActive={activeButton === 'Profile'}
-          onClick={() => handleButtonClick('Profile')} />
+          onClick={() => handleButtonClick('Profile', 'profile')} />
       </div>
 
       <div>
         <MenuItem
           icon={<MdOutlineLogout size={20} />}
           label="Logout" isActive={activeButton === 'Logout'}
-          onClick={() => handleButtonClick('Logout')} />
+          onClick={() => handleButtonClick('Logout', 'logout')} />
 
       </div>
 

app/dashboard/page.tsx

@@ -1,13 +1,17 @@
 "use client"
 
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import Link from 'next/link'
 import { TbLayoutDashboard } from "react-icons/tb";
 import { TbGavel } from "react-icons/tb";
 import { LuHistory } from "react-icons/lu";
 import { MdOutlineChat } from "react-icons/md";
 import { MdOutlineCalendarMonth } from "react-icons/md";
 import { FaRegCircleUser } from "react-icons/fa6";
+import TopNavBar from './components/TopNavBar';
+import SideBar from './components/SideBar';
+import Issues from './views/Issues';
+import Law from './views/Law';
 
 interface userResponse {
   data: {
@@ -20,7 +24,8 @@ interface userResponse {
 function Page() {
   // const [user, setUser] = useState([]);
   // const [error, setError] = useState(null);
-
+  const [activeView, setActiveView] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchUser = async () => {
       try {
@@ -34,8 +39,21 @@ function Page() {
     fetchUser();
   }, []);
 
+  const handleSetActiveView = (viewName: string) => {
+    setActiveView(viewName)
+  }
 
   return (
+    <>
+    <TopNavBar />
+        <div className='flex items-start'>
+          <div className="sticky top-0 flex-start ">
+            <SideBar handleSetActiveView={handleSetActiveView}/>
+          </div>
+          <div className='flex-end w-full'>
+            {activeView == 'issues' ? <Issues /> :
+            activeView == 'law' ? <Law /> : (
+
     <div className='pt-[60px] lg:pt-[75px] px-2'>
       <div className='hidden lg:flex items-center gap-2 pt-4'>
         <button className='border-2 border-[#01C909] rounded-xl py-1 px-2 text-center'>
@@ -208,6 +226,12 @@ function Page() {
 
 
     </div>
+            )}
+
+          </div>
+        </div> 
+    </>
+
   )
 }
 

app/dashboard/views/Issues.tsx

@@ -0,0 +1,83 @@
+import { issuesData } from "@/app/types";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+function Issues() {
+  const [issues, setIssues] = useState<[]>();
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const router = useRouter();
+
+  const handleGetIssues = async () => {
+    const res = await fetch("/api/issues", {
+      method: "GET",
+    });
+
+    const data = await res.json();
+    console.log("data from issues", data);
+    setIssues(data.data);
+  };
+
+  useEffect(() => {
+    handleGetIssues();
+  }, []);
+
+  return (
+    <div className="pt-[60px] lg:pt-[75px] px-2">
+      <div className="hidden lg:flex items-center gap-2 pt-4">
+        <button className="border-2 border-[#01C909] rounded-xl py-1 px-2 text-center">
+          <Link href="#">Vote Now</Link>
+        </button>
+        <button className="border-2 border-[#01C909] rounded-xl py-1 px-2 text-center">
+          <Link href="#">View new laws</Link>
+        </button>
+        <button className="border-2 border-[#01C909] rounded-xl py-1 px-2 text-center">
+          <Link href="#">Explore discussions</Link>
+        </button>
+      </div>
+
+      {issues &&
+        issues.map((issue: issuesData) => {
+          return (
+            <div key={issue.id} className="bg-[#f8f9fb] rounded-xl p-2 ">
+              <p className="p-2 text-[18px] text-semibold">Parliament</p>
+
+              <div className="bg-white rounded-xl p-2">
+                <p className="text-[16px] text-semibold">
+                  {issue.serial}:{issue.title}
+                </p>
+                <p className="text-[#a7a7ae] text-[14px]">{issue.content}</p>
+                <p className="text-[#a7a7ae] text-[14px]">......</p>
+
+                <p className="text-[#a7a7ae] text-[14px]">
+                  Status:{" "}
+                  <span className="text-bold text-[#000000]">
+                    {issue.status}
+                  </span>
+                </p>
+                <p className="text-[#a7a7ae] text-[14px]">
+                  Deadline for voting:{" "}
+                  <span className="text-bold text-[#000000]">
+                    {issue.deadline}
+                  </span>
+                </p>
+
+                <div className="flex items-center gap-2">
+                  <button className="border-2 border-[#01C909] rounded-xl py-1 px-2 text-center">
+                    <Link href="#">Read more</Link>
+                  </button>
+                  <button className="border-2 border-[#01C909] bg-[#01C909] rounded-xl py-1 px-2 text-center">
+                    <Link href="#">Vote Now</Link>
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default Issues;

app/dashboard/views/Law.tsx

@@ -0,0 +1,46 @@
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react'
+
+function Law() {
+
+    const [issues, setIssues] = useState("");
+
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
+
+    const router = useRouter();
+
+    const handleGetIssues = async () => {
+
+      const res = await fetch("/api/issues", {
+        method: "GET",
+        // headers: {
+        //   "Content-Type": "application/json",
+        // },
+      });
+
+      const data = await res.json();
+      console.log("data from issues", data);
+
+      if (res.ok) {
+        setSuccess("issues successful!");
+        setError("");
+        // router.push("/dashboard");
+      } else {
+        setError(data.message);
+        setSuccess("");
+      }
+    };
+
+
+
+  return (
+    <div>
+        <p>Bonga is a unique and exciting platform designed to empower you to speak up and make a real impact on the issues that matter most to you. The name {'"'}Bonga{'"'} comes from the Swahili word meaning {'"'}speak up,{'"'} and that{"'"}s exactly what we want you to do here!</p>
+        <p>Whether it{"’"}s about new laws being debated, how public funds are being used, or any other issue affecting your community, Bonga gives you the tools to have your voice heard and make a difference.</p>
+      <p>Law</p>
+    </div>
+  )
+}
+
+export default Law

app/types/index.ts

@@ -1,7 +1,20 @@
 export interface userData {
-    data:{
-        email: string;
-        id: string;
-        id_number: string;
-    }
-}
+  data: {
+    email: string;
+    id: string;
+    id_number: string;
+  };
+}
+
+export interface issuesData {
+
+    author: string;
+    content: string;
+    created_at: string;
+    deadline: string;
+    id: string;
+    serial: string;
+    status: string;
+    title: string;
+
+}