cli
/
Chronobriq-react
Watch 8
Star 0
Fork 0
Code Issues 3 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Refactorisation des requêtes GET - correction de quelques erreurs

Lou 3 years ago
parent
7c9ff70746
commit
153e9224e0
11 changed files with 43 additions and 104 deletions
Unified View Show Diff Stats
  1. 1
    0
      index.html
  2. BIN
      src/assets/img/star.ico
  3. 0
    0
      src/assets/img/star.svg
  4. 5
    5
      src/components/Navbar/index.jsx
  5. 2
    2
      src/components/forms/LoginForm/index.jsx
  6. 4
    4
      src/components/forms/SignupForm/index.jsx
  7. 6
    5
      src/pages/Login/index.jsx
  8. 1
    1
      src/pages/Signup/index.jsx
  9. 0
    85
      src/services/request/ApiRequests.js
  10. 22
    0
      src/services/request/Get.js
  11. 2
    2
      src/services/request/config.js

+ 1
- 0
index.html View File

4 
     <meta charset="UTF-8" />
 4 
     <meta charset="UTF-8" />
5 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 5 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 
     <title>Vite App</title>
 6 
     <title>Vite App</title>
7 
+    <link rel="icon" href="./src/assets/img/star.ico">
7 
   </head>
 8 
   </head>
8 
   <body>
 9 
   <body>
9 
     <div id="root"></div>
 10 
     <div id="root"></div>

BIN
src/assets/img/star.ico View File


src/assets/img/star-svgrepo-com.svg → src/assets/img/star.svg View File


+ 5
- 5
src/components/Navbar/index.jsx View File

1 
 import React from "react";
 1 
 import React from "react";
2 
 import { Link } from "react-router-dom";
 2 
 import { Link } from "react-router-dom";
3 
 import "./index.scss";
 3 
 import "./index.scss";
4 
-import Star from "../../assets/img/star-svgrepo-com.svg";
4 
+// import Star from "../../assets/img/star-svgrepo-com.svg";
5
5
6 
 const Navbar = () => {
 6 
 const Navbar = () => {
7 
 	return (
 7 
 	return (
8 
 		<div className="navbar">
 8 
 		<div className="navbar">
9 
 			<div className="navbar__LeftSide">
 9 
 			<div className="navbar__LeftSide">
10 
 				<Link to="/">
 10 
 				<Link to="/">
11 
-					<img
11 
+					{/* <img
12 
 						src={Star}
 12 
 						src={Star}
13 
-						class="navbar__Icon"
13 
+						className="navbar__Icon"
14 
 						alt="Temporary icon"
 14 
 						alt="Temporary icon"
15 
 						width="25"
 15 
 						width="25"
16 
 						height="25"
 16 
 						height="25"
17 
-					/>
18 
-					<p class="navbar__BrandName">Registra</p>
17 
+					/> */}
18 
+					<p className="navbar__BrandName">Registra</p>
19 
 				</Link>
 19 
 				</Link>
20 
 			</div>
 20 
 			</div>
21 
 			<div className="navbar__RightSide">
 21 
 			<div className="navbar__RightSide">

+ 2
- 2
src/components/forms/LoginForm/index.jsx View File

5 
 	return (
 5 
 	return (
6 
 		<div className="LoginForm">
 6 
 		<div className="LoginForm">
7 
 			<form>
 7 
 			<form>
8 
-				<label for="email">Adresse email</label>
8 
+				<label htmlFor="email">Adresse email</label>
9 
 				<input type="email" id="email" name="email" />
 9 
 				<input type="email" id="email" name="email" />
10 
-				<label for="password">Mot de passe</label>
10 
+				<label htmlFor="password">Mot de passe</label>
11 
 				<input type="password" id="password" name="password" />
 11 
 				<input type="password" id="password" name="password" />
12 
 			</form>
 12 
 			</form>
13 
 		</div>
 13 
 		</div>

+ 4
- 4
src/components/forms/SignupForm/index.jsx View File

5 
 	return (
 5 
 	return (
6 
 		<div className="signupForm">
 6 
 		<div className="signupForm">
7 
 			<form>
 7 
 			<form>
8 
-				<label for="username">Nom d'utilisateur</label>
8 
+				<label htmlFor="username">Nom d'utilisateur</label>
9 
 				<input type="text" id="username" name="username" />
 9 
 				<input type="text" id="username" name="username" />
10 
-				<label for="email">Adresse email</label>
10 
+				<label htmlFor="email">Adresse email</label>
11 
 				<input type="email" id="email" name="email" />
 11 
 				<input type="email" id="email" name="email" />
12 
-				<label for="password">Mot de passe</label>
12 
+				<label htmlFor="password">Mot de passe</label>
13 
 				<input type="password" id="password" name="password" />
 13 
 				<input type="password" id="password" name="password" />
14 
-				<label for="confirm_password">Confirmation du mot de passe</label>
14 
+				<label htmlFor="confirm_password">Confirmation du mot de passe</label>
15 
 				<input type="password" id="confirm_password" name="confirm_password" />
 15 
 				<input type="password" id="confirm_password" name="confirm_password" />
16 
 			</form>
 16 
 			</form>
17 
 		</div>
 17 
 		</div>

+ 6
- 5
src/pages/Login/index.jsx View File

1 
 import React, { useEffect } from "react";
 1 
 import React, { useEffect } from "react";
2 
 import LoginForm from "../../components/forms/LoginForm/";
 2 
 import LoginForm from "../../components/forms/LoginForm/";
3
3
4 
-import API_REQUEST from "../../services/request/ApiRequests";
4 
+import get from "../../services/request/Get";
5
5
6 
 const LoginPage = () => {
 6 
 const LoginPage = () => {
7 
 	let jwt_token =
 7 
 	let jwt_token =
8 
-		"eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxMSwiZXhwIjoxNjI0NTQ4NjUxfQ.3LPQeeq6M0mPSMPrYTK-NkCDE6DnFGbTIBJvXCW325g";
8 
+		"eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxMSwiZXhwIjoxNjI0NjM2NTg3fQ.G2UH5uH2xsei6Msp_za50pSVeOKaes1peE0ntslnI1o";
9
9
10 
 	useEffect(() => {
 10 
 	useEffect(() => {
11 
-		let response = API_REQUEST.request("GET", "/users", null, jwt_token);
12 
-		console.log("COUCOU");
11 
+		console.log("HELLO 2");
12 
+		let response = get("/users", jwt_token);
13 
+		console.log("HELLO 3");
13 
 		console.log(response);
 14 
 		console.log(response);
14 
 	}, []);
 15 
 	}, []);
15
16
16 
 	return (
 17 
 	return (
17 
-		<div class="LoginPage">
18 
+		<div className="LoginPage">
18 
 			<h2>Page de connexion</h2>
 19 
 			<h2>Page de connexion</h2>
19 
 			<LoginForm />
 20 
 			<LoginForm />
20 
 		</div>
 21 
 		</div>

+ 1
- 1
src/pages/Signup/index.jsx View File

4
4
5 
 const SignupPage = () => {
 5 
 const SignupPage = () => {
6 
 	return (
 6 
 	return (
7 
-		<div class="SignupPage">
7 
+		<div className="SignupPage">
8 
 			<h2>Page d'inscription</h2>
 8 
 			<h2>Page d'inscription</h2>
9 
 			<SignupForm />
 9 
 			<SignupForm />
10 
 		</div>
 10 
 		</div>

+ 0
- 85
src/services/request/ApiRequests.js View File

1 
-import axios from 'axios';
2 
-import { API_BASE_URL } from "./config.js";
3 
-
4 
-class ApiRequests {
5 
-  constructor(base_url = API_BASE_URL){
6 
-    this.base_url = base_url;
7 
-  }
8 
-
9 
-  // General request method
10 
-  // async request( method, body = null, jwt_token = null, header = {"Content-Type": "application/json"} ){
11 
-
12 
-  //   let options = {
13 
-  //     method: method,
14 
-  //     headers: jwt_token ? {...header, "Authorization": jwt_token} : header
15 
-  //   }
16 
-
17 
-  //   options = body ? { ...options, ...{ body: JSON.stringify(body) } } : options;
18 
-
19 
-  //   let api_response = await fetch(this.endpoint, options)
20 
-  //     .then((response) => response)
21 
-  //     .then((then))
22 
-  // }
23 
-
24 
-  async request(method, endpoint, body = null, jwt_token = null, header = { "Content-Type": "application/json" }){
25 
-
26 
-    let opt = header;
27 
-    if (jwt_token){
28 
-        opt["Authorization"] = jwt_token
29 
-    }
30 
-
31 
-    switch(method){
32 
-      case "GET":
33 
-        axios.get(this.base_url + endpoint, {
34 
-          headers: opt
35 
-        })
36 
-          .then(res => {
37 
-            const response = res.data;
38 
-            return response;
39 
-          })
40 
-          .catch(err => {
41 
-            console.log(err);
42 
-          })
43 
-
44 
-      case "POST":
45 
-        axios.post(this.base_url + endpoint, body, {
46 
-          headers: opt
47 
-        })
48 
-          .then(res => {
49 
-            const response = res.data;
50 
-            return response;
51 
-          })
52 
-          .catch(err => {
53 
-            console.log(err);
54 
-          })
55 
-
56 
-      case "PATCH":
57 
-        axios.patch(this.base_url + endpoint, body, {
58 
-          headers: opt
59 
-        })
60 
-          .then(res => {
61 
-            const response = res.data;
62 
-            return response;
63 
-          })
64 
-          .catch(err => {
65 
-            console.log(err);
66 
-          })
67 
-
68 
-
69 
-      case "DELETE":
70 
-        axios.delete(this.base_url + endpoint, {
71 
-          headers: opt
72 
-        })
73 
-          .then(res => {
74 
-            const response = res;
75 
-            return response;
76 
-          })
77 
-          .catch(err => {
78 
-            console.log(err);
79 
-          })
80 
-    }
81 
-  }
82 
-}
83 
-
84 
-const API_REQUEST = new ApiRequests();
85 
-export default API_REQUEST;

+ 22
- 0
src/services/request/Get.js View File

1 
+import axios from 'axios';
2 
+import { BASE_URL } from "./config.js";
3 
+
4 
+
5 
+const get = async (
6 
+  endpoint,
7 
+  jwt_token = null,
8 
+  header = { "Content-Type": "application/json" }) => {
9 
+
10 
+  let opt = header;
11 
+  if (jwt_token){
12 
+      opt["Authorization"] = jwt_token
13 
+  }
14 
+
15 
+  console.log("HELLO 1");
16 
+  const response = await axios.get(BASE_URL + endpoint, { headers: opt })
17 
+  console.log(response.data);
18 
+  return response.data
19 
+
20 
+}
21 
+
22 
+export default get;

+ 2
- 2
src/services/request/config.js View File

1 
-const API_BASE_URL = "https://registra-api.herokuapp.com/api/v1"
1 
+const BASE_URL = "https://registra-api.herokuapp.com/api/v1"
2
2
3 
 const API_ENDPOINTS = {
 3 
 const API_ENDPOINTS = {
4 
   "users": "/users",
 4 
   "users": "/users",
7 
   "tasks": "/tasks"
 7 
   "tasks": "/tasks"
8 
 }
 8 
 }
9
9
10 
-export { API_BASE_URL, API_ENDPOINTS }
10 
+export { BASE_URL, API_ENDPOINTS }

Write Preview
Loading…
Cancel
Save