Merge pull request #71 from stack-wuh/feat-redux

Feat redux

components/ErrorBoundary/erroBoundary.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react'
 
 type ErrorBoundaryStateProps = {
-  hasError: boolean
+  hasError: boolean,
+  errorInfo: string,
+  error: string
 }
 class ErrorBoundary extends React.Component<unknown, ErrorBoundaryStateProps> {
   constructor(props: any) {
     super(props)
     this.state = {
       hasError: false,
+      error: '',
+      errorInfo: ''
     }
   }
 
@@ -17,8 +21,11 @@ class ErrorBoundary extends React.Component<unknown, ErrorBoundaryStateProps> {
     }
   }
 
-  componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
-    console.error(error, errorInfo)
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({
+      error: error.toString(),
+      errorInfo: errorInfo.componentStack
+    })
   }
 
   render() {
@@ -27,6 +34,10 @@ class ErrorBoundary extends React.Component<unknown, ErrorBoundaryStateProps> {
         <div>
           <h3>Error</h3>
           <p>服务器渲染错误!</p>
+          <details>
+            <p>{this.state.error}</p>
+            <p>{this.state.errorInfo}</p>
+          </details>
         </div>
       )
     }

components/ReduxProvider/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { store } from '@/redux/store'
+import ErrorBoundary from '../ErrorBoundary'
+
+const ReduxProvider: React.FC<{}> = (props) => {
+  return <ErrorBoundary>
+    <Provider store={store}>{props.children}</Provider>
+  </ErrorBoundary>
+}
+
+export default ReduxProvider

components/audio/control.tsx

@@ -1,102 +1,15 @@
 import React from 'react'
-import Space from '@/components/space/space'
-import Button from '@/components/button/button'
-import { SwitchTransition, CSSTransition } from 'react-transition-group'
-import swr from 'swr'
-import { API_PLAY_LIST } from '@/constant/api'
-import fetcher from '@/lib/fetch'
-import { ITraceItem } from '@/components/audio/useAudio'
-
-import useAudio from './useAudio'
-
-const config = {
-  revalidateOnMount: true,
-  revalidateOnFocus: false,
-  focusThrottleInterval: 1000 * 50,
-}
-
-const useMusicData = (): { playlist: ITraceItem[] } => {
-  const { data } = swr(API_PLAY_LIST, fetcher, config)
-
-  if (!data) return { playlist: [] }
-  const { tracks } = data.hits
-  return {
-    playlist: tracks,
-  }
-}
+import useControl from '@/hooks/useAudio/useControl'
 
 const AudioControl = () => {
-  const data = useMusicData()
-  const [state, actions] = useAudio({ traceList: data.playlist })
-  const { initialTrace } = state
+  const [audioRef, actions] = useControl()
+  console.log('===== header.audioRef', audioRef, actions)
 
   return (
     <div className="ww_audio">
       <div className="ww_audio__head">
-        <span>
-          {initialTrace?.name} - {initialTrace?.author}
-        </span>
+        <span></span>
       </div>
-      <Space size="small" className="ww_audio__space">
-        {/* 上一曲 */}
-        <Button onClick={actions.onPrev} size="small" ghost icon="icon-prev1" />
-
-        {/* 播放状态 */}
-        <SwitchTransition mode="out-in">
-          <CSSTransition
-            key={state.playStatus}
-            classNames="fade"
-            timeout={350}
-            unmountOnExit>
-            {state.isplaying ? (
-              <Button
-                disabled={!state.canplay}
-                onClick={actions.onPause}
-                ghost
-                size="small"
-                icon="icon-pause"
-              />
-            ) : (
-              <Button
-                disabled={!state.canplay}
-                ghost
-                onClick={actions.onPlay}
-                size="small"
-                icon="icon-play1"
-              />
-            )}
-          </CSSTransition>
-        </SwitchTransition>
-
-        {/* 静音状态 */}
-        <SwitchTransition mode="out-in">
-          <CSSTransition
-            in={state.muted}
-            key={state.mutedStatus}
-            classNames="fade"
-            timeout={350}
-            unmountOnExit>
-            {state.muted ? (
-              <Button
-                onClick={() => actions.onToggleMuted(false)}
-                ghost
-                size="small"
-                icon="icon-volume-x"
-              />
-            ) : (
-              <Button
-                onClick={() => actions.onToggleMuted(true)}
-                ghost
-                size="small"
-                icon="icon-volume-"
-              />
-            )}
-          </CSSTransition>
-        </SwitchTransition>
-
-        {/* 下一曲 */}
-        <Button onClick={actions.onNext} ghost size="small" icon="icon-next" />
-      </Space>
     </div>
   )
 }

components/head/iconfont.tsx

@@ -0,0 +1,18 @@
+import { Head } from 'next/document'
+
+const Iconfont = () => {
+  return (
+    <Head>
+      <link
+        rel="stylesheet external noreferrer"
+        href="//at.alicdn.com/t/font_1587964_ap06iu717e5.css"
+      />
+      <link
+        rel="stylesheet external noreferrer"
+        href="//at.alicdn.com/t/font_2595178_wa25xow6jmp.css"
+      />
+    </Head>
+  )
+}
+
+export default Iconfont

components/header/header.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import withConfig from '@/hooks/useConfig'
-import AudioControl from '@/components/audio/control'
+// import AudioControl from '@/components/audio/control'
 
 const Header = () => {
   const config = withConfig()
@@ -18,9 +18,7 @@ const Header = () => {
           <strong className="title">{config?.header.title}</strong>
         </div>
         <div className="empty"></div>
-        <div className="rg">
-          <AudioControl />
-        </div>
+        <div className="rg">{/* <AudioControl /> */}</div>
       </div>
     </header>
   )

components/menu/nav.tsx

@@ -15,6 +15,12 @@ export default function Nav() {
           <span>关于</span>
         </a>
       </ActiveLink>
+      <ActiveLink href="/music" activeClassName="is-active" passHref scroll>
+        <a className="ww_menu-item" role="menuitem" tabIndex={0}>
+          <i className="iconfont icon-netease-cloud-music-line" />
+          <span>音</span>
+        </a>
+      </ActiveLink>
       <ActiveLink
         href="https://github.com/stack-wuh/react-router-config"
         activeClassName="is-active"

components/onResize/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export type TProps = {}
+
+const Resize: React.FC<TProps> = props => {
+  return <div>{props.children}</div>
+}
+
+export default Resize

components/post/list.tsx

@@ -20,11 +20,11 @@ const usePostPages = (initialData: THomeIntialProps, count: number) => {
     (index: number) => `${API_ARTICLE_LIST}?p=${index + 1}`,
     fetcher,
     {
-      revalidateOnFocus: true,
+      revalidateOnFocus: false,
       revalidateOnMount: true,
       revalidateIfStale: true,
       initialSize: 1,
-      persistSize: false,
+      persistSize: true,
       dedupingInterval: 5000,
       fallbackData: [initialData],
     }

constant/api.ts

@@ -14,3 +14,5 @@ export const API_BANNER_HOME = `${DOMAIN_STATIC}/api/banner`
 export const API_GALLERY_LIST = `${DOMAIN_STATIC}/api/gallery`
 
 export const API_PLAY_LIST = `${DOMAIN}${PREFIX}/music/songs`
+
+export const API_PLAY_ITEM = `${DOMAIN}${PREFIX}/music`

hooks/useAudio/index.tsx

@@ -3,6 +3,7 @@ import createAudio from '@/lib/createAudio'
 const audioInstance = new createAudio()._instance
 
 export interface ICustomAudioProps extends HTMLAudioElement {
+  [x: string]: any
   // Audio 的实例是否已加载, 初始化默认为true
   isInit?: boolean
   // Audio 实例当前缓存的播放列表序号
@@ -19,7 +20,9 @@ export const inititalAudioProps = {
   isplaying: false,
 }
 
-export const AudioContext = React.createContext<ICustomAudioProps | null>(null)
+export const AudioContext = React.createContext<ICustomAudioProps>(
+  {} as ICustomAudioProps
+)
 
 export const useAudioInstance = () => {
   const audioRef = useRef<ICustomAudioProps | null>(audioInstance)