Merge pull request #3 from yungshenglu/develop

add: List title and bug fixing

RELEASE.md

@@ -1,6 +1,14 @@
 # Release Notes
 
 ---
+
+## [v0.0.3](https://github.com/yungshenglu/Dcard-Reader/releases/tag/v0.0.3)
+
+- Features
+  - Add the title for the list of the latest popular posts
+  - Fix bugs of the infinite scrolling
+  - Code refactoring
+
 ## [v0.0.2](https://github.com/yungshenglu/Dcard-Reader/releases/tag/v0.0.2)
 
 - Features

app.js

@@ -2,6 +2,7 @@ const express = require('express');
 const axios = require('axios');
 const cors = require('cors');
 
+
 const app = express();
 
 app.use(cors({
@@ -40,7 +41,7 @@ app.get('/api/post&id=:id', (req, res) => {
         return '';
       }
     }).catch((err) => {
-      res.send(id);
+      res.send(err);
     });
 });
 

src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Router from './router';
 
+
 function App() {
   return (
     <div className="App">

src/components/AntAvatar/AntAvatar.tsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { AAvatar } from '@P/antd';
 
+
 export function AntAvatar({ ...props }: any) {
   return <AAvatar {...props} />;
 }
 
 AntAvatar.prototype = {
   props: PropTypes.object
-}
+};

src/components/AntBacktop/AntBacktop.tsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { StyledAntBacktop } from './style';
 
+
 export function AntBacktop({ ...props }: any) {
   return <StyledAntBacktop {...props} />;
 }
 
 AntBacktop.prototype = {
   props: PropTypes.object
-}
+};

src/components/AntBadge/AntBadge.tsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { ABadge } from '@P/antd';
 
+
 export function AntBadge({ ...props }: any) {
   return <ABadge {...props} />;
 }
 
 AntBadge.prototype = {
   props: PropTypes.object
-}
+};

src/components/AntCol/AntCol.tsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { ACol } from '@P/antd';
 
+
 export function AntCol({ children, ...props }: any) {
   return <ACol {...props}>{children}</ACol>;
 }

src/components/AntEmpty/style.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { AEmpty } from '@P/antd';
 
+
 export const StyledEmpty = styled(AEmpty)`
   color: #000;
 `;

src/components/AntNotification/AntNotification.tsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { ANotification } from '@P/antd';
 
+
 export function AntNotification({ ...props }: any) {
   return ANotification.error({
     message: props.messages,

src/components/AntRow/AntRow.tsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { ARow } from '@P/antd';
 
+
 export function AntRow({ children, ...props }: any) {
   return <ARow {...props}>{children}</ARow>;
 };

src/components/AntTag/AntTag.tsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-
 import { ATag } from '@P/antd';
 
+
 export function AntTag({ children, style, color }: any) {
   return (
     <ATag style={style} color={color}>

src/components/CusItemExcerpt/CusItemExcerpt.tsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { StyledItemExcerpt } from './style';
 
+
 export function CusItemExcerpt({ content }: any) {
   return (
     <StyledItemExcerpt>

src/components/CusItemExcerpt/style.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+
 export const StyledItemExcerpt = styled.div`
   background: transparent;
   color: #000;

src/components/CusItemTitle/CusItemTitle.tsx

@@ -1,53 +1,17 @@
-import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import AntNotification from '@C/AntNotification';
-import CusPostModal from '@C/CusPostModal';
-import useFetchPost from '@H/useFetchPost';
 import { StyledItemTitle } from './style';
 
 
-export function CusItemTitle({ content, id }: any) {
-  const [modalVisible, setModalVisible] = useState(false);
-  const [{ data, isLoading, isError }, refetch]: any = useFetchPost(id);
-
-  useEffect(() => {
-    if (isError) {
-      AntNotification({
-        message: '系統錯誤',
-        description: '目前連線異常，請稍後再試。'
-      });
-    }
-  }, [isError]);
-
-  // Event handler
-  const handleOpenModal = async () => {
-    setModalVisible(true);
-    await refetch();
-  }
-
-  const handleCloseModal = () => {
-    setModalVisible(false);
-  }
-
+export function CusItemTitle({ content, itemId }: any) {
   // Render
   return (
-    <>
-      <StyledItemTitle onClick={handleOpenModal} margin>
-        { content }
-      </StyledItemTitle>
-      <CusPostModal
-        modalTitle={content}
-        modalData={data}
-        isLoading={isLoading}
-        isError={isError}
-        modalVisible={modalVisible}
-        onCloseModal={handleCloseModal}
-      />
-    </>
+    <StyledItemTitle margin>
+      { content }
+    </StyledItemTitle>
   );
 };
 
 CusItemTitle.prototype = {
   content: PropTypes.string,
-  id: PropTypes.number
+  itemId: PropTypes.number
 };

src/components/CusList/CusList.tsx

@@ -2,48 +2,31 @@ import PropTypes from 'prop-types';
 import AntEmpty from '@C/AntEmpty';
 import AntSkeleton from '@C/AntSkeleton';
 import CusListItem from '@C/CusListItem';
-import { StyledList, StyledSpinContainer } from './style';
+import { StyledList } from './style';
 
 
-export function CusList({ listData = [], isLoading = true, lastItemRef }: any) {
-  // console.log('listData: ', listData);
+export function CusList({ listData = [], isLoading, lastItemRef }: any) {
   const listLength = listData?.length;
 
   // Render
   return (
     <StyledList>
       {
-        isLoading
-        ? null
-        : listData
-          ? listData.map((item: any, index: number) => {
-              if (index === listLength - 1) {
-                return (
-                  <>
-                    <div 
-                      ref={lastItemRef} 
-                      data-id={item.id}
-                    >
-                      <CusListItem 
-                        key={item.id}
-                        id={item.id}
-                        title={item.title} 
-                        excerpt={item.excerpt}
-                        gender={item.gender}
-                        forumName={item.forumName}
-                        topics={item.topics}
-                        commentCount={item.commentCount}
-                        divider={index !== listLength - 1}
-                      />
-                    </div>
-                    { isLoading ? <AntSkeleton active/> : null }
-                  </>
-                )
-              } else {
-                return (
+        listData?.length === 0
+        ? isLoading
+          ? <AntSkeleton active />
+          : <AntEmpty />
+        : listData.map((item: any, index: number) => {
+          if (index === listLength - 1) {
+            return (
+              <>
+                <div 
+                  key={`${item.id}${index}`}
+                  ref={lastItemRef} 
+                  data-id={item.id}
+                >
                   <CusListItem 
-                    key={item.id}
-                    id={item.id}
+                    itemId={item.id}
                     title={item.title} 
                     excerpt={item.excerpt}
                     gender={item.gender}
@@ -52,10 +35,31 @@ export function CusList({ listData = [], isLoading = true, lastItemRef }: any) {
                     commentCount={item.commentCount}
                     divider={index !== listLength - 1}
                   />
-                )
-              }
-            })
-          : <AntEmpty />
+                  { 
+                    isLoading 
+                    ? <AntSkeleton active/> 
+                    : null 
+                  }
+                </div>
+              </>
+            )
+          } else {
+            return (
+              <div key={`${item.id}${index}`}>
+                <CusListItem 
+                  itemId={item.id}
+                  title={item.title} 
+                  excerpt={item.excerpt}
+                  gender={item.gender}
+                  forumName={item.forumName}
+                  topics={item.topics}
+                  commentCount={item.commentCount}
+                  divider={index !== listLength - 1}
+                />
+              </div>
+            )
+          }
+        })
       }
     </StyledList>   
   );

src/components/CusList/style.ts

@@ -5,8 +5,5 @@ export const StyledList = styled.div`
   height: 100%;
   background: #FFF;
   padding: 20px;
+  overflow-y: scroll;
 `;
-
-export const StyledSpinContainer = styled.div`
-  text-align: center;
-`