From 88f503149d71e19076082c5f52d9dccf7086b5d0 Mon Sep 17 00:00:00 2001
From: vec <vec@torzo.club>
Date: Fri, 27 Dec 2024 10:41:13 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20=E6=B4=BB=E5=8A=A8=E5=BC=80=E5=A7=8B?=
 =?UTF-8?q?=E5=89=8D=E7=9A=84=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Gallery/TextPlaceholder.tsx    | 12 +++++
 front/src/components/Gallery/index.tsx        | 51 ++++++++++++++-----
 front/src/components/Waterfall/index.tsx      | 15 +-----
 3 files changed, 50 insertions(+), 28 deletions(-)
 create mode 100644 front/src/components/Gallery/TextPlaceholder.tsx

diff --git a/front/src/components/Gallery/TextPlaceholder.tsx b/front/src/components/Gallery/TextPlaceholder.tsx
new file mode 100644
index 0000000..8f06262
--- /dev/null
+++ b/front/src/components/Gallery/TextPlaceholder.tsx
@@ -0,0 +1,12 @@
+import { FC, FunctionComponent, memo, ReactNode } from 'react'
+
+const TextPlaceholder: FC<{ children?: ReactNode }> = memo(({ children }) => (
+  <div style={{
+    textAlign: 'center',
+    paddingTop: '30px',
+    width: '100%',
+    color: 'rgba(0, 0, 0, 0.4)',
+  }}>{ children }</div>
+))
+
+export default TextPlaceholder
diff --git a/front/src/components/Gallery/index.tsx b/front/src/components/Gallery/index.tsx
index 441176d..860ab48 100644
--- a/front/src/components/Gallery/index.tsx
+++ b/front/src/components/Gallery/index.tsx
@@ -8,6 +8,8 @@ import { Gallery, Photo } from 'api/photo'
 import { CoverClickEvent, Props as PhotoBoxProps } from 'components/PhotoBox'
 import Submission from 'components/Submission'
 import useSafeState from 'hooks/useSafeState'
+import { dateDiffInDays } from 'utils/date'
+import TextPlaceholder from './TextPlaceholder'
 
 function getViewportWidth() {
   const { innerWidth } = window
@@ -141,25 +143,46 @@ export type Props = {
 }
 export default ({
   cannot_select_vote = false,
-  show_vote_button, gallery, selected_id_list, onClickVote, onClickCover,
+  show_vote_button,
+  gallery,
+  selected_id_list,
+  onClickVote,
+  onClickCover,
 }: Props) => {
   const layout = useWaterfallLayout(gallery)
 
   const title_node = useTitleNode(gallery)
 
-  const waterfall_layout_node = useMemo(() => (
-    <Waterfall
-      layout_configure={layout}
-      cannot_select_vote={cannot_select_vote}
-      photos={gallery.photos}
-      selected_id_list={selected_id_list}
-      show_vote_button={show_vote_button}
-      onClickCover={onClickCover}
-      onClickVote={(photoId) => {
-        onClickVote && onClickVote(photoId)
-      }}
-    />
-  ), [cannot_select_vote, gallery.photos, show_vote_button, layout, onClickCover, onClickVote, selected_id_list])
+  const waterfall_layout_node = useMemo(() => {
+    const day_diff = dateDiffInDays(new Date(gallery.event_start), new Date)
+    if (gallery.in_event) {
+      return <TextPlaceholder>提交你的投稿</TextPlaceholder>
+    } else if (gallery.photos.length === 0) {
+      if ((day_diff < 30) && day_diff > 0) {
+        return (
+          <TextPlaceholder>
+            活动将于 { day_diff } 天后开始<br />
+          </TextPlaceholder>
+        )
+      } else {
+        return <TextPlaceholder>暂无相片</TextPlaceholder>
+      }
+    } else {
+      return (
+        <Waterfall
+          layout_configure={layout}
+          cannot_select_vote={cannot_select_vote}
+          photos={gallery.photos}
+          selected_id_list={selected_id_list}
+          show_vote_button={show_vote_button}
+          onClickCover={onClickCover}
+          onClickVote={(photoId) => {
+            onClickVote && onClickVote(photoId)
+          }}
+        />
+      )
+    }
+  }, [gallery.event_start, gallery.in_event, gallery.photos, layout, cannot_select_vote, selected_id_list, show_vote_button, onClickCover, onClickVote])
 
   return (
     <div className="gallery">
diff --git a/front/src/components/Waterfall/index.tsx b/front/src/components/Waterfall/index.tsx
index 0489f5d..286e3e5 100644
--- a/front/src/components/Waterfall/index.tsx
+++ b/front/src/components/Waterfall/index.tsx
@@ -19,15 +19,6 @@ type Pos = {
 type PhotoID = number
 type PosMap = Record<PhotoID, Pos>
 
-const Empty: FunctionComponent = memo(() => (
-  <div style={{
-    textAlign: 'center',
-    paddingTop: '30px',
-    width: '100%',
-    color: 'rgba(0, 0, 0, 0.4)',
-  }}>暂无投稿作品</div>
-))
-
 export type WaterfallLayoutConfigure = {
   box_type: PhotoBoxProps['type']
   vertial_gutter: PhotoBoxProps['vertial_gutter']
@@ -95,10 +86,7 @@ export default (props: Props) => {
       margin: 'auto',
       minHeight: '150px',
     }}>
-      {(photos.length === 0) ? (
-        <Empty />
-      ) : (
-        <div
+       <div
           className="waterfall"
           style={{
             width: '100%',
@@ -144,7 +132,6 @@ export default (props: Props) => {
             ))
           }
         </div>
-      )}
     </div>
   )
 }