From 7e95f2922a550a37e19dcf3f62ac1e5153eee3b5 Mon Sep 17 00:00:00 2001 From: calisio Date: Fri, 5 Jan 2024 17:45:22 -0300 Subject: [PATCH 1/3] feat: render categories and links in the left menu --- resources/js/Components/LeftMenu.tsx | 71 +++++++++++++++------------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/resources/js/Components/LeftMenu.tsx b/resources/js/Components/LeftMenu.tsx index 87921326d..be03a060a 100644 --- a/resources/js/Components/LeftMenu.tsx +++ b/resources/js/Components/LeftMenu.tsx @@ -5,7 +5,45 @@ import { BookOpenIcon, } from "@heroicons/react/24/solid"; +interface CategoryParameters { + categoryName: string; + linksArray: Array; +} +// had to add undefined to this, but not sure if that is not allowed +interface LinksArrayParameters { + [linkName: string]: string | undefined; +} + +function Category({categoryName, linksArray}:CategoryParameters) { + const linksList = linksArray.map((linkPair: { [x: string]: string | undefined; }) => { + const key = Object.keys(linkPair)[0]; + return ( +
  • + {key} +
    • + ) + }) + return( +
  • +
    + + + {categoryName} + +
      + {linksList} +
    +
    +
    • + ) +} + export default function LeftMenu() { + const categoryData = [{ name: "Category 1", links: [{ "Link 1 Name": "http://link1.com" }, { "Link 2 Name": "http://link2.com" }] }, { name: "Category 2", links: [{ "Link 1 Name": "http://link1.com" }, { "Link 2 Name": "http://link2.com" }] }]; + const categoryItems = categoryData.map((category) =>{ + return () + }); + return (
    • @@ -24,38 +62,7 @@ export default function LeftMenu() { Courses
      • -
    • -
      - - - Category 1 - - -
      -
      • -
    • -
      - - - Category 2 - - -
      -
      • + {categoryItems}
    ); } From 721a7b89c7a79410175fa0f6b6ee28d8c54c3a0e Mon Sep 17 00:00:00 2001 From: calisio Date: Tue, 16 Jan 2024 13:55:24 -0600 Subject: [PATCH 2/3] feat: Pull category data from api --- database/seeders/DatabaseSeeder.php | 6 ++- resources/js/Components/LeftMenu.tsx | 55 +++++++++++++++++++--------- 2 files changed, 43 insertions(+), 18 deletions(-) diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php index ab3825896..4b13dd1d8 100644 --- a/database/seeders/DatabaseSeeder.php +++ b/database/seeders/DatabaseSeeder.php @@ -28,7 +28,11 @@ public function run(): void DB::table('categories')->insert([ 'name' => 'Unlocked Labs', 'rank' => '1', - 'links' => '["http://www.unlockedlabs.org/"]', + 'links' => ' + [ + {"Unlocked Labs Website":"http://www.unlockedlabs.org/"}, + {"Unlocked Labs LinkedIn":"https://www.linkedin.com/company/labs-unlocked/"} + ]', ]); } } diff --git a/resources/js/Components/LeftMenu.tsx b/resources/js/Components/LeftMenu.tsx index be03a060a..de2a61205 100644 --- a/resources/js/Components/LeftMenu.tsx +++ b/resources/js/Components/LeftMenu.tsx @@ -1,48 +1,69 @@ +import axios from "axios"; import Brand from "./Brand"; import { HomeIcon, ArchiveBoxIcon, BookOpenIcon, } from "@heroicons/react/24/solid"; +import useSWR from "swr"; interface CategoryParameters { categoryName: string; linksArray: Array; + rank: number; } -// had to add undefined to this, but not sure if that is not allowed interface LinksArrayParameters { - [linkName: string]: string | undefined; + [linkName: string]: string; } -function Category({categoryName, linksArray}:CategoryParameters) { - const linksList = linksArray.map((linkPair: { [x: string]: string | undefined; }) => { +function Category({ categoryName, linksArray, rank }: CategoryParameters) { + const linksList = linksArray.map((linkPair: { [x: string]: string }) => { const key = Object.keys(linkPair)[0]; return ( -
  • +
  • {key}
    • - ) - }) - return( + ); + }); + return (
  • {categoryName} -
      - {linksList} -
    +
      {linksList}
    • - ) + ); +} + +function getCategoryItems() { + const { data, error, isLoading } = useSWR("/api/v1/categories", (url) => + axios.get(url).then((res) => res.data), + ); + if (error) return
    failed to load
    ; + if (isLoading) return
    loading...
    ; + return data.data.map( + (category: { + name: string; + rank: number; + links: LinksArrayParameters[]; + }) => { + return ( + + ); + }, + ); } - + export default function LeftMenu() { - const categoryData = [{ name: "Category 1", links: [{ "Link 1 Name": "http://link1.com" }, { "Link 2 Name": "http://link2.com" }] }, { name: "Category 2", links: [{ "Link 1 Name": "http://link1.com" }, { "Link 2 Name": "http://link2.com" }] }]; - const categoryItems = categoryData.map((category) =>{ - return () - }); + const categoryItems = getCategoryItems(); return (
      From 3e86f762b05460183dc4248d27bda5bf92300fed Mon Sep 17 00:00:00 2001 From: calisio Date: Thu, 18 Jan 2024 11:11:02 -0600 Subject: [PATCH 3/3] refactor: moves interface locations and properly calls hooks --- resources/js/Components/LeftMenu.tsx | 51 +++++++++++----------------- resources/js/common.ts | 10 ++++++ 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/resources/js/Components/LeftMenu.tsx b/resources/js/Components/LeftMenu.tsx index de2a61205..33fe7ce0b 100644 --- a/resources/js/Components/LeftMenu.tsx +++ b/resources/js/Components/LeftMenu.tsx @@ -6,17 +6,9 @@ import { BookOpenIcon, } from "@heroicons/react/24/solid"; import useSWR from "swr"; +import { Category, CategoryLink } from "@/common"; -interface CategoryParameters { - categoryName: string; - linksArray: Array; - rank: number; -} -interface LinksArrayParameters { - [linkName: string]: string; -} - -function Category({ categoryName, linksArray, rank }: CategoryParameters) { +function CategoryItem({ categoryName, linksArray, rank }: Category) { const linksList = linksArray.map((linkPair: { [x: string]: string }) => { const key = Object.keys(linkPair)[0]; return ( @@ -38,32 +30,29 @@ function Category({ categoryName, linksArray, rank }: CategoryParameters) { ); } -function getCategoryItems() { - const { data, error, isLoading } = useSWR("/api/v1/categories", (url) => - axios.get(url).then((res) => res.data), - ); +function getCategoryItems( + data: { data: { name: string; rank: number; links: CategoryLink[] }[] }, + error: any, + isLoading: boolean, +) { if (error) return
      failed to load
      ; if (isLoading) return
      loading...
      ; - return data.data.map( - (category: { - name: string; - rank: number; - links: LinksArrayParameters[]; - }) => { - return ( - - ); - }, - ); + return data.data.map((category) => { + return ( + + ); + }); } export default function LeftMenu() { - const categoryItems = getCategoryItems(); + const { data, error, isLoading } = useSWR("/api/v1/categories"); + + const categoryItems = getCategoryItems(data, error, isLoading); return (
        diff --git a/resources/js/common.ts b/resources/js/common.ts index 6b7d40ae1..bf03c411a 100644 --- a/resources/js/common.ts +++ b/resources/js/common.ts @@ -11,3 +11,13 @@ export interface User { role: string; email: string; } + +export interface Category { + categoryName: string; + linksArray: Array; + rank: number; +} + +export interface CategoryLink { + [linkName: string]: string; +}