Update to follow-up state management replacement

- Ref: 80fba05

Author: junekimdev

components/errors/errorsStates.ts

@@ -1,3 +1,3 @@
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 
-export const code = atom({ key: 'error-code', default: 500 });
+export const code = atom(500);

components/errors/errorsViewImage.tsx

@@ -1,13 +1,13 @@
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRecoilValue } from 'recoil';
 import imageSrc404 from '../../public/assets/images/404_broken_robot.png';
 import imageSrc500 from '../../public/assets/images/500_faulty_dog.png';
 import styles from './errors.module.scss';
 import { code } from './errorsStates';
 
 const View = () => {
-  const errorCode = useRecoilValue(code);
+  const errorCode = useAtomValue(code);
 
   return (
     <div className={styles.errorImage}>

components/example/examplePresenter.tsx

@@ -1,11 +1,11 @@
 import { placeholderUrl } from '../../controllers/apiURLs';
-import { staticQuery } from '../../controllers/net/staticQuery';
+import { useStaticQuery } from '../../controllers/net/staticQuery';
 import styles from './example.module.scss';
 import { ExamplePost } from './exampleType';
 import Posts from './exampleViewPosts';
 
 const Presenter = () => {
-  const query = staticQuery<ExamplePost[]>(placeholderUrl);
+  const query = useStaticQuery<ExamplePost[]>(placeholderUrl);
 
   let contents;
   switch (query.status) {

components/meta/gtm.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import { useEffect } from 'react';
 

controllers/net/staticQuery.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
-export const staticQuery = <T = unknown>(url: string) => {
+export const useStaticQuery = <T = unknown>(url: string) => {
   return useQuery<T, Error, T, string[]>({
     queryKey: ['static', url],
     queryFn: async ({ queryKey }) => {

pages/404.tsx

@@ -1,17 +1,17 @@
+import { useSetAtom } from 'jotai';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
 import Errors from '../components/errors';
 import { code } from '../components/errors/errorsStates';
 import Meta from '../components/meta';
 
 const Error404 = () => {
   const publicUrl = process.env.PUBLIC_URL || 'localhost:3000';
-  const setErrorCode = useSetRecoilState(code);
+  const setErrorCode = useSetAtom(code);
 
   useEffect(() => {
     setErrorCode(404);
     window.scrollTo(0, 0);
-  }, []);
+  }, [setErrorCode]);
 
   return (
     <>

pages/_app.tsx

@@ -1,22 +1,22 @@
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Provider } from 'jotai';
 import { AppProps } from 'next/app';
 import { useState } from 'react';
-import { RecoilRoot } from 'recoil';
 import './global.scss';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(() => new QueryClient());
 
   return (
-    <RecoilRoot>
+    <Provider>
       <QueryClientProvider client={queryClient}>
         <HydrationBoundary state={pageProps.dehydratedState}>
           <Component {...pageProps} />
         </HydrationBoundary>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
-    </RecoilRoot>
+    </Provider>
   );
 }
 

pages/_error.tsx

@@ -1,6 +1,6 @@
+import { useSetAtom } from 'jotai';
 import { NextPageContext } from 'next';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
 import Errors from '../components/errors';
 import { code } from '../components/errors/errorsStates';
 import Meta from '../components/meta';
@@ -9,15 +9,15 @@ type ErrorCodeType = { statusCode: number };
 
 const Error = ({ statusCode }: ErrorCodeType) => {
   const publicUrl = process.env.PUBLIC_URL || 'localhost:3000';
-  const setErrorCode = useSetRecoilState(code);
+  const setErrorCode = useSetAtom(code);
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
   useEffect(() => {
     setErrorCode(statusCode);
-  }, [statusCode]);
+  }, [setErrorCode, statusCode]);
 
   return (
     <>

templates/interactor.ejs

@@ -1,10 +1,10 @@
 <% const camelName = name.charAt(0).toUpperCase() + name.slice(1) -%>
+import { useSetAtom } from 'jotai';
 import { MouseEvent, useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
 import { <%=camelName%>State } from './<%=name%>States';
 
 export const useLinkClick = () => {
-  const setState = useSetRecoilState(<%=camelName%>State);
+  const setState = useSetAtom(<%=camelName%>State);
 
   return useCallback((e: MouseEvent<HTMLAnchorElement>) => {
     const id: string = e.target.id ?? '';

templates/states.ejs

@@ -1,5 +1,5 @@
 <% const camelName = name.charAt(0).toUpperCase() + name.slice(1) -%>
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 import { <%=camelName%>Type } from './<%=name%>Type';
 
-export const <%=camelName%>State = atom<<%=camelName%>Type>({ key: '<%=camelName%>State', default: undefined });
+export const <%=camelName%>State = atom<<%=camelName%>Type>();