Merge pull request #39 from Soongsil-Developers/feature/#32

[#32]
Soongsil-Developers · Sep 8, 2022 · db0780a · db0780a
2 parents ed4f617 + 230bfc4
commit db0780a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 20 deletions.
diff --git a/front/src/atoms/Signup.jsx b/front/src/atoms/Signup.jsx
@@ -0,0 +1,7 @@
+//@ts-check
+import { atom } from 'recoil';
+
+export const SignupState = atom({
+  key: 'src/atoms/Signup.jsx-SignupState',
+  default: false,
+});
diff --git a/front/src/components/Signup.jsx b/front/src/components/Signup.jsx
@@ -1,45 +1,69 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+//@ts-check
+
+import { useRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { SignupState } from '../atoms/Signup';
+import { postUsers } from '../remotes';
 
 const Signup = () => {
+  const [isLoggedIn, setIsLoggedIn] = useRecoilState(SignupState);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+
   return (
     <div>
-      <div class="auth-page">
-        <div class="container page">
-          <div class="row">
-            <div class="col-md-6 offset-md-3 col-xs-12">
-              <h1 class="text-xs-center">Sign up</h1>
-              <p class="text-xs-center">
+      <div className="auth-page">
+        <div className="container page">
+          <div className="row">
+            <div className="col-md-6 offset-md-3 col-xs-12">
+              <h1 className="text-xs-center">Sign up</h1>
+              <p className="text-xs-center">
                 <a href="">Have an account?</a>
               </p>
 
-              <ul class="error-messages">
+              <ul className="error-messages">
                 <li>That email is already taken</li>
               </ul>
 
-              <form>
-                <fieldset class="form-group">
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+
+                  postUsers({ username, email, password }).then((res) => {
+                    if (res.data.user) {
+                      setIsLoggedIn(true);
+                      localStorage.setItem('token', res.data.user.token);
+                    }
+                  });
+                }}
+              >
+                <fieldset className="form-group">
                   <input
-                    class="form-control form-control-lg"
+                    className="form-control form-control-lg"
                     type="text"
                     placeholder="Your Name"
+                    onChange={(e) => setUsername(e.target.value)}
                   />
                 </fieldset>
-                <fieldset class="form-group">
+                <fieldset className="form-group">
                   <input
-                    class="form-control form-control-lg"
+                    className="form-control form-control-lg"
                     type="text"
                     placeholder="Email"
+                    onChange={(e) => setEmail(e.target.value)}
                   />
                 </fieldset>
-                <fieldset class="form-group">
+                <fieldset className="form-group">
                   <input
-                    class="form-control form-control-lg"
+                    className="form-control form-control-lg"
                     type="password"
                     placeholder="Password"
+                    onChange={(e) => setPassword(e.target.value)}
                   />
                 </fieldset>
-                <button class="btn btn-lg btn-primary pull-xs-right">
+                <button className="btn btn-lg btn-primary pull-xs-right">
                   Sign up
                 </button>
               </form>

diff --git a/front/src/remotes/index.jsx b/front/src/remotes/index.jsx
@@ -4,9 +4,7 @@ import axios from 'axios';
 import Signin from '../components/Signin';
 
 const conduitAxios = axios.create({
-  baseURL:
-    // 'https://api.realworld.io/api-docs/#/User%20and%20Authentication/Login',
-    'https://api.realworld.io/api-docs/',
+  baseURL: 'https://api.realworld.io/api',
   // headers: {
   //   'Content-Type': 'application/json',
   // },