Merge pull request #40 from saseungmin/refactoring-auth-input-recoil

[Refactoring] Auth input onChange using recoil selector

src/components/auth/AuthInput.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useRecoilState } from 'recoil';
 
-import authFieldsAtom from '../../recoil/auth';
+import { authWithFields } from '../../recoil/auth';
 
 const authFieldsProperty = {
   userId: {
@@ -23,20 +23,14 @@ const authFieldsProperty = {
 };
 
 const AuthInput = ({ formType, inputName }) => {
-  const [authFieldsState, setAuthFieldsState] = useRecoilState(authFieldsAtom);
+  const [authFieldsState, setAuthFieldsState] = useRecoilState(authWithFields);
 
   const { inputType, placeholder, autoComplete } = authFieldsProperty[inputName];
 
   const onChange = (e, type) => {
     const { name, value } = e.target;
 
-    setAuthFieldsState({
-      ...authFieldsState,
-      [type]: {
-        ...authFieldsState[type],
-        [name]: value,
-      },
-    });
+    setAuthFieldsState({ name, type, value });
   };
 
   return (
@@ -45,7 +39,7 @@ const AuthInput = ({ formType, inputName }) => {
       name={inputName}
       placeholder={placeholder}
       autoComplete={autoComplete}
-      value={authFieldsState[formType][inputName]}
+      value={authFieldsState[inputName]}
       onChange={(e) => onChange(e, formType)}
     />
   );

src/components/auth/AuthModalForm.jsx

@@ -5,8 +5,8 @@ import { useRecoilValue, useResetRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
-import authFieldsAtom, { authStatusAtom } from '../../recoil/auth';
 import { FORM_TYPE } from '../../utils/constants/constants';
+import authFieldsAtom, { authStatusAtom } from '../../recoil/auth';
 
 import AuthInput from './AuthInput';
 

src/components/auth/AuthModalForm.test.jsx

@@ -4,14 +4,27 @@ import { RecoilRoot } from 'recoil';
 
 import { render, fireEvent } from '@testing-library/react';
 
-import AuthModalForm from './AuthModalForm';
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
+import AuthModalForm from './AuthModalForm';
+
+const authFieldsState = {
+  register: {
+    userId: '',
+    password: '',
+    passwordConfirm: '',
+  },
+  login: {
+    userId: '',
+    password: '',
+  },
+};
 
 describe('AuthModalForm', () => {
-  const renderAuthForm = (auth) => render((
+  const renderAuthForm = ({ auth, fields = authFieldsState }) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         auth={auth}
+        authFields={fields}
       />
       <AuthModalForm />
     </RecoilRoot>
@@ -21,8 +34,10 @@ describe('AuthModalForm', () => {
     context('When type login', () => {
       it('renders login form contents', () => {
         const props = {
-          type: 'login',
-          visible: true,
+          auth: {
+            type: 'login',
+            visible: true,
+          },
         };
 
         const { container } = renderAuthForm(props);
@@ -34,8 +49,10 @@ describe('AuthModalForm', () => {
     context('When type register', () => {
       it('renders register form contents', () => {
         const props = {
-          type: 'register',
-          visible: true,
+          auth: {
+            type: 'register',
+            visible: true,
+          },
         };
 
         const { container, getByPlaceholderText } = renderAuthForm(props);
@@ -47,8 +64,10 @@ describe('AuthModalForm', () => {
 
     it('When click Submit button, listen event', () => {
       const props = {
-        type: 'register',
-        visible: true,
+        auth: {
+          type: 'register',
+          visible: true,
+        },
       };
 
       const { getByTestId } = renderAuthForm(props);
@@ -58,8 +77,10 @@ describe('AuthModalForm', () => {
 
     it('When click Close button, the modal window is closed.', () => {
       const props = {
-        type: 'register',
-        visible: true,
+        auth: {
+          type: 'register',
+          visible: true,
+        },
       };
 
       const { container, getByText } = renderAuthForm(props);
@@ -68,13 +89,43 @@ describe('AuthModalForm', () => {
 
       expect(container).toBeEmptyDOMElement();
     });
+
+    it('listens event change input value', () => {
+      const props = {
+        auth: {
+          type: 'login',
+          visible: true,
+        },
+        fields: {
+          login: {
+            userId: '',
+          },
+        },
+      };
+
+      const { getByPlaceholderText } = renderAuthForm(props);
+
+      const input = getByPlaceholderText('아이디');
+
+      fireEvent.change(input, {
+        target: {
+          value: 'seungmin',
+          name: 'userId',
+        },
+      });
+
+      expect(input).not.toBeNull();
+      expect(input).toHaveValue('seungmin');
+    });
   });
 
   context("Isn't visible", () => {
     it('nothing renders', () => {
       const props = {
-        type: 'login',
-        visible: false,
+        auth: {
+          type: 'login',
+          visible: false,
+        },
       };
 
       const { container } = renderAuthForm(props);

src/recoil/auth/index.js

@@ -1,5 +1,6 @@
 import authFieldsAtom, { authStatusAtom } from './atom';
+import authWithFields from './withFields';
 
-export { authStatusAtom };
+export { authStatusAtom, authWithFields };
 
 export default authFieldsAtom;

src/recoil/auth/withFields.js

@@ -0,0 +1,27 @@
+import { selector } from 'recoil';
+
+import authFieldsAtom, { authStatusAtom } from './atom';
+
+const authWithFields = selector({
+  key: 'authWithFields',
+  get: ({ get }) => {
+    const { type } = get(authStatusAtom);
+    const authFields = get(authFieldsAtom);
+
+    return authFields[type];
+  },
+  set: ({ set }, { name, value, type }) => {
+    set(
+      authFieldsAtom,
+      (prevState) => ({
+        ...prevState,
+        [type]: {
+          ...prevState[type],
+          [name]: value,
+        },
+      }),
+    );
+  },
+});
+
+export default authWithFields;