From 6a349f2227bc8f028e6ee953fc2121f335584271 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 00:00:08 -0800
Subject: [PATCH] nice routing

---
 packages/web/.eslintrc.json            | 11 +++++++++--
 packages/web/components/v2/Sidebar.tsx | 11 ++++-------
 packages/web/pages/_app.tsx            | 12 ++++++++----
 packages/web/pages/s/index.tsx         | 12 +++++++-----
 packages/web/recoil/main.tsx           | 10 ++++++++++
 5 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 packages/web/recoil/main.tsx

diff --git a/packages/web/.eslintrc.json b/packages/web/.eslintrc.json
index 0f38229..d5c054b 100644
--- a/packages/web/.eslintrc.json
+++ b/packages/web/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "react-hooks"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
@@ -10,7 +10,14 @@
     // I suggest you add those two rules:
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error",
-    "prefer-const": "error"
+    "prefer-const": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useRecoilCallback|useRecoilTransaction_UNSTABLE)"
+      }
+    ]
   },
   "parser": "@typescript-eslint/parser"
 }
diff --git a/packages/web/components/v2/Sidebar.tsx b/packages/web/components/v2/Sidebar.tsx
index e03c4d2..29f998d 100644
--- a/packages/web/components/v2/Sidebar.tsx
+++ b/packages/web/components/v2/Sidebar.tsx
@@ -15,11 +15,13 @@ import {
 } from "react-icons/fa";
 import { HiSpeakerphone } from "react-icons/hi";
 import Routes from "@nirvana/common/helpers/routes";
-import Link from "next/link";
+import { useRecoilValue } from "recoil";
+import { currPagePath } from "../../recoil/main";
 
 function Sidebar() {
   const router = useRouter();
-  const currPage = router.pathname;
+
+  const currPage = useRecoilValue(currPagePath);
 
   const handleRoute = (route: Routes) => {
     router.push(route);
@@ -35,11 +37,6 @@ function Sidebar() {
 
       {/* navigation items */}
       <div className="flex flex-col my-5 space-y-5 w-full">
-        <Link href={Routes.convos}>{Routes.convos}</Link>
-        <Link href={Routes.later}>{Routes.later}</Link>
-        <Link href={Routes.done}>{Routes.done}</Link>
-        <Link href={Routes.drawer}>{Routes.drawer}</Link>
-
         <span
           onClick={() => handleRoute(Routes.convos)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index 77e154c..b029784 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -4,6 +4,8 @@ import { AuthProvider } from "../contexts/authContext";
 import SiteLayout from "../components/Layouts/SiteLayout";
 import { Toaster } from "react-hot-toast";
 
+import { RecoilRoot } from "recoil";
+
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 
@@ -24,11 +26,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
-    <SiteLayout>
-      <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
+    <RecoilRoot>
+      <SiteLayout>
+        <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
 
-      <Toaster position="top-center" />
-    </SiteLayout>
+        <Toaster position="top-center" />
+      </SiteLayout>
+    </RecoilRoot>
   );
 }
 
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index f20dff4..02da226 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -1,17 +1,19 @@
 import Routes from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { useRecoilState } from "recoil";
 import Conversations from "../../components/v2/Conversations";
-import Done from "../../components/v2/done";
-import Drawer from "../../components/v2/drawer";
+import Done from "../../components/v2/Done";
+import Drawer from "../../components/v2/Drawer";
 import Header from "../../components/v2/Header";
-import Later from "../../components/v2/later";
+import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
+import { currPagePath } from "../../recoil/main";
 
 export default function Me() {
   // figure out what content to render from here
   const router = useRouter();
-  const [currRoute, setCurrRoute] = useState<string>(router.pathname);
+  const [currRoute, setCurrRoute] = useRecoilState(currPagePath);
 
   useEffect(() => {
     const onHashChangeStart = (url) => {
diff --git a/packages/web/recoil/main.tsx b/packages/web/recoil/main.tsx
new file mode 100644
index 0000000..cd1fdfd
--- /dev/null
+++ b/packages/web/recoil/main.tsx
@@ -0,0 +1,10 @@
+import { atom } from "recoil";
+
+export enum RecoilActions {
+  CURR_PAGE_PATH = "CURR_PAGE_PATH",
+}
+
+export const currPagePath = atom({
+  key: RecoilActions.CURR_PAGE_PATH, // unique ID (with respect to other atoms/selectors)
+  default: "/s", // default value (aka initial value)
+});