feat: add subscribe bell on post footer (#1594

* feat: bell Signed-off-by: Innei <tukon479@gmail.com> * feat: add post Signed-off-by: Innei <tukon479@gmail.com> --------- Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Feb 23, 2023 · 372d789 · 372d789
1 parent 2577201
commit 372d789
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 151 deletions.
diff --git a/packages/kami-design/components/Icons/shared.tsx b/packages/kami-design/components/Icons/shared.tsx
@@ -18,3 +18,24 @@ export function FluentList16Filled(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function TablerBellRinging(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1m6-10.273A11.05 11.05 0 0 0 18.206 3M3 6.727A11.05 11.05 0 0 1 5.792 3"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/components/in-page/Home/section.tsx b/src/components/in-page/Home/section.tsx
@@ -16,8 +16,8 @@ import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transit
 import { LikeButton } from '~/components/universal/LikeButton'
 import { NoticePanel } from '~/components/universal/Notice'
 import {
+  useIsEnableSubscribe,
   usePresentSubscribeModal,
-  useSubscribeStatus,
 } from '~/components/widgets/Subscribe/hooks'
 import { useRandomImage } from '~/hooks/use-kami'
 import { apiClient } from '~/utils/client'
@@ -33,7 +33,7 @@ import styles from './section.module.css'
 const SubscribeCard: FC<{
   bg: string
 }> = ({ bg }) => {
-  const { data } = useSubscribeStatus()
+  const canSubscribe = useIsEnableSubscribe()
   const { present } = usePresentSubscribeModal('home')
 
   return (
@@ -42,12 +42,12 @@ const SubscribeCard: FC<{
       desc="关注订阅不迷路哦"
       src={bg}
       onClick={useCallback(() => {
-        if (data?.enable) {
+        if (canSubscribe) {
           present()
         } else {
           window.open('/feed')
         }
-      }, [data?.enable])}
+      }, [canSubscribe])}
     />
   )
 }

diff --git a/src/components/layouts/BasicLayout/Footer/actions.tsx b/src/components/layouts/BasicLayout/Footer/actions.tsx
@@ -13,7 +13,6 @@ import {
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
 import { ScaleTransitionView } from '@mx-space/kami-design/components/Transition/scale'
 
-import { SubscribeEmail } from '~/components/widgets/Subscribe'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
@@ -102,7 +101,6 @@ export const FooterActions: FC = observer(() => {
             )
           })}
         </TransitionGroup>
-        <SubscribeEmail />
         <button aria-label="open player" onClick={handlePlayMusic}>
           <FaSolidHeadphonesAlt />
         </button>

diff --git a/src/components/widgets/Subscribe/hooks.tsx b/src/components/widgets/Subscribe/hooks.tsx
@@ -1,5 +1,6 @@
 import useSWR from 'swr'
 
+import { SubscribeTypeToBitMap } from '@mx-space/api-client'
 import { useModalStack } from '@mx-space/kami-design'
 
 import { TrackerAction } from '~/constants/tracker'
@@ -14,7 +15,12 @@ export const useSubscribeStatus = () => {
   return useSWR(SWR_CHECK_SUBSCRIBE_KEY, apiClient.subscribe.check)
 }
 
-export const usePresentSubscribeModal = (source: string) => {
+export const useIsEnableSubscribe = () => useSubscribeStatus().data?.enable
+
+export const usePresentSubscribeModal = (
+  source: string,
+  defaultTypes?: (keyof typeof SubscribeTypeToBitMap)[],
+) => {
   const { event } = useAnalyze()
   const { present } = useModalStack()
 
@@ -30,7 +36,9 @@ export const usePresentSubscribeModal = (source: string) => {
           stopPropagation: true,
           darkness: 0.5,
         },
-        component: () => <SubscribeModal onConfirm={dispose} />,
+        component: () => (
+          <SubscribeModal onConfirm={dispose} defaultTypes={defaultTypes} />
+        ),
         useBottomDrawerInMobile: false,
       })
 

diff --git a/src/components/widgets/Subscribe/index.tsx b/src/components/widgets/Subscribe/index.tsx
diff --git a/src/components/widgets/Subscribe/modal.tsx b/src/components/widgets/Subscribe/modal.tsx
@@ -1,8 +1,9 @@
 import { observer } from 'mobx-react-lite'
-import { useReducer } from 'react'
+import { useEffect, useReducer } from 'react'
 import { message } from 'react-message-popup'
 
-import { Input } from '@mx-space/kami-design'
+import { SubscribeTypeToBitMap } from '@mx-space/api-client'
+import { Input, useStateToRef } from '@mx-space/kami-design'
 import { MdiEmailFastOutline } from '@mx-space/kami-design/components/Icons'
 
 import { useInitialData } from '~/hooks/use-initial-data'
@@ -12,6 +13,7 @@ import { useSubscribeStatus } from './hooks'
 
 interface SubscribeModalProps {
   onConfirm: () => void
+  defaultTypes?: (keyof typeof SubscribeTypeToBitMap)[]
 }
 
 const subscibeTextMap: Record<string, string> = {
@@ -50,90 +52,113 @@ const useFormData = () => {
   return [state, dispatch] as const
 }
 
-export const SubscribeModal = observer<SubscribeModalProps>(({ onConfirm }) => {
-  const [state, dispatch] = useFormData()
+export const SubscribeModal = observer<SubscribeModalProps>(
+  ({ onConfirm, defaultTypes }) => {
+    const [state, dispatch] = useFormData()
 
-  const query = useSubscribeStatus()
+    const stateRef = useStateToRef(state)
 
-  const handleSubList = async () => {
-    if (!state.email) {
-      message.error('请输入邮箱')
-      return
-    }
-    if (Object.values(state.types).every((type) => !type)) {
-      message.error('请选择订阅类型')
-      return
-    }
-    const { email, types } = state
-    await apiClient.subscribe.subscribe(
-      email,
-      Object.keys(types).filter((name) => state.types[name]) as any[],
-    )
+    useEffect(() => {
+      if (!defaultTypes || !defaultTypes.length) {
+        return
+      }
+
+      dispatch({
+        type: 'set',
+        data: {
+          types: defaultTypes.reduce(
+            (acc, type) => {
+              acc[type] = true
+              return acc
+            },
+            { ...stateRef.current.types },
+          ),
+        },
+      })
+    }, [])
+
+    const query = useSubscribeStatus()
+
+    const handleSubList = async () => {
+      if (!state.email) {
+        message.error('请输入邮箱')
+        return
+      }
+      if (Object.values(state.types).every((type) => !type)) {
+        message.error('请选择订阅类型')
+        return
+      }
+      const { email, types } = state
+      await apiClient.subscribe.subscribe(
+        email,
+        Object.keys(types).filter((name) => state.types[name]) as any[],
+      )
 
-    message.success('订阅成功')
-    dispatch({ type: 'reset' })
-    onConfirm()
-  }
-  const {
-    seo: { title },
-  } = useInitialData()
-  return (
-    <form action="#" onSubmit={handleSubList} className="flex flex-col gap-5">
-      <p className="text-gray-1 text-sm">
-        欢迎订阅「{title}
-        」，我会定期推送最新的内容到你的邮箱。
-      </p>
-      <Input
-        type="text"
-        placeholder="留下你的邮箱哦 *"
-        required
-        prefix={<MdiEmailFastOutline />}
-        value={state.email}
-        onChange={(e) => {
-          dispatch({ type: 'set', data: { email: e.target.value } })
-        }}
-      />
-      <div className="flex gap-10">
-        {Object.keys(state.types)
-          .filter((type) => query.data?.allowTypes.includes(type as any))
-          .map((name) => (
-            <fieldset
-              className="inline-flex items-center children:cursor-pointer text-lg"
-              key={name}
-            >
-              <input
-                type="checkbox"
-                onChange={(e) => {
-                  dispatch({
-                    type: 'set',
-                    data: {
-                      types: {
-                        ...state.types,
-                        [name]: e.target.checked,
+      message.success('订阅成功')
+      dispatch({ type: 'reset' })
+      onConfirm()
+    }
+    const {
+      seo: { title },
+    } = useInitialData()
+    return (
+      <form action="#" onSubmit={handleSubList} className="flex flex-col gap-5">
+        <p className="text-gray-1 text-sm">
+          欢迎订阅「{title}
+          」，我会定期推送最新的内容到你的邮箱。
+        </p>
+        <Input
+          type="text"
+          placeholder="留下你的邮箱哦 *"
+          required
+          prefix={<MdiEmailFastOutline />}
+          value={state.email}
+          onChange={(e) => {
+            dispatch({ type: 'set', data: { email: e.target.value } })
+          }}
+        />
+        <div className="flex gap-10">
+          {Object.keys(state.types)
+            .filter((type) => query.data?.allowTypes.includes(type as any))
+            .map((name) => (
+              <fieldset
+                className="inline-flex items-center children:cursor-pointer text-lg"
+                key={name}
+              >
+                <input
+                  type="checkbox"
+                  onChange={(e) => {
+                    dispatch({
+                      type: 'set',
+                      data: {
+                        types: {
+                          ...state.types,
+                          [name]: e.target.checked,
+                        },
                       },
-                    },
-                  })
-                }}
-                checked={state.types[name]}
-                id={name}
-              />
-              <label htmlFor={name} className="text-shizuku">
-                {subscibeTextMap[name]}
-              </label>
-            </fieldset>
-          ))}
-      </div>
-
-      <p className="text-gray-1 -mt-2 text-sm">
-        或者你也可以通过{' '}
-        <a href="/feed" className="text-green" target={'_blank'}>
-          /feed
-        </a>{' '}
-        订阅「{title}」的 RSS 流。
-      </p>
-      <button className="btn green" disabled={!state.email}>
-        订阅
-      </button>
-    </form>
-  )
-})
+                    })
+                  }}
+                  checked={state.types[name]}
+                  id={name}
+                />
+                <label htmlFor={name} className="text-shizuku">
+                  {subscibeTextMap[name]}
+                </label>
+              </fieldset>
+            ))}
+        </div>
+
+        <p className="text-gray-1 -mt-2 text-sm">
+          或者你也可以通过{' '}
+          <a href="/feed" className="text-green" target={'_blank'}>
+            /feed
+          </a>{' '}
+          订阅「{title}」的 RSS 流。
+        </p>
+        <button className="btn green" disabled={!state.email}>
+          订阅
+        </button>
+      </form>
+    )
+  },
+)