feat: fix type-errors

Author: sujii

pages/index.tsx

@@ -1,14 +1,16 @@
 import Head from "next/head";
 import React, { useState, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { JsonFormatter } from "react-json-formatter";
+import JsonFormatter from "react-json-formatter";
 import { usePostalCodeApi } from "../src/hooks/postalCodeApi";
-import { GetAddressFromZip } from "../src/modules/postalCode";
+import {
+  GetAddressFromZip,
+  ClearPostalCodeAction,
+} from "../src/modules/postalCode";
 import styles from "./styles/Home.module.scss";
 
 const IndexPage: React.FC<IndexPageProps> = () => {
   const dispatch = useDispatch();
-  const { address } = useSelector((state: IReduxState) => state.address);
   const [zipCode, setZipCode] = useState<number | string | null>(undefined);
 
   const onChangeField = useCallback(
@@ -23,16 +25,17 @@ const IndexPage: React.FC<IndexPageProps> = () => {
   const addressData = usePostalCodeApi(zipCode);
   const addressStings = JSON.stringify(addressData);
 
-  const JsonStyle = {
+  const jsonStyle = {
     propertyStyle: { color: "red" },
     stringStyle: { color: "green" },
     numberStyle: { color: "darkorange" },
   };
 
   const getAddress = useCallback(() => {
-    if (zipCode) {
-      dispatch(GetAddressFromZip(zipCode));
+    if (!zipCode) {
+      return;
     }
+    GetAddressFromZip(zipCode)(dispatch);
   }, [dispatch, zipCode]);
 
   return (
@@ -45,8 +48,8 @@ const IndexPage: React.FC<IndexPageProps> = () => {
         {addressData?.addressData != undefined ? (
           <JsonFormatter
             json={addressStings}
-            tabWith="4"
-            JsonStyle={JsonStyle}
+            tabWith={4}
+            jsonStyle={jsonStyle}
           />
         ) : (
           <p></p>

src/components/Layout.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect } from "react";
-import { NextPage } from "next";
 
-export type NextPageWithLayout = NextPage & {
-  Layout?: React.FC;
-};
-
-type LayoutProps = {};
+export interface LayoutProps {
+  address?: undefined;
+}
 
 export const Layout: React.FC<LayoutProps> = (props) => {
   useEffect(() => {
@@ -18,7 +15,7 @@ export const Layout: React.FC<LayoutProps> = (props) => {
 
   return (
     <div>
-      <div>{props.children}</div>
+      <div>{props.address}</div>
     </div>
   );
 };

src/hooks/postalCodeApi.ts

@@ -8,7 +8,7 @@ export const usePostalCodeApi = (zipCode: string | number) => {
   const { address } = useSelector((state: IReduxState) => state.address);
 
   const fetchPostalCodeApi = useCallback(() => {
-    dispatch(GetAddressFromZip(zipCode));
+    GetAddressFromZip(zipCode)(dispatch);
   }, [dispatch, zipCode]);
 
   return { addressData: address, fetchPostalCodeApi };

src/modules/postalCode.ts

@@ -2,7 +2,7 @@ import { Dispatch } from "redux";
 import { createAction, handleActions } from "redux-actions";
 import axios from "axios";
 export type AddessFromPostalCodeState = {
-  address?: string[];
+  address?: object[];
 };
 
 const API_POSTALCODE_ENDPOINT = "https://zipcloud.ibsnet.co.jp/api";
@@ -28,15 +28,19 @@ export const GetPostalCodeAction = createAction(GET_ADDRESS_REQUEST);
 export const GetGAddressFromZipSuccessAction =
   createAction(GET_ADDRESS_SUCCESS);
 
-export const ClearPostalCodeAction = createAction<void>(CLEAR_ADDRESS);
+export const GetGAddressFromZipFailureAction =
+  createAction(GET_ADDRESS_FAILURE);
+
+export const ClearPostalCodeAction = createAction(CLEAR_ADDRESS);
 
 export const GetAddressFromZip =
   (zipCode: string | number) => async (dispatch: Dispatch) => {
-    dispatch(GetPostalCodeAction());
     try {
-      const result = await axios.get(
-        API_POSTALCODE_ENDPOINT + "/search?zipcode=" + zipCode
-      );
+      dispatch(GetPostalCodeAction());
+      const result = await axios
+        .get(API_POSTALCODE_ENDPOINT + "/search?zipcode=" + zipCode)
+        .catch(GetGAddressFromZipFailureAction());
+
       if (!result) {
         return;
       }
@@ -47,6 +51,9 @@ export const GetAddressFromZip =
       dispatch(GetGAddressFromZipSuccessAction({ address: result.data }));
     } catch (e) {
       console.error(e);
+      dispatch(
+        GetGAddressFromZipFailureAction({ address: undefined, error: e })
+      );
     }
   };
 
@@ -73,12 +80,23 @@ export default handleActions(
         address,
       };
     },
-    // [CLEAR_ADDRESS]: (state) => {
-    //   return {
-    //     ...state,
-    //     address: undefined,
-    //   };
-    // },
+    [GET_ADDRESS_FAILURE]: (state, action) => {
+      const error = action.payload as Parameters<
+        typeof GetGAddressFromZipFailureAction
+      >[0];
+
+      return {
+        ...state,
+        address: undefined,
+        error,
+      };
+    },
+    [CLEAR_ADDRESS]: (state) => {
+      return {
+        ...state,
+        address: undefined,
+      };
+    },
   },
   addressInitialState
 );