diff --git a/README.md b/README.md index 8deab22..94bb303 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,4 @@ - React - SCSS - react-router-dom +- Axios diff --git a/package-lock.json b/package-lock.json index 66d9e16..335ce0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.5.0", + "axios": "^0.26.0", "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -4460,6 +4461,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -7656,9 +7665,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "node_modules/follow-redirects": { - "version": "1.14.7", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz", - "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==", + "version": "1.14.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", "funding": [ { "type": "individual", @@ -20499,6 +20508,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.0.tgz", "integrity": "sha512-btWy2rze3NnxSSxb7LtNhPYYFrRoFBfjiGzmSc/5Hu47wApO2KNXjP/w7Nv2Uz/Fyr/pfEiwOkcXhDxu0jz5FA==" }, + "axios": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "requires": { + "follow-redirects": "^1.14.8" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -22886,9 +22903,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "follow-redirects": { - "version": "1.14.7", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz", - "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==" + "version": "1.14.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" }, "forever-agent": { "version": "0.6.1", diff --git a/package.json b/package.json index a751a0d..4d355ca 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.5.0", + "axios": "^0.26.0", "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/App.js b/src/App.js index 8753272..90a1865 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,10 @@ // IMPORT MODULES -import React from "react"; +import React, { useState, useEffect, useMemo } from "react"; import { Routes, Route } from "react-router-dom"; +import { UserContext } from "./backend/UserContext"; + +// IMPORT FUNCTIONS +import { getUserInfo } from "./backend/getUserInfo"; // IMPORT STYLES import "./styles/style.scss"; @@ -20,20 +24,34 @@ import SignUp from "./pages/SignUp"; import Home from "./pages/Home"; const App = () => { + const loginUrl = "http://95.85.124.85:8000/api/me"; + const [user, setUser] = useState(); + const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]); + useEffect(() => { + const userToken = localStorage.getItem("userToken"); + if (userToken) { + getUserInfo(loginUrl, userToken, setUser); + } + }, []); return ( -
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
+ +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + } /> + } /> + +
+ ); }; diff --git a/src/backend/UserContext.js b/src/backend/UserContext.js new file mode 100644 index 0000000..8e9c932 --- /dev/null +++ b/src/backend/UserContext.js @@ -0,0 +1,4 @@ +// IMPORT MODULES +import { createContext } from "react"; + +export const UserContext = createContext(null); diff --git a/src/backend/getUserInfo.js b/src/backend/getUserInfo.js new file mode 100644 index 0000000..817c88b --- /dev/null +++ b/src/backend/getUserInfo.js @@ -0,0 +1,15 @@ +// IMPORT MODULES +import axios from "axios"; + +export const getUserInfo = (url, userToken, setState) => { + axios.get(`${url}?token=${userToken}`).then((res, err) => { + if (err) { + return `Failed to fetch user info: ${err}`; + } + if (setState) { + setState(res.data); + } else { + return res.data; + } + }); +}; diff --git a/src/backend/loginUser.js b/src/backend/loginUser.js new file mode 100644 index 0000000..b884c44 --- /dev/null +++ b/src/backend/loginUser.js @@ -0,0 +1,11 @@ +// IMPORT MODULES +import axios from "axios"; + +export const loginUser = (url, formData, setState, tokenSaved) => { + axios.post(url, formData).then((res, err) => { + setState(res.data.user); + if (tokenSaved) { + localStorage.setItem("userToken", res.data.token); + } + }); +}; diff --git a/src/components/sign/SignForm.js b/src/components/sign/SignForm.js index c863816..1eb3ec7 100644 --- a/src/components/sign/SignForm.js +++ b/src/components/sign/SignForm.js @@ -6,15 +6,16 @@ import { Link } from "react-router-dom"; import logout from "../../icons/logout.svg"; import up from "../../icons/clipboard.svg"; -const SignForm = ({ setRecoveryOpen }) => { +const SignForm = ({ setRecoveryOpen, setFormData }) => { + const data = new FormData(); const [inputValid, setInputValid] = useState({ - login: false, - password: false, + login: null, + password: null, }); const [btnEnabled, setBtnEnabled] = useState(false); useEffect(() => { - if (inputValid.login === true && inputValid.password === true) { + if (inputValid.login && inputValid.password) { setBtnEnabled(true); } else { setBtnEnabled(false); @@ -38,9 +39,10 @@ const SignForm = ({ setRecoveryOpen }) => { name="login" onChange={(e) => { if (e.target.value !== "") { - setInputValid({ ...inputValid, login: true }); + setInputValid({ ...inputValid, login: e.target.value }); + data.append("username", e.target.value); } else { - setInputValid({ ...inputValid, login: false }); + setInputValid({ ...inputValid, login: null }); } }} /> @@ -54,9 +56,9 @@ const SignForm = ({ setRecoveryOpen }) => { id="password" onChange={(e) => { if (e.target.value.length >= 8) { - setInputValid({ ...inputValid, password: true }); + setInputValid({ ...inputValid, password: e.target.value }); } else { - setInputValid({ ...inputValid, password: false }); + setInputValid({ ...inputValid, password: null }); } }} /> @@ -75,7 +77,16 @@ const SignForm = ({ setRecoveryOpen }) => {
-