refactor(have-a-drink): adjust codebase (#1053)

* refactor(have-a-drink): adjust content width && convert to ts

* refactor(have-a-drink): extract constant file

Author: mydearxym

src/containers/content/HaveADrinkContent/Body/About.js renamed to src/containers/content/HaveADrinkContent/Body/About.tsx

@@ -8,7 +8,7 @@ import React from 'react'
 
 import { Wrapper, Title, Body } from '../styles/body/about'
 
-const About = () => {
+const About: React.FC = () => {
   return (
     <Wrapper>
       <Title>关于『来一杯』</Title>

src/containers/content/HaveADrinkContent/Body/Catalog.js renamed to src/containers/content/HaveADrinkContent/Body/Catalog.tsx

@@ -128,7 +128,7 @@ const items = [
   },
 ]
 
-const Catalog = () => {
+const Catalog: React.FC = () => {
   return (
     <Wrapper>
       {items.map((item) => (

src/containers/content/HaveADrinkContent/Body/Setting.js renamed to src/containers/content/HaveADrinkContent/Body/Setting.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import type { TSettingOption } from '../spec'
+
 import {
   Wrapper,
   Divider,
@@ -11,7 +13,13 @@ import {
 
 import { setSetting } from '../logic'
 
-const Setting = ({ settingOptions: { animateType, fontSize } }) => {
+type TProps = {
+  settingOptions: TSettingOption
+}
+
+const Setting: React.FC<TProps> = ({
+  settingOptions: { animateType, fontSize },
+}) => {
   return (
     <Wrapper>
       <Block>

src/containers/content/HaveADrinkContent/Body/index.js renamed to src/containers/content/HaveADrinkContent/Body/index.tsx

@@ -9,19 +9,24 @@ import { AnimateOnChange } from 'react-animation'
 
 import { buildLog } from '@/utils'
 
+import type { TView, TSettingOption } from '../spec'
 import Catalog from './Catalog'
 import Setting from './Setting'
 import About from './About'
 
 import { Wrapper, Sentence, Hint } from '../styles/body'
-import { LN } from '../logic'
+import { VIEW } from '../constant'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const View = ({ view, sentence, settingOptions }) => {
-  const { VIEW } = LN
+type TViewProps = {
+  view: TView
+  sentence: string
+  settingOptions: TSettingOption
+}
 
+const View: React.FC<TViewProps> = ({ view, sentence, settingOptions }) => {
   const animate = {
     fade: {
       durationOut: 200,
@@ -59,10 +64,10 @@ const View = ({ view, sentence, settingOptions }) => {
   }
 }
 
-const Body = ({ ...restProps }) => {
+const Body = (props) => {
   return (
     <Wrapper>
-      <View {...restProps} />
+      <View {...props} />
     </Wrapper>
   )
 }

src/containers/content/HaveADrinkContent/Footer/Contributor.js renamed to src/containers/content/HaveADrinkContent/Footer/Contributor.tsx

@@ -20,7 +20,7 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const IndexStatus = () => {
+const IndexStatus: React.FC = () => {
   return (
     <Wrapper>
       <Text>共收录</Text>

src/containers/content/HaveADrinkContent/Footer/Feature.js renamed to src/containers/content/HaveADrinkContent/Footer/Feature.tsx

@@ -11,16 +11,15 @@ import { buildLog } from '@/utils'
 
 import DotDivider from '@/components/DotDivider'
 
+import { VIEW } from '../constant'
 import { Wrapper, Icon } from '../styles/footer/feature'
-import { setView, LN } from '../logic'
+import { setView } from '../logic'
 // import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Feature = () => {
-  const { VIEW } = LN
-
+const Feature: React.FC = () => {
   return (
     <Wrapper>
       <div onClick={() => setView(VIEW.ABOUT)}>

src/containers/content/HaveADrinkContent/Footer/Share.js renamed to src/containers/content/HaveADrinkContent/Footer/Share.tsx

@@ -15,7 +15,7 @@ import { Wrapper, Icon } from '../styles/footer/share'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Reaction = () => {
+const Reaction: React.FC = () => {
   return (
     <Wrapper>
       <Icon src={`${ICON_CMD}/drink_share.svg`} />

src/containers/content/HaveADrinkContent/Footer/index.js renamed to src/containers/content/HaveADrinkContent/Footer/index.tsx

@@ -8,19 +8,19 @@ import React from 'react'
 
 import { buildLog } from '@/utils'
 
+import type { TView } from '../spec'
+
 import Contributor from './Contributor'
 import Feature from './Feature'
 import Share from './Share'
 
+import { VIEW } from '../constant'
 import { Wrapper } from '../styles/header'
-import { LN } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
 const View = ({ view }) => {
-  const { VIEW } = LN
-
   switch (view) {
     case VIEW.DEFAULT: {
       return (
@@ -37,7 +37,11 @@ const View = ({ view }) => {
   }
 }
 
-const Footer = ({ view }) => {
+type TProps = {
+  view: TView
+}
+
+const Footer: React.FC<TProps> = ({ view }) => {
   return (
     <Wrapper>
       <View view={view} />

src/containers/content/HaveADrinkContent/Header/IndexStatus.js renamed to src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx

@@ -21,7 +21,7 @@ import { setView } from '../logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const IndexStatus = () => {
+const IndexStatus: React.FC = () => {
   return (
     <Wrapper>
       <Text>共&nbsp;</Text>

src/containers/content/HaveADrinkContent/Header/Reaction.js renamed to src/containers/content/HaveADrinkContent/Header/Reaction.tsx

@@ -14,7 +14,7 @@ import { Wrapper } from '../styles/header/reaction'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Reaction = () => {
+const Reaction: React.FC = () => {
   return (
     <Wrapper>
       <div>评论 | 喜欢</div>