Apply type change and call new functions.

src/components/AuthUser/SignInForm/SignInForm.tsx

@@ -7,43 +7,31 @@ import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
 import { AuthContext } from 'components/AuthUser/AuthContext';
 import { useStyles } from './useStyles';
+import { fetchCookie } from './fetchCookie';
+import { CredentialsType } from './CredentialsType';
 
-const configDjangoCookieName = (): void => {
-  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
-  axios.defaults.xsrfCookieName = 'csrftoken';
-  axios.defaults.withCredentials = true;
+const defaultValues: CredentialsType = {
+  username: '',
+  password: '',
 };
 
 export const SignInForm: FC = () => {
-  const [isCookieFetched, setisCookieFetched] = useState<string>('');
+  const [isCookieFetched, setIsCookieFetched] = useState<string>('');
 
-  configDjangoCookieName();
   useEffect(() => {
-    const fetchCookie = async (): Promise<unknown> => {
-      const response = await axios('/api/web/csrf');
-      setisCookieFetched(response.data.token);
-      return null;
-    };
-    if (!isCookieFetched) fetchCookie();
+    if (!isCookieFetched) fetchCookie(setIsCookieFetched);
   }, [isCookieFetched]);
+
   const history = useHistory();
   const { setRole } = useContext(AuthContext);
 
-  type FormData = {
-    username: string;
-    password: string;
-  };
-
-  const defaultValues: FormData = {
-    username: '',
-    password: '',
-  };
-
-  const { control, errors, setError, handleSubmit } = useForm<FormData>({
+  const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({
     defaultValues,
   });
 
-  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
+  const onSubmit: SubmitHandler<CredentialsType> = (
+    values: CredentialsType,
+  ) => {
     axios
       .post(
         '/api/web/login',