My Recipe 페이지 및 RequireAuth 완성, 버그 수정 #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

hanana1253 merged 10 commits into TeamCooks:develop from hanana1253:develop

Apr 1, 2022

src/components/Auth/Auth.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
       const toggleCurrentForm = () => {
         setCurrentForm(currentForm === AUTH_STATE.signin ? AUTH_STATE.signup : AUTH_STATE.signin);
+        setAuthError(false);
       };
       const handleSubmit = async (values: FormValues) => {
@@ Expand All @@
           setAuthError(true);
         }
       };
       return (
         <Dialog label={currentForm} onClose={onClose}>
           <StyledAuthContainer>
@@ Expand Down @@

src/components/Menu/Menu.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { useState } from 'react';

    import { useState, useEffect } from 'react';

    import { useRouter } from 'next/router';

    import { actions } from 'store/slices/auth';

    import { IconButton, Button } from 'components';

    @@ -27,19 +27,19 @@ export const Menu = ({ onSignOut }: MenuProps) => {
  
        onSignOut();

      };

      // const router = useRouter();

      const router = useRouter();

      // useEffect(() => {

      //   const handleRouteChange = () => {

      //     setIsOpen(false);

      //   };

      useEffect(() => {

        const handleRouteChange = () => {

          setIsOpen(false);

        };

      //   router.events.on('routeChangeStart', handleRouteChange);

        router.events.on('routeChangeStart', handleRouteChange);

      //   return () => {

      //     router.events.off('routeChangeStart', handleRouteChange);

      //   };

      // }, []);

        return () => {

          router.events.off('routeChangeStart', handleRouteChange);

        };

      }, []);

      return (

        <StyledNav onBlur={handleBlur}>

src/components/Pagination/Pagination.styled.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,10 @@ export const StyledPaginationControl = styled.div` @@
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: ${pxToRem(20)};
+      gap: ${pxToRem(10)};
+      svg {
+        display: block;
+      }
       ul {
         display: flex;
         justify-content: center;
@@ Expand All @@
       background-color: ${({ theme, $current }) => ($current ? theme.color.primaryOrange : theme.color.white)};
       width: ${pxToRem(32)};
       height: ${pxToRem(32)};
-      margin: ${pxToRem(6)};
-      &:hover {
-        opacity: 0.5;
-      }
     `;

src/components/Pagination/Pagination.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,15 +1,16 @@
  
    import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';

    import { IoEllipsisHorizontalSharp } from 'react-icons/io5';

    import { usePageNum } from 'hooks/usePageNum';

    import { PaginationProps } from './Pagination.types';

    import { StyledPageButton, StyledPaginationControl } from './Pagination.styled';

    export const Pagination = ({ limit, currentPage, onClick: handleClick, totalResults }: PaginationProps) => {

      const { pageStartNum, pageEndNum } = usePageNum({ currentPage, totalResults, limit });

      const { pageStartNum, pageEndNum, moreThanFirst, lessThanLast } = usePageNum({ currentPage, totalResults, limit });

      return (

        <StyledPaginationControl>

          <StyledPageButton

            type="button"

            aria-label="Go to previous results page."

            aria-label="Go to previous page."

            onClick={() => {

              if (currentPage === 1) return;

              handleClick(currentPage - 1);

    @@ -18,6 +19,19 @@ export const Pagination = ({ limit, currentPage, onClick: handleClick, totalResu
  
            <IoIosArrowBack />

          </StyledPageButton>

          <ul>

            {moreThanFirst && (

              <li>

                <StyledPageButton

                  type="button"

                  aria-label="Go to previous results."

                  onClick={() => {

                    handleClick(currentPage - 3);

                  }}

                >

                  <IoEllipsisHorizontalSharp />

                </StyledPageButton>

              </li>

            )}

            {Array.from({ length: pageEndNum - pageStartNum + 1 }, (_, index) => {

              return (

                <li key={index}>

    @@ -35,10 +49,21 @@ export const Pagination = ({ limit, currentPage, onClick: handleClick, totalResu
  
                </li>

              );

            })}

                  {lessThanLast && (

          <StyledPageButton

            type="button"

            aria-label="Go to next results."

            onClick={() => {

              handleClick(currentPage + 3);

            }}

          >

            <IoEllipsisHorizontalSharp />

          </StyledPageButton>

                  )}

          </ul>

          <StyledPageButton

            type="button"

            aria-label="Go to next results page."

            aria-label="Go to next page."

            onClick={() => {

              if (currentPage > Math.floor(totalResults / limit)) return;

              handleClick(currentPage + 1);

src/components/SearchForm/SearchForm.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,8 +7,7 @@ export const SearchForm = () => { @@
       const router = useRouter();
-      /*
-      TODO: 스토리북에서 next.js 설정 후 주석 해제
       useEffect(() => {
         const handleRouteChange = () => {
           setKeyword('');
@@ Expand All / @@ -20,15 +19,13 @@ export const SearchForm = () => { @@
           router.events.off('routeChangeStart', handleRouteChange);
         };
       }, []);
-      */
       const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setKeyword(e.target.value);
       };
       const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        setKeyword('');
         if (keyword.trim()) {
           router.push(`/search/${keyword}`);
         } else {
@@ Expand Down @@

src/hooks/usePageNum.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,9 @@ export const usePageNum = ({ @@
         const lastPageNum = Math.ceil(totalResults / limit);
         const pageStartNum = Math.max(currentPage - 2, 1);
         const pageEndNum = Math.min(currentPage + 2, lastPageNum);
-        return { pageStartNum, pageEndNum };
+        const pageLength = pageEndNum - pageStartNum + 1;
+        const moreThanFirst = currentPage > 3;
+        const lessThanLast =currentPage < lastPageNum - 2
+        return { pageStartNum, pageEndNum, moreThanFirst, lessThanLast, pageLength };
       }, [currentPage, totalResults, limit]);
     };

src/pages/my-recipes.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,74 @@
+    import { NextPage } from 'next';
+    import Head from 'next/head';
+    import { useState, useEffect } from 'react';
+    import { useSelector } from 'react-redux';
+    import { RootState } from 'store';
+    import { AuthState } from 'store/slices/auth';
+    import { getMyRecipes } from 'api/customApi';
+    import { Loading, CardList, Meta, EmptyPage, Heading, Pagination } from 'components';
+    import { SearchRecipeItem } from 'store/services/types/queries';
+    import { useRouter } from 'next/router';
+    const RESULTS_PER_PAGE = 12;
+    const MyRecipes: NextPage = () => {
+      const { authUser, isLoading: authLoading } = useSelector<RootState, AuthState>((state) => state.auth);
+      const [recipesToBeDisplayed, setRecipesToBeDisplayed] = useState<SearchRecipeItem[]>([]);
+      const [myRecipes, setMyRecipes] = useState([]);
+      const [isLoading, setIsLoading] = useState(true);
+      const [currentPage, setCurrentPage] = useState(1);
+      const router = useRouter();
+      useEffect(() => {
+        if (!authLoading && !authUser ) router.push('/');
+      }, [authLoading, authUser]);
+      useEffect(() => {
+        if (!authUser) return;
+        (async () => {
+          const data = await getMyRecipes(authUser);
+          setMyRecipes(data);
+          setRecipesToBeDisplayed(data.slice(0, RESULTS_PER_PAGE));
+          setIsLoading(false);
+        })();
+      }, [authUser]);
+      useEffect(() => {
+        setRecipesToBeDisplayed(myRecipes.slice((currentPage - 1) * RESULTS_PER_PAGE, currentPage * RESULTS_PER_PAGE));
+        window.scrollTo(0, 0);
+      }, [currentPage]);
+      if (isLoading) return <Loading message="Loading my recipes" showBackground={false} />;
+      return (
+        <>
+          <Head>
+            <title>My Recipes - TwoSpoon</title>
+            <Meta
+              data={{
+                title: 'My Recipes - TwoSpoon',
+              }}
+            />
+          </Head>
+          {myRecipes.length === 0 ? (
+            <EmptyPage>
+              <Heading as="h2">Nothing saved</Heading>
+              <p>Save recipes!</p>
+            </EmptyPage>
+          ) : (
+            <>
+              {/* <Heading as="h2" style={{ textAlign: 'center' }}>
+                My Recipes
+              </Heading> */}
+              <CardList results={recipesToBeDisplayed} />
+              <Pagination
+                limit={RESULTS_PER_PAGE}
+                onClick={setCurrentPage}
+                currentPage={currentPage}
+                totalResults={myRecipes.length}
+              />
+            </>
+          )}
+        </>
+      );
+    };
+    export default MyRecipes;

src/pages/myRecipes.tsx

This file was deleted.

src/pages/search/[keyword].tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import { Loading, Pagination } from 'components';
+    import { Loading, Pagination, Meta, CardList } from 'components';
     import { NextPage } from 'next';
     import Head from 'next/head';
     import { useEffect, useState } from 'react';
@@ Expand All @@
       const handleClick = (page: number) => {
         setCurrentPage(page);
       };
       return (
         <div>
           <Head>
-            <title>{`Searched: ${keyword}`}</title>
+            <title>{`Searched: ${keyword} - TwoSpoon`}</title>
+            <Meta
+              data={{
+                title: `Searched: ${keyword}`,
+              }}
+            />
           </Head>
           {currentPage !== 1 && isFetching && (
             <Loading message={`Loading ${currentPage} page of search results for ${keyword}`} showBackground />
-          )}
-          <ul>
-            {(currentPage === 1 ? results : currentResults).map(({ id, title, image }) => (
-              <li key={id}>{title}</li>
-            ))}
-          </ul>
+          )}c
+          <CardList results={currentPage === 1 ? results : currentResults} />
           <Pagination
             currentPage={currentPage}
             limit={RESULTS_PER_PAGE}
@@ Expand Down @@

src/store/slices/auth.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ export interface AuthState { @@
     const AuthSlice = createSlice({
       name: 'Auth',
-      initialState: { authUser: null, isLoading: false } as AuthState,
+      initialState: { authUser: null, isLoading: true } as AuthState,
       reducers: {
         loading: (state: AuthState, action: PayloadAction<boolean>) => ({
           ...state,
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Recipe 페이지 및 RequireAuth 완성, 버그 수정 #76

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!