Add redux saga sample

.vscode/settings.json

@@ -8,7 +8,9 @@
   },
   "files.insertFinalNewline": true,
   "javascript.format.enable": false,
-  "prettier.tslintIntegration": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.tslint": true
+  },
   "[javascript]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,

README.md

@@ -12,7 +12,8 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 
 ### For desktop
 
-![For desktop](https://user-images.githubusercontent.com/12574048/46964420-f9fb9180-d0e2-11e8-9c05-e1594c533947.png)
+![For desktop 1](https://user-images.githubusercontent.com/12574048/46964420-f9fb9180-d0e2-11e8-9c05-e1594c533947.png)
+![For desktop 2](https://user-images.githubusercontent.com/12574048/71005010-3337f300-2126-11ea-844c-d113f5d87255.png)
 
 ### For mobile
 
@@ -26,6 +27,7 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 - [Next.js v9](https://nextjs.org/)
 - [MATERIAL-UI v4](https://material-ui.com/)
 - [Redux](https://redux.js.org/)
+- [redux-saga](https://redux-saga.js.org/)
 - [TSLint](https://palantir.github.io/tslint/)
 
 ## Requirement

components/molecules/ReduxSagaResponse.tsx

@@ -0,0 +1,30 @@
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import React from "react"
+
+const useStyles = makeStyles((_: Theme) =>
+  createStyles({
+    root: {},
+  })
+)
+
+type Props = {
+  responses: string[]
+}
+
+/**
+ * redux-saga response component
+ * @param props Props
+ */
+export const ReduxSagaResponse = function(props: Props) {
+  const classes = useStyles(props)
+  const { responses } = props
+  return (
+    <ul className={classes.root}>
+      {responses.map((value: string, index: number) => (
+        <li key={index}>
+          [{String(index + 1).padStart(2, "0")}] {value}
+        </li>
+      ))}
+    </ul>
+  )
+}

components/molecules/index.ts

@@ -1,2 +1,3 @@
 export * from "./NextListItem"
 export * from "./PageHeader"
+export * from "./ReduxSagaResponse"

components/organisms/ReduxSagaSample.tsx

@@ -0,0 +1,124 @@
+import { Box, InputAdornment, TextField, Typography } from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import { Create, Timer } from "@material-ui/icons"
+import React, { useEffect, useState } from "react"
+import { IReduxSagaState } from "../../store/redux-saga"
+import { ReduxSagaResponse } from "../molecules"
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {},
+    title: {
+      fontSize: "50px",
+      marginBottom: theme.spacing(2),
+    },
+    subTitle: {
+      fontSize: "35px",
+    },
+    section: {
+      marginBottom: theme.spacing(4),
+    },
+  })
+)
+
+type Props = {
+  title: string
+  description?: React.ReactNode
+  onChange: (inputValue: string) => void
+  storeState?: IReduxSagaState
+  responseResultMax: number
+  interval: number
+}
+
+/**
+ * redux-saga sample component
+ * @param props {Props} props
+ */
+export const ReduxSagaSample = function(props: Props) {
+  const {
+    title,
+    description,
+    onChange,
+    storeState,
+    responseResultMax,
+    interval,
+  } = props
+  const classes = useStyles(props)
+  const [requestValue, setRequestValue] = useState<string>("")
+  const [responseValues, setResponseValues] = useState<string[]>([])
+  const [previousResponseValue, setPreviousResponseValue] = useState<string>("")
+
+  useEffect(() => {
+    if (!storeState.timestamp) {
+      return
+    }
+    const fetchResult = `${storeState.timestamp} - ${storeState.input}`
+    if (fetchResult === previousResponseValue) {
+      return
+    }
+    responseValues.unshift(fetchResult)
+    if (responseValues && responseResultMax < responseValues.length) {
+      responseValues.pop()
+    }
+    setResponseValues(responseValues)
+    setPreviousResponseValue(fetchResult)
+  }, [storeState.timestamp])
+
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value || ""
+    setRequestValue(value)
+    onChange(value)
+  }
+
+  return (
+    <>
+      <Typography variant="h2" gutterBottom className={classes.title}>
+        {title} with redux-saga
+      </Typography>
+
+      {description && <Box className={classes.section}>{description}</Box>}
+
+      <Box className={classes.section}>
+        <TextField
+          value={interval}
+          label="interval (milliseconds)"
+          helperText="Edit constants/SagaSetting.ts"
+          variant="filled"
+          InputProps={{
+            readOnly: true,
+            startAdornment: (
+              <InputAdornment position="start">
+                <Timer />
+              </InputAdornment>
+            ),
+          }}
+        />
+      </Box>
+
+      <Box className={classes.section}>
+        <TextField
+          value={requestValue}
+          label="Fetch API every onChange"
+          onChange={handleChangeInput}
+          variant="outlined"
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <Create />
+              </InputAdornment>
+            ),
+          }}
+        />
+      </Box>
+
+      <Typography variant="h3" gutterBottom className={classes.subTitle}>
+        {title} response
+      </Typography>
+
+      <Box>
+        {responseValues && <ReduxSagaResponse responses={responseValues} />}
+      </Box>
+    </>
+  )
+}

components/organisms/index.ts

@@ -1,3 +1,4 @@
 export * from "./HeaderArticleContainer"
+export * from "./ReduxSagaSample"
 export * from "./ResponsiveDrawer"
 export * from "./Sidenavi"

constants/Page.ts

@@ -1,9 +1,7 @@
 import { Color } from "@material-ui/core"
-import { blue, orange, pink, red } from "@material-ui/core/colors"
+import { blue, orange, pink, red, teal } from "@material-ui/core/colors"
 import { SvgIconProps } from "@material-ui/core/SvgIcon"
-import HomeIcon from "@material-ui/icons/Home"
-import InfoIcon from "@material-ui/icons/Info"
-import SaveIcon from "@material-ui/icons/Save"
+import { Home, Info, Save, Whatshot } from "@material-ui/icons"
 import { IEnum } from "."
 
 /**
@@ -23,7 +21,7 @@ export class Page implements IEnum<Page> {
     "Top page | sample",
     "Feat typescript and next.js and redux and material-ui !!",
     "/",
-    HomeIcon,
+    Home,
     pink
   )
   public static readonly REDUX = new Page(
@@ -33,17 +31,27 @@ export class Page implements IEnum<Page> {
     "Redux sample | sample",
     "Basic redux examples with typescript-fsa and immer.",
     "/redux",
-    SaveIcon,
+    Save,
     blue
   )
-  public static readonly ABOUT = new Page(
+  public static readonly REDUX_SAGAA = new Page(
     3,
+    "Redux Saga",
+    "Redux Saga sample",
+    "Redux Saga sample | sample",
+    "Basic redux-saga examples with typescript-fsa and immer.",
+    "/redux-saga",
+    Whatshot,
+    teal
+  )
+  public static readonly ABOUT = new Page(
+    10,
     "About",
     "About this site",
     "About | sample",
     "Site about page.",
     "/about",
-    InfoIcon,
+    Info,
     orange
   )
   public static readonly ERROR = new Page(
@@ -53,7 +61,7 @@ export class Page implements IEnum<Page> {
     "Error | sample",
     "Error.",
     "/error",
-    InfoIcon,
+    Info,
     red
   )
 

constants/SagaSetting.ts

@@ -0,0 +1,4 @@
+export const SagaSetting = {
+  DEBOUNCE_INTERVAL: 2000,
+  THROTTLE_INTERVAL: 1000,
+}

constants/index.ts

@@ -1,3 +1,4 @@
 export * from "./IEnum"
 export * from "./Page"
+export * from "./SagaSetting"
 export * from "./SiteInfo"

model/InputResponseModel.ts

@@ -0,0 +1,5 @@
+export interface InputResponseModel {
+  input: string
+  timestamp: string
+  error?: Error
+}

model/index.ts

@@ -0,0 +1 @@
+export * from "./InputResponseModel"

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
+    "redux-saga": "^1.1.3",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.1"
   },