refactor!: Updated routing and removed references to portal in app

components/molecules/SelectableTable/selectable-table.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Icon from "components/atoms/Icon/icon";
 import { Checkbox } from "@supabase/ui";
 import ForkIcon from "public/icons/fork-icon.svg";
 import StarIcon from "public/icons/star-icon.svg";
 import Person from "public/icons/person-icon.svg";
 import Icon3 from "public/icons/icon3.svg";
 import ComponentHeader from "../ComponentHeader/component-header";
-import { truncateString } from "../../../lib/funcs/truncate-string";
+import { truncateString } from "../../../lib/utils/truncate-string";
 
 type ParticipantsRow = {
   title: string;
@@ -32,10 +32,18 @@ const iconSuite = {
 };
 
 const SelectableTable: React.FC<SelectableTableProps> = ({ title, tableType, rows }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [divSize, setDivSize] = useState(0);
+
+  useEffect(() => {
+    if(ref.current) setDivSize(ref.current.offsetWidth);
+  }, []);
+
   return (
     <>
       <ComponentHeader title={title} />
-      <div>
+      <div ref={ref}>
         <table className="table-auto w-full">
           <thead className="border-b-[1px]">
             <tr>
@@ -63,7 +71,7 @@ const SelectableTable: React.FC<SelectableTableProps> = ({ title, tableType, row
               return (
                 <tr className={`hover:content-['${row.title}']`} key={index}>
                   <td className="flex flex-row text-left p-2">
-                    <Checkbox label=""/> {window.innerWidth < 425 ? truncateString(row.title, 3) : row.title}
+                    <Checkbox label=""/> {divSize > 0 && divSize < 350 ? truncateString(row.title, 3) : row.title}
                   </td>
                   <td className="text-right p-2">
                     {row.stars}%

components/organisms/ToolsDisplay/tools-display.tsx

@@ -1,19 +1,18 @@
-import { useRouter } from "next/router";
 import React from "react";
 import Card from "../../atoms/Card/card";
 import SelectableTable from "components/molecules/SelectableTable/selectable-table";
 import ScatterChart from "components/molecules/ScatterChart/scatter-chart";
 import HighlightCard from "components/molecules/HighlightCard/highlight-card";
 import { testRows, extendedTestRows, testOptions } from "./fake-data";
 
-const Tool: React.FC = () => {
-  const router = useRouter();
+interface ToolProps {
+  tool?: string;
+}
 
-  const { tool } = router.query;
-
+const Tool: React.FC<ToolProps> = ({ tool }) => {    
   return (
     <div className="flex flex-col w-full gap-4">
-      {tool === "Dashboard" ?
+      {!tool ?
         <>
           <div className="flex flex-wrap gap-4 items-center lg:flex-row lg:flex-nowrap max-w-full">
             <HighlightCard

components/organisms/header/header.tsx

@@ -19,7 +19,7 @@ const Header: React.FC = () => {
       </div>
       <div className="header-info flex flex-col grow justify-center p-2">
         <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">Hacktoberfest 2022</Title>
-        <Text className="mt-1 !text-base font-medium text-slate-500">Open source projects and samples for Microsoft.</Text> {/* Find out what this means */}
+        <Text className="mt-1 !text-base font-medium text-slate-500">Open source projects and samples for Microsoft.</Text>
         <div className="flex mt-4">
           <FilterCard filterName="hacktoberfest" isRemovable={false} icon="topic" />
           {filterorg && <FilterCard filterName={filterorg as string} bgColor="white"/>}

components/organisms/toolist/nav.tsx

@@ -10,34 +10,34 @@ type toolListArray = {
 interface NavProps {
   toolList: toolListArray[];
   selectedTool: string | string[] | undefined;
-  portalName: string | string[] | undefined;
+  filterName: string | string[] | undefined;
 }
 
-const Nav: React.FC<NavProps> = ({ toolList, selectedTool, portalName }) => {
+const Nav: React.FC<NavProps> = ({ toolList, selectedTool = "dashboard", filterName }) => {
 
   return (
     <nav 
       role="tablist"
       aria-orientation="horizontal"
       aria-label="Browse the tools"
       tabIndex={0}
-      className="tool-list-nav flex w-[100vw] overflow-x-auto overflow-y-hidden gap-2 px-4 md:px-16 bg-slate-50 border-b pt-3">
+      className="tool-list-nav flex w-[100vw] 2xl:w-full overflow-x-auto overflow-y-hidden gap-2 px-4 md:px-16 bg-slate-50 border-b pt-3">
 
       {toolList.map((tool, index) => 
         <div
           role="tab"
-          aria-selected={selectedTool === tool.name ? "true" : "false"}
-          data-state={selectedTool === tool.name ? "active" : "inactive"}
+          aria-selected={selectedTool === tool.name.toLowerCase() ? "true" : "false"}
+          data-state={selectedTool === tool.name.toLowerCase() ? "active" : "inactive"}
           tabIndex={-1}
-          key={index} className={`tool-list-item ${selectedTool === tool.name ? "" : ""}`}>
+          key={index} className={`tool-list-item ${selectedTool === tool.name.toLowerCase() ? "" : ""}`}>
           <Link
-            href={tool.name === "nextjs" ?
-              `${portalName}` :
-              `${portalName}?tool=${tool.name}`
+            href={tool.name === "Dashboard" ?
+              `/${filterName}` :
+              `/${filterName}/${tool.name.toLowerCase()}`
             }
           >
-            <Button size="xlarge" type="text" className={`!px-2 md:!px-4  hover:!bg-slate-100 after:block after:absolute after:inset-x-0 after:-bottom-0.5 after:h-0.5 after:rounded-lg ${selectedTool === tool.name ? "after:bg-orange-500" : "focus:after:bg-slate-400"} focus:bg-slate-100 focus:ring-slate-300 child:flex child:items-center`}>
-              <span className={"text-base whitespace-nowrap " + (selectedTool === tool.name ? "text-slate-900" : "text-slate-500")}>
+            <Button size="xlarge" type="text" className={`!px-2 md:!px-4  hover:!bg-slate-100 after:block after:absolute after:inset-x-0 after:-bottom-0.5 after:h-0.5 after:rounded-lg ${selectedTool === tool.name.toLowerCase() ? "after:bg-orange-500" : "focus:after:bg-slate-400"} focus:bg-slate-100 focus:ring-slate-300 child:flex child:items-center`}>
+              <span className={"text-base whitespace-nowrap " + (selectedTool === tool.name.toLowerCase() ? "text-slate-900" : "text-slate-500")}>
                 {tool.name}
               </span>
               {

layouts/portal.tsx → layouts/filter.tsx

@@ -5,20 +5,20 @@ import Nav from "../components/organisms/toolist/nav";
 import TopNav from "../components/organisms/TopNav/top-nav";
 import useNav from "lib/hooks/useNav";
 
-const PortalLayout = ({children}: {children: React.ReactNode}) => {
+const FilterLayout = ({children}: {children: React.ReactNode}) => {
 
-  const { toolList, selectedTool, portalName } = useNav();
+  const { toolList, selectedTool, filterName } = useNav();
 
   return (
     <>
       <TopNav />
-      <div className="page-container flex min-h-[88vh] flex-col items-center justify-center">
+      <div className="page-container flex min-h-[88vh] flex-col items-center">
         <div className="info-container min-w-full min-h-[100px]">
           <Header />
           <Nav
             toolList={toolList}
-            selectedTool={selectedTool}
-            portalName={portalName}
+            selectedTool={selectedTool && selectedTool.toString()}
+            filterName={filterName}
           />
         </div>
 
@@ -31,4 +31,4 @@ const PortalLayout = ({children}: {children: React.ReactNode}) => {
   );
 };
 
-export default PortalLayout;
+export default FilterLayout;

lib/hooks/useNav.ts

@@ -35,14 +35,14 @@ const useNav = () => {
     }
   ];
 
-  const { portalName, tool: selectedTool } = router.query;
+  const { filterName, toolName: selectedTool } = router.query;
 
   const toolList = defaultTools;
 
   return {
     toolList,
     selectedTool,
-    portalName
+    filterName
   };
 };
 

lib/utils/changeCapitalization.ts

@@ -0,0 +1,8 @@
+const changeCapitalization = (string: string, isMakeUppercase: boolean) => {
+  const firstLetterInPath = 0;
+  const tempString = string.slice(firstLetterInPath);
+  if(isMakeUppercase) return tempString.charAt(0).toUpperCase() + tempString.slice(1);
+  return tempString.charAt(0).toLowerCase() + tempString.slice(1);
+};
+
+export default changeCapitalization;

pages/[filterName]/[toolName].tsx

@@ -0,0 +1,19 @@
+import FilterLayout from "../../layouts/filter";
+import { WithPageLayout } from "../../interfaces/with-page-layout";
+import { useRouter } from "next/router";
+import Tool from "components/organisms/ToolsDisplay/tools-display";
+import changeCapitalization from "lib/utils/changeCapitalization";
+
+const Filter: WithPageLayout = () => {
+  const router = useRouter();
+
+  const { toolName } = router.query;
+
+  return (
+    <Tool tool={toolName && changeCapitalization(toolName.toString(), true)} />
+  );
+};
+
+Filter.PageLayout = FilterLayout;
+
+export default Filter;

pages/[filterName]/index.tsx

@@ -0,0 +1,13 @@
+import FilterLayout from "../../layouts/filter";
+import { WithPageLayout } from "../../interfaces/with-page-layout";
+import Tool from "../../components/organisms/ToolsDisplay/tools-display";
+
+const Filter: WithPageLayout = () => {
+  return (
+    <Tool />
+  );
+};
+
+Filter.PageLayout = FilterLayout;
+
+export default Filter;