feat: migrate context (#2701)

Co-authored-by: Akshat Nema <[email protected]>

context/AppContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { AppContextType } from '@/types/context/AppContext';
+
+export default createContext<AppContextType>({ path: "" });

context/BlogContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { IDocs } from '@/types/post';
+
+export default createContext<IDocs>([]);

context/DocsContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { DocsContextType } from '@/types/context/DocsContext';
+
+const initialDocsContext: DocsContextType = {
+  post: [],
+  navItems: {},
+};
+
+export default createContext<DocsContextType>(initialDocsContext);

context/GenericPostContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { IDocs } from '@/types/post';
+
+export default createContext<IDocs>([]);

context/ToolFilterContext.tsx

@@ -0,0 +1,50 @@
+import { useRouter } from 'next/router';
+import { createContext, useEffect, useState } from 'react';
+
+interface ToolFilterContextProps {
+  isPaid: string;
+  isAsyncAPIOwner: boolean;
+  languages: string[];
+  technologies: string[];
+  categories: string[];
+}
+
+export const ToolFilterContext = createContext<ToolFilterContextProps>({
+  isPaid: "all",
+  isAsyncAPIOwner: false,
+  languages: [],
+  technologies: [],
+  categories: [],
+});
+
+function ToolFilter({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const [isPaid, setIsPaid] = useState<string>("all");
+  const [isAsyncAPIOwner, setIsAsyncAPIOwner] = useState<boolean>(false);
+  const [languages, setLanguages] = useState<string[]>([]);
+  const [technologies, setTechnologies] = useState<string[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+
+  // useEffect has been used to apply filters to the tool on each change of router query
+  useEffect(() => {
+    if (!router || !router.isReady) return;
+
+    let { pricing, owned, langs, techs, categories } = router.query;
+
+    setIsPaid(pricing as string || "all");
+    setIsAsyncAPIOwner(owned === "true");
+    setLanguages((langs as string)?.split(",") || []);
+    setTechnologies((techs as string)?.split(",") || []);
+    setCategories((categories as string)?.split(",") || []);
+  }, [router?.query]);
+
+  return (
+    <ToolFilterContext.Provider
+      value={{ isPaid, isAsyncAPIOwner, languages, technologies, categories }}
+    >
+      {children}
+    </ToolFilterContext.Provider>
+  );
+}
+
+export default ToolFilter;

types/context/AppContext.ts

@@ -0,0 +1,3 @@
+export interface AppContextType {
+    path: string;
+}

types/context/DocsContext.ts

@@ -0,0 +1,14 @@
+import { IDocs } from "../post";
+
+export interface NavigationItem {
+    title: string;
+}
+
+export interface NavigationItems {
+    [key: string]: NavigationItem;
+}
+
+export interface DocsContextType {
+    post: IDocs;
+    navItems: NavigationItems;
+}