feat: restructuring database (#187)

* [new-resource] feat: added new resource  chores: made some cleanups

* [clean-up] chores: made some cleanup and added new resource - category:backend subcategory:validation

* chores: refactoring database setup

* chores: refactoring database setup

* chores: refactoring database setup

* chores: refactoring database setup

assets/icons/SearchIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { SVGProps } from "react";
+const SearchIcon = ({ ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+export default SearchIcon;

components/BackToTop/BackToTopButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { FaArrowUp } from "react-icons/fa";
-import { SCROLL_LIMIT } from "../../app/constants";
+import { SCROLL_LIMIT } from "app/constants";
 
 export const BackToTopButton = () => {
   const [scrollY, setScrollY] = useState(0);
@@ -17,30 +17,30 @@ export const BackToTopButton = () => {
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
-
   }, []);
 
   const handleClick = () => {
     window.scrollTo({
       top: 0,
       behavior: "smooth",
-    })
-  }
+    });
+  };
 
   if (scrollY > SCROLL_LIMIT) {
     return (
       <div className="group fixed bottom-12 right-12 z-20">
-        <button 
+        <button
           className="focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600"
-          onClick={handleClick}>
+          onClick={handleClick}
+        >
           <FaArrowUp className="group-hover:text-violet-500" />
         </button>
         <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
           👾
         </span>
       </div>
-    )
+    );
   }
 
   return null;
-}
+};

components/Loader/Preloader.tsx

@@ -1,12 +1,24 @@
-import { Spinner } from "./Spinner"
+import useLoader from "hooks/useLoader";
+import { ReactNode } from "react";
+import { Spinner } from "./Spinner";
 
-export const Preloader = ({backgroundColor, spinnerColor, spinnerSize}:{backgroundColor: string, spinnerColor:string, spinnerSize: number}) => {
-    return (
-        <div className={`loader ${backgroundColor} fixed top-0 left-0 w-full h-screen flex justify-center items-center`}>
-            <Spinner
-                spinnerColor={spinnerColor}
-                spinnerSize={spinnerSize}
-            />
-        </div>
-    )
-}
+export const Preloader = ({
+  backgroundColor,
+  children,
+  ...rest
+}: {
+  children: JSX.Element;
+  backgroundColor: string;
+  color: string;
+  size: number;
+}): JSX.Element => {
+  const { loader } = useLoader();
+  if (!loader) return children;
+  return (
+    <div
+      className={`loader ${backgroundColor} fixed top-0 left-0 w-full h-screen flex justify-center items-center`}
+    >
+      <Spinner {...rest} />
+    </div>
+  );
+};

components/Loader/Spinner.tsx

@@ -1,13 +1,8 @@
-import Gridloader from "react-spinners/GridLoader"
-
-export const Spinner = ({spinnerColor, spinnerSize}:{spinnerColor:string, spinnerSize:number}) => {
+import Gridloader from "react-spinners/GridLoader";
+import { LengthType } from "react-spinners/helpers/props";
 
+export const Spinner = (props: { color: string; size: LengthType }) => {
   return (
-    <Gridloader
-      color= {spinnerColor}
-      size={spinnerSize}
-      aria-label="Loading Spinner"
-      data-testid="loader"
-    />
+    <Gridloader {...props} aria-label="Loading Spinner" data-testid="loader" />
   );
 };

components/Searchbar/Searchbar.tsx

@@ -1,9 +1,9 @@
-interface SearchbarProps {
-  setSearch: (search: string) => void;
-}
+import SearchIcon from "assets/icons/SearchIcon";
+import { ChangeEvent } from "react";
+import { SearchbarProps } from "types";
 
 export const Searchbar = ({ setSearch }: SearchbarProps) => {
-  const handleSearch = (e: any) => {
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
   };
 
@@ -13,20 +13,8 @@ export const Searchbar = ({ setSearch }: SearchbarProps) => {
         Search
       </label>
       <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 pl-3 flex items-center justify-center pointer-events-none">
-          <svg
-            aria-hidden="true"
-            className="w-5 h-5 text-violet-500 dark:text-violet-500"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <SearchIcon className="w-5 h-5 text-violet-500 dark:text-violet-500" />
         </div>
         <input
           type="text"

components/SideNavbar/SideNavbar.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 import { Searchbar } from "../Searchbar";
-import useSidebarSearch from "../../hooks/useSidebarSearch";
+import useSidebarSearch from "hooks/useSidebarSearch";
 import { createRef, useContext, useEffect } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
-import { GlobalContext } from "../../context/GlobalContext";
+import { GlobalContext } from "context/GlobalContext";
 import Logo from "../logo";
 import { SideNavbarElement } from "./SideNavbarElement";
 import classNames from "classnames";

components/ThemeToggler/themeToggler.tsx

@@ -1,23 +1,29 @@
 import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 
-import { HiSun, HiMoon  } from "react-icons/hi";
+import { HiSun, HiMoon } from "react-icons/hi";
 
 export function ThemeToggler() {
-    const { resolvedTheme, setTheme } = useTheme();
-    const [mounted, setMounted] = useState(false);
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
-    useEffect(() => { setMounted(true) }, []);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-    if (!mounted) return <></>;
+  if (!mounted) return <></>;
 
-    return (
-        <button
-            onClick={() => {
-                setTheme(resolvedTheme === "dark" ? "light" : "dark");
-            }}
-        >
-            {resolvedTheme === "dark" ? <HiSun className='text-white hover:text-violet-500' size={'1.5rem'} /> : <HiMoon className='hover:text-violet-500' size={'1.5rem'}/>}
-        </button>
-    );
-}
+  return (
+    <button
+      onClick={() => {
+        setTheme(resolvedTheme === "dark" ? "light" : "dark");
+      }}
+    >
+      {resolvedTheme === "dark" ? (
+        <HiSun className="text-white hover:text-violet-500" size={"1.5rem"} />
+      ) : (
+        <HiMoon className="hover:text-violet-500" size={"1.5rem"} />
+      )}
+    </button>
+  );
+}

components/TopBar/TopBar.tsx

@@ -1,11 +1,11 @@
-import { useRouter } from 'next/router';
-import { IconContext } from 'react-icons';
-import { FaGithub, FaSlackHash } from 'react-icons/fa';
-import { ThemeToggler } from '../ThemeToggler/themeToggler';
+import { useRouter } from "next/router";
+import { IconContext } from "react-icons";
+import { FaGithub, FaSlackHash } from "react-icons/fa";
+import { ThemeToggler } from "../ThemeToggler/themeToggler";
 
 export const TopBar = ({ header }: { header?: string }) => {
   const router = useRouter();
-  const category = router.asPath.replace('/', '');
+  const category = router.asPath.replace("/", "");
   return (
     <div className="flex items-center justify-between mb-4 xs:overflow-x-hidden">
       <div className="flex items-center my-4 dark:text-gray-300 sm:text-3xl xs:text-2xl">
@@ -23,9 +23,9 @@ export const TopBar = ({ header }: { header?: string }) => {
           href="https://github.com/rupali-codes/LinksHub"
         >
           <IconContext.Provider
-            value={{ className: 'shared-class', size: '28' }}
+            value={{ className: "shared-class", size: "28" }}
           >
-            <FaGithub className='hover:text-violet-500' />
+            <FaGithub className="hover:text-violet-500" />
           </IconContext.Provider>
         </a>
         <ThemeToggler />

components/cards/index.tsx

@@ -1,17 +1,21 @@
 import { useRouter } from "next/router";
 import React from "react";
-import { data } from "../../database/data";
-import { IData } from "../../types";
 import { LinkContainer } from "../LinksContainer/LinkContainer";
 import { BackToTopButton } from "../BackToTop/BackToTopButton";
+import * as DB from "database";
 
 const Cards = () => {
   const router = useRouter();
+  const { subcategory } = router.query;
 
-  const filterDB = data.filter((item) =>
-    item.subcategory
-      .toLowerCase()
-      .includes(router.asPath.replace("/", "").toLowerCase())
+  // This filters trough the DB with the subcategory which results in an array of arrays
+  const filterSubCat = Object.values(DB)?.map((item: any) =>
+    item?.filter((cat: any) => cat.subcategory.includes(subcategory))
+  );
+
+  // This filters out an empty array from the filterSubCat
+  const filterDB = filterSubCat.filter(
+    (item: any, index: number) => item.length !== 0
   );
 
   return (
@@ -20,16 +24,16 @@ const Cards = () => {
         filterDB.length < 3 && "lg:justify-start"
       }`}
     >
-      {filterDB?.map((data: IData, key: number) => (
+      {filterDB[0]?.map((data: any, key: number) => (
         <LinkContainer
           name={data.name}
           description={data.description}
           url={data.url}
           key={key + "-" + data.name}
         />
       ))}
-      <div className="">
-        {filterDB.length === 0 && (
+      <div>
+        {filterDB?.length === 0 && (
           <p>
             <span className="text-purple-500 animate-pulse font-semibold text-2xl">
               Coming

context/GlobalContext.tsx

@@ -1,5 +1,5 @@
 import { useReducer, createContext, ReactNode } from "react";
-import { IContext } from "../types";
+import { IContext } from "types";
 import GlobalReducer from "./GlobalReducer";
 
 const initialState: IContext = {
@@ -39,4 +39,4 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => {
   );
 };
 
-export {GlobalContext,GlobalProvider};
+export { GlobalContext, GlobalProvider };

database/Readme.md

@@ -0,0 +1,25 @@
+#Database instructions
+
+<ul>
+<li>
+A newly created category and subcategiry should be added to the data file
+</li>
+<li>A category has it's own folder</li>
+<li>
+A subcategory is contained in a category folder
+</li>
+
+<li>
+When a new category is added ensure to create a folder for it
+</li>
+<li>
+When a new subcategory is added ensure to create a json file for it and place in its respective category
+</li>
+<li>
+Add your resources to the subcategory json file of your choice
+</li>
+<li>
+Export the newly created json file on the index file
+</li>
+
+</ul>

database/backend/authentication.json

@@ -0,0 +1 @@
+[]

database/backend/caching.json

@@ -0,0 +1 @@
+[]

database/backend/security.json

@@ -0,0 +1 @@
+[]

database/backend/testing.json

@@ -0,0 +1 @@
+[]

database/backend/validation.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "66",
+    "name": "Express Validator",
+    "description": "Express validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.",
+    "url": "https://express-validator.github.io/docs/",
+    "category": "backend",
+    "subcategory": "validation"
+  }
+]