From 05413c32ab147091cbef8dc65a5b2c914b2cb764 Mon Sep 17 00:00:00 2001
From: Abhijith Muthyala <73361366+abhijithmuthyala@users.noreply.github.com>
Date: Sun, 13 Aug 2023 22:24:33 +0530
Subject: [PATCH 1/3] fix: ssg for home route
---
components/Loader/Preloader.tsx | 31 ++++++++++++++++++++++---------
hooks/useLoader.ts | 15 ---------------
2 files changed, 22 insertions(+), 24 deletions(-)
delete mode 100644 hooks/useLoader.ts
diff --git a/components/Loader/Preloader.tsx b/components/Loader/Preloader.tsx
index 0c1c2d31e..7943feec9 100644
--- a/components/Loader/Preloader.tsx
+++ b/components/Loader/Preloader.tsx
@@ -1,23 +1,36 @@
-import useLoader from 'hooks/useLoader'
+import { useEffect, useState } from 'react'
import { Spinner } from './Spinner'
+const LOADER_TIMEOUT = 2000
+
export const Preloader = ({
backgroundColor,
children,
- ...rest
+ ...spinnerProps
}: {
children: JSX.Element
backgroundColor: string
color: string
size: number
}): JSX.Element => {
- const { loader } = useLoader()
- if (!loader) return children
+ const [showLoader, setShowLoader] = useState(true)
+
+ useEffect(() => {
+ setTimeout(() => {
+ setShowLoader(false)
+ }, LOADER_TIMEOUT)
+ })
+
return (
-
-
-
+ <>
+ {children}
+ {showLoader && (
+
+
+
+ )}
+
)
}
diff --git a/hooks/useLoader.ts b/hooks/useLoader.ts
deleted file mode 100644
index d6f299ff2..000000000
--- a/hooks/useLoader.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-const useLoader = () => {
- const [loader, setLoader] = useState(true)
-
- useEffect(() => {
- setTimeout(() => {
- setLoader(false)
- }, 2000)
- })
-
- return { loader }
-}
-
-export default useLoader
From 7c688fc6f973888390215e27e20b4a2fc265071d Mon Sep 17 00:00:00 2001
From: Abhijith Muthyala <73361366+abhijithmuthyala@users.noreply.github.com>
Date: Mon, 14 Aug 2023 15:34:43 +0530
Subject: [PATCH 2/3] fix: ssg for /[subcategory]
---
database/data.ts | 6 ++++--
hooks/useFilterDB.ts | 20 +++++++++++--------
pages/[subcategory]/index.tsx | 36 ++++++++++++++++++++++++++---------
pages/index.tsx | 1 +
types/index.ts | 5 -----
5 files changed, 44 insertions(+), 24 deletions(-)
diff --git a/database/data.ts b/database/data.ts
index a947c1aa5..a39a6cda5 100644
--- a/database/data.ts
+++ b/database/data.ts
@@ -75,7 +75,7 @@ export const sidebarData: ISidebar[] = [
},
{ name: 'database', url: '/database', resources: DB.database },
{
- name:'APIs',
+ name: 'APIs',
url: '/api',
resources: DB.api,
}
@@ -123,7 +123,7 @@ export const sidebarData: ISidebar[] = [
{
name: 'Videos',
url: '/open-source-videos',
- resources: DB.openSourceVideos,
+ resources: DB.openSourceVideos,
},
],
},
@@ -269,3 +269,5 @@ export const sidebarData: ISidebar[] = [
],
},
]
+
+export const subCategories = sidebarData.flatMap(({ subcategory }) => subcategory.map(({ url }) => url.replace('/', '')))
\ No newline at end of file
diff --git a/hooks/useFilterDB.ts b/hooks/useFilterDB.ts
index 90238bdaa..61d643104 100644
--- a/hooks/useFilterDB.ts
+++ b/hooks/useFilterDB.ts
@@ -1,18 +1,20 @@
import { database } from 'database/data'
import { useRouter } from 'next/router'
-import { IData, IUseFilterDBResponse } from 'types'
+import { IData } from 'types'
+import { useResults } from './ResultsContext'
-const useFilterDB = (): IUseFilterDBResponse => {
+const useFilterDB = (subcategory: string) => {
const router = useRouter()
- const { subcategory } = router.query
- if (typeof subcategory !== 'string') {
- throw new Error(
- 'UseFilterDB Error: Response of Router Query is not a string'
- )
+ const { results } = useResults()
+
+ let pageCategory = subcategory
+ if (typeof window !== 'undefined') {
+ pageCategory = router.asPath.slice(1)
}
+
// This filters trough the DB with the subcategory which results in an array of arrays
const filterSubCat = database?.map((item) =>
- item?.filter((cat: IData) => cat.subcategory.includes(subcategory))
+ item?.filter((cat: IData) => cat.subcategory.includes(pageCategory))
)
// This filters out an empty array from the filterSubCat
@@ -21,6 +23,8 @@ const useFilterDB = (): IUseFilterDBResponse => {
return {
filterSubCat,
filterDB,
+ results,
+ pageCategory
}
}
diff --git a/pages/[subcategory]/index.tsx b/pages/[subcategory]/index.tsx
index 2c64e8ea2..1eed7060b 100644
--- a/pages/[subcategory]/index.tsx
+++ b/pages/[subcategory]/index.tsx
@@ -1,20 +1,22 @@
import React from 'react'
import { TopBar } from 'components/TopBar/TopBar'
-import { useRouter } from 'next/router'
import Head from 'next/head'
import useFilterDB from 'hooks/useFilterDB'
import CardsList from 'components/Cards/CardsList'
import ComingSoon from 'components/NewIssue/NewIssue'
-import { useResults } from 'hooks/ResultsContext'
-const SubCategory = () => {
- const router = useRouter()
- const { results } = useResults()
- const title = `LinksHub - ${router.asPath
- .charAt(1)
- .toUpperCase()}${router.asPath.slice(2)}`
- const { filterDB } = useFilterDB()
+import { subCategories } from 'database/data'
+import { GetStaticProps, NextPage } from 'next'
+import { ParsedUrlQuery } from 'querystring'
+interface PageProps {
+ subcategory: string
+}
+
+interface Params extends ParsedUrlQuery, PageProps{}
+const SubCategory: NextPage = ({subcategory}) => {
+ const {filterDB, results, pageCategory} = useFilterDB(subcategory)
+ const title = `LinksHub - ${pageCategory[0].toUpperCase() + pageCategory.slice(1)}`
let content: JSX.Element[] | JSX.Element
if (filterDB.length > 0) {
@@ -95,4 +97,20 @@ const SubCategory = () => {
)
}
+export const getStaticPaths = async () => {
+ const paths = subCategories.map(subcategory => ({
+ params: {subcategory}
+ }))
+
+ return {paths, fallback: false}
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const {subcategory} = context.params as Params
+
+ return {props: {
+ subcategory
+ }}
+}
+
export default SubCategory
diff --git a/pages/index.tsx b/pages/index.tsx
index c6567a872..f95d0e303 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head'
import Logo from 'components/logo/logo'
import TypewriterComponent from 'typewriter-effect'
import { sidebarData } from '../database/data'
+
export default function Home() {
//storing sub categories names for using in typewriter effect
const subCategoriesNames: string[] = []
diff --git a/types/index.ts b/types/index.ts
index a413c891d..2cdc4e25c 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -68,11 +68,6 @@ export interface IContext {
toggleNav?: () => void
}
-export interface IUseFilterDBResponse {
- filterSubCat: IData[][]
- filterDB: IData[][]
-}
-
export const subcategoryArray = [
// devops
'cicd',
From 181f4ee3bcb77362844abeea54dbbd723beb640b Mon Sep 17 00:00:00 2001
From: Abhijith Muthyala <73361366+abhijithmuthyala@users.noreply.github.com>
Date: Mon, 14 Aug 2023 15:57:43 +0530
Subject: [PATCH 3/3] fix: cleanup effect
---
components/Loader/Preloader.tsx | 6 ++++--
pages/[subcategory]/index.tsx | 1 +
2 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/components/Loader/Preloader.tsx b/components/Loader/Preloader.tsx
index 7943feec9..302018188 100644
--- a/components/Loader/Preloader.tsx
+++ b/components/Loader/Preloader.tsx
@@ -16,10 +16,12 @@ export const Preloader = ({
const [showLoader, setShowLoader] = useState(true)
useEffect(() => {
- setTimeout(() => {
+ const timerId = setTimeout(() => {
setShowLoader(false)
}, LOADER_TIMEOUT)
- })
+
+ return () => {clearTimeout(timerId)}
+ }, [])
return (
<>
diff --git a/pages/[subcategory]/index.tsx b/pages/[subcategory]/index.tsx
index 1eed7060b..89f0c6f7c 100644
--- a/pages/[subcategory]/index.tsx
+++ b/pages/[subcategory]/index.tsx
@@ -8,6 +8,7 @@ import ComingSoon from 'components/NewIssue/NewIssue'
import { subCategories } from 'database/data'
import { GetStaticProps, NextPage } from 'next'
import { ParsedUrlQuery } from 'querystring'
+
interface PageProps {
subcategory: string
}