refactor: refactor architecture

src/App.js

@@ -2,9 +2,10 @@ import './App.css';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import { AppHeader } from '@/features/layout/components';
+import { AppHeader } from '@/features/layout';
 import { LandingPage } from '@/pages/landing';
 import { PageNotFound } from '@/pages/page-not-found';
+import { ExploreMemes } from '@/pages/explore-memes';
 import Templates from './components/Templates/Templates';
 import MemeGenerator from './components/MemeGenerator/MemeGenerator';
 import Personal from './components/PersonalPage/Personal';
@@ -27,7 +28,7 @@ function App() {
         <Route path="/setting" component={Setting} />
         <Route path="/meme/:id" component={Meme} />
         <Route path="/public/:id" exact component={Public} />
-        <Route path="/explorememes" component={AllMemes} />
+        <Route path="/explorememes" component={ExploreMemes} />
         <Route path="/uploadtemplate" component={UploadTemplate} />
         <Route path="/search" component={AllMemes} />
         <Route path="*" component={PageNotFound} />

src/components/dialog/dialog-body.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledDialogBody } from './dialog.style';
 
 const DialogBody = ({ children, ...rest }) => {

src/components/dialog/dialog-content.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledDialogContent } from './dialog.style';
 
 const DialogContent = ({ children, ...rest }) => {

src/components/dialog/dialog-footer-close-button.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { useDialogContext } from './dialog';
 import { StyledDialogFooterCloseButton } from './dialog.style';
 

src/components/dialog/dialog-footer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledDialogFooter } from './dialog.style';
 
 const DialogFooter = ({ children, ...rest }) => {

src/components/dialog/dialog-header.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledDialogHeader } from './dialog.style';
 
 const DialogHeader = ({ children, ...rest }) => {

src/components/dialog/dialog-overlay.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledDialogOverlay } from './dialog.style';
 
 const DialogOverlay = ({ ...props }) => {

src/components/dialog/dialog.jsx

@@ -1,4 +1,9 @@
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo
+} from 'react';
 import { Portal } from '@/components/portal';
 
 const DialogContext = createContext(null);

src/components/dialog/dialog.style.js

@@ -41,6 +41,7 @@ export const StyledDialogFooterCloseButton = styled.button`
   font-size: 1rem;
   cursor: pointer;
   padding: 8px 16px;
+  color: inherit;
   &:first-child {
     margin-left: auto;
   }

src/components/input/input.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { useInputProps } from './use-input-props';
 import { StyledInput } from './input.style';
 

src/components/portal/portal.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createPortal } from 'react-dom';
 
 const Portal = ({

src/features/auth/components/login-dialog/login-dialog.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 // api
 import { nativeLogin } from '../../api';
 // components

src/features/auth/components/login-dialog/login-dialog.style.js

@@ -18,4 +18,5 @@ export const StyledButton = styled.button`
   cursor: pointer;
   padding: 8px 16px;
   margin-left: 16px;
+  color: inherit;
 `;

src/features/auth/components/signup-dialog/signup-dialog.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 // apis
 import { nativeSignup } from '../../api';
 // components

src/features/auth/components/signup-dialog/signup-dialog.style.js

@@ -18,5 +18,6 @@ export const StyledButton = styled.button`
   cursor: pointer;
   padding: 8px 16px;
   margin-left: 16px;
+  color: inherit;
 `;
 

src/features/auth/index.js

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './components';

src/features/layout/components/app-footer/app-footer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   StyledWrapper,
@@ -18,7 +17,8 @@ const AppFooter = () => {
         >
           <StyledGoLinkExternalIcon />
         </Link>
-        ，
+      </StyledFooterInfo>
+      <StyledFooterInfo>
         Copyright © Simone Cheng, 2021
         <Link
           to="https://github.com/SimoneCheng/meme-together"

src/features/layout/components/app-footer/app-footer.style.js

@@ -10,11 +10,10 @@ export const StyledWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 50px;
+  padding-top: 5px;
+  padding-bottom: 5px;
   @media screen and (max-width: 500px) {
     flex-direction: column;
-    padding-top: 5px;
-    padding-bottom: 5px;
   }
 `;
 

src/features/layout/components/app-header/app-header.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 // store
 import { setUserData } from "@/redux/actions";
 // api
-import { checkLoginStatus, nativeLogout } from "@/features/auth/api";
+import { checkLoginStatus, nativeLogout } from "@/features/auth";
 // components
-import { LoginDialog, SignupDialog } from "@/features/auth/components";
+import { LoginDialog, SignupDialog } from "@/features/auth";
 // hooks
 import { useDisclosure } from "@/hooks";
 // utils

src/features/layout/components/app-header/app-header.style.js

@@ -72,6 +72,7 @@ export const StyledIconButton = styled.button`
   align-items: center;
   background: transparent;
   border: none;
+  color: inherit;
 `;
 
 export const StyledMobileNav = styled.nav`
@@ -119,4 +120,5 @@ export const StyledMobileButton = styled.button`
   background: transparent;
   border: none;
   cursor: pointer;
+  color: inherit;
 `;

src/features/layout/index.js

@@ -0,0 +1 @@
+export * from './components';

src/features/meme-explorer/api/get-all-public-memes.api.js

@@ -0,0 +1,40 @@
+import { db } from "@/libs/firebase";
+
+const defaultSort = 'desc';
+
+export const getAllPublicMemes = (sort = defaultSort) => {
+  return db
+    .collection('completed_meme')
+    .where('isPublic', '==', true)
+    .orderBy('last_save_time', sort)
+    .limit(15)
+    .get()
+    .then((querySnapshot) => {
+      const docs = querySnapshot.docs
+      const lastKey = docs[docs.length - 1];
+      const allPublicMemeImgData = docs.map((doc) => doc.data());
+      return {
+        allPublicMemeImgData,
+        lastKey
+      };
+    });
+}
+
+export const getAllPublicMemesNextPage = (lastKey, sort = defaultSort) => {
+  return db
+    .collection('completed_meme')
+    .where('isPublic', '==', true)
+    .orderBy('last_save_time', sort)
+    .startAfter(lastKey)
+    .limit(15)
+    .get()
+    .then((querySnapshot) => {
+      const docs = querySnapshot.docs
+      const lastKey = docs[docs.length - 1];
+      const allPublicMemeImgData = docs.map((doc) => doc.data());
+      return {
+        allPublicMemeImgData,
+        lastKey
+      };
+    });
+}

src/features/hot-memes/api/get-hot-memes.api.js → src/features/meme-explorer/api/get-hot-memes.api.js

@@ -8,10 +8,7 @@ export const getHotMemes = () => {
     .limit(6)
     .get()
     .then((querySnapshot) => {
-      const campaignMeme = [];
-      querySnapshot.forEach(doc => {
-        campaignMeme.push(doc.data());
-      })
+      const campaignMeme = querySnapshot.docs.map((doc) => doc.data());
       return campaignMeme;
     });
 }

src/features/hot-memes/api/index.js → src/features/meme-explorer/api/index.js

@@ -1,3 +1,3 @@
 export * from './get-hot-memes.api';
 export * from './count-click-time.api';
-
+export * from './get-all-public-memes.api';

src/features/meme-explorer/components/all-public-memes/all-public-memes.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+// api
+import {
+  getAllPublicMemes,
+  getAllPublicMemesNextPage,
+  countClickTime
+} from "../../api";
+// styles
+import {
+  StyledPublicMemeWrapper,
+  StyledPublicMemeImg,
+  StyledButton,
+  StyledAllPublicMemesWrapper,
+  StyledLoadingWrapper
+} from "./all-public-memes.style";
+// utils
+import { loading } from "@/utlis/loading";
+
+const PublicMeme = (props) => {
+  const { img_url, img_name } = props;
+  const history = useHistory();
+
+  const handleClick = () => {
+    countClickTime(img_name);
+    history.push(`/meme/${img_name}`);
+  };
+
+  return (
+    <StyledPublicMemeWrapper key={img_name} onClick={handleClick}>
+      <StyledPublicMemeImg src={img_url} alt={img_name} />
+    </StyledPublicMemeWrapper>
+  );
+
+};
+
+const AllPublicMemes = () => {
+  const [allPublicMemeImg, setAllPublicMemeImg] = useState([]);
+  const [lastKey, setLastKey] = useState();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [])
+
+  useEffect(() => {
+    getAllPublicMemes('desc').then((res) => {
+      const { allPublicMemeImgData, lastKey } = res;
+      setAllPublicMemeImg(allPublicMemeImgData);
+      setLastKey(lastKey);
+    });
+  }, [])
+
+  if (allPublicMemeImg.length === 0) {
+    return (
+      <StyledLoadingWrapper>
+        {loading('spinningBubbles', '#056', 50, 50)}
+      </StyledLoadingWrapper>
+    );
+  }
+
+  const getMoreMeme = () => {
+    if (!lastKey) return;
+    getAllPublicMemesNextPage(lastKey, 'desc')
+      .then((res) => {
+        const { allPublicMemeImgData, lastKey } = res;
+        setAllPublicMemeImg(allPublicMemeImg.concat(allPublicMemeImgData));
+        setLastKey(lastKey);
+      });
+  }
+
+  return (
+    <>
+      <StyledAllPublicMemesWrapper>
+        {allPublicMemeImg.map((item) => (<PublicMeme {...item} />))}
+      </StyledAllPublicMemesWrapper>
+      {lastKey ? (
+        <StyledButton type="button" onClick={getMoreMeme}>
+          載入更多
+        </StyledButton>
+      ) : (
+        <div>沒有囉！</div>
+      )}
+    </>
+  )
+};
+
+export default AllPublicMemes;

src/features/meme-explorer/components/all-public-memes/all-public-memes.style.js

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+export const StyledPublicMemeWrapper = styled.div`
+  box-shadow: 0 0 3px grey;
+  border-radius: 10px;
+  width: 250px;
+  height: 250px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  bottom: 0;
+  transition: bottom 0.3s linear;
+  &:hover{
+    box-shadow: 0 0 10px 2px grey;
+    bottom: 10px;
+  }
+  @media screen and (max-width: 1024px) {
+    width: 200px;
+    height: 200px;
+  }
+  @media screen and (max-width: 768px) {
+    width: 250px;
+    height: 250px;
+  }
+  @media screen and (max-width: 660px) {
+    width: 200px;
+    height: 200px;
+  }
+  @media screen and (max-width: 524px) {
+    width: 250px;
+    height: 250px;
+  }
+`;
+
+export const StyledPublicMemeImg = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+export const StyledButton = styled.button`
+  border: none;
+  border-radius: 5px;
+  background-color: #056;
+  color: white;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 1rem;
+`;
+
+export const StyledAllPublicMemesWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 250px);
+  grid-gap: 45px;
+  margin-top: 45px;
+  padding-bottom: 45px;
+  @media screen and (max-width: 1024px) {
+    grid-template-columns: repeat(3, 200px);
+  }
+  @media screen and (max-width: 768px) {
+    grid-template-columns: repeat(2, 250px);
+  }
+  @media screen and (max-width: 660px) {
+    grid-template-columns: repeat(2, 200px);
+  }
+  @media screen and (max-width: 524px) {
+    grid-template-columns: repeat(1, 250px);
+  }
+`;
+
+export const StyledLoadingWrapper = styled.div`
+  margin-top: 100px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`

src/features/meme-explorer/components/all-public-memes/index.js

@@ -0,0 +1 @@
+export { default as AllPublicMemes } from './all-public-memes';