[#53] Improve handle error

nextjs-13/src/app/newsletter/[id]/page.test.tsx

@@ -40,15 +40,15 @@ describe('ViewNewsletter', () => {
       expect(screen.getByTestId('clip-loader')).toBeInTheDocument();
     });
 
-    it('NOT renders NewsletterDetail', async () => {
+    it('does NOT render NewsletterDetail', async () => {
       render(<ViewNewsletter />);
 
       expect(screen.queryByTestId('newsletter')).not.toBeInTheDocument();
     });
   });
 
   describe('given NOT fetching data', () => {
-    it('NOT renders ClipLoader', async () => {
+    it('does NOT render ClipLoader', async () => {
       render(<ViewNewsletter />);
 
       await waitFor(() => {

nextjs-13/src/app/newsletter/[id]/page.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { Suspense, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ClipLoader } from 'react-spinners';
 
 import { useParams, redirect } from 'next/navigation';
 
 import NewsletterDetail from '@components/NewsletterDetail';
 import requestManager from 'lib/request/manager';
-import makeToast from 'lib/toast/makeToast';
 
 const ViewNewsletter = () => {
   const [record, setRecord] = useState([]);
+  const [hasError, setHasError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const params = useParams();
@@ -25,9 +25,8 @@ const ViewNewsletter = () => {
       setIsLoading(false);
       setRecord(response.record);
     } catch (error) {
-      makeToast(error.message, 'error');
+      setHasError(true);
       setIsLoading(false);
-      redirect('/auth/sign-in');
     }
   };
 
@@ -36,6 +35,10 @@ const ViewNewsletter = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (hasError) redirect('/auth/sign-in');
+  }, [hasError]);
+
   return (
     <div className="view-newsletter" data-testid="view-newsletter">
       {isLoading ? (

nextjs-13/src/components/NewsletterDetail/index.test.tsx

@@ -13,7 +13,7 @@ describe('NewsletterDetail', () => {
     await waitFor(() => expect(screen.getByTestId('newsletter')).toBeVisible());
   });
 
-  it('renders list of newsletters', async () => {
+  it('renders a newsletter', async () => {
     const record = {
       id: newsletterFactory.id,
       name: newsletterFactory.name,