Skip to content
Snippets Groups Projects
Commit 8a3d02c9 authored by Princelle Maxime's avatar Princelle Maxime :gay_pride_flag:
Browse files

:poop: implements api's (missing CORS)

parent 9aadd036
Branches
1 merge request!7🔀 V1
Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ 8a3d02c9
......@@ -15,6 +15,7 @@
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"autoprefixer": "^9",
"axios": "^0.24.0",
"postcss": "^7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
......
src/apis/back.ts 0 → 100644
+ 44
− 0
View file @ 8a3d02c9
import axios from 'axios';
import { Product } from '../cart/CartTypes';
const BASE_URL = "https://back.erp.uni.princelle.org/api/v1"
// Fetch items from API
export function getItems(): Promise<Product[]> {
return new Promise((resolve, reject) => {
axios.get(`${BASE_URL}/item`, {headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}}).then(function ({data}) {
let productArray: Product[] = [];
console.log(data)
axios.get(`${BASE_URL}/stock`, {headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}}).then((stocks) => {
data.forEach(product => {
let stockItem = stocks.data.find(stock => stock.item_id === product.id);
let item = {
name: product.name,
category: product.categoryName,
price: product.price,
stock: stockItem.quantity
}
productArray.push(new Product(item));
});
resolve(productArray);
})
.catch(function (error) {
console.error(error);
reject(error);
});
})
.catch(function (error) {
console.error(error);
reject(error);
});
});
}
\ No newline at end of file
src/apis/student.ts 0 → 100644
+ 42
− 0
View file @ 8a3d02c9
import axios from 'axios';
export class User {
nom: string;
prenom: string;
email: string;
studentNumber: string;
adherant: boolean;
picture?: string;
constructor(nom, prenom, email, studentNumber, adherant, picture?) {
this.nom = nom;
this.prenom = prenom;
this.email = email;
this.studentNumber = studentNumber;
this.adherant = adherant;
this.picture = picture;
}
}
const BASE_URL = "https://student.erp.uni.princelle.org"
// Fetch users from API
export function getUsers(): Promise<User[]> {
return new Promise((resolve, reject) => {
axios.get(`${BASE_URL}/api/etudiants`, {headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}}).then(function ({data}) {
let usersArray: User[] = [];
console.log(data)
data.forEach(user => {
usersArray.push(new User(user.lastname, user.firstname, user.email, user.student_number, true, user.picture));
});
resolve(usersArray);
})
.catch(function (error) {
console.error(error);
reject(error);
});
});
}
\ No newline at end of file
src/cart/CartTypes.ts
+ 1
− 0
View file @ 8a3d02c9
......@@ -7,6 +7,7 @@ export class Product {
public stock: number;
public quantity?: number;
public stockPrice?: number;
public edit?: boolean;
constructor(params: Product) {
Object.assign(this, params);
......
src/pages/sell.tsx
+ 17
− 69
View file @ 8a3d02c9
......@@ -7,89 +7,37 @@ import Cart from '../components/sell/cart';
import { Product } from '../cart/CartTypes'
const products: Product[] = [
{
name: "Coca Cola",
category: "Boissons",
price: 0.5,
stock: 50,
},
{
name: "Fanta",
category: "Boissons",
price: 0.5,
stock: 50,
},
{
name: "Ice Tea",
category: "Boissons",
price: 0.5,
stock: 50,
},
{
name: "Eau",
category: "Boissons",
price: 0.5,
stock: 50,
},
{
name: "Eau gazeuse",
category: "Boissons",
price: 0.5,
stock: 50,
},
{
name: "Sandwich",
category: "Manger",
price: 2,
stock: 30,
},
{
name: "Pizza",
category: "Manger",
price: 2,
stock: 20,
},
{
name: "Baguettine",
category: "Manger",
price: 1.5,
stock: 20,
},
{
name: "Wrap",
category: "Manger",
price: 1.5,
stock: 10,
},
{
name: "Donut",
category: "Dessert",
price: 1,
stock: 30,
},
];
import { getItems } from '../apis/back';
const Sell = () => {
let [search, setSearch] = useState("");
let [productsList, setProductsList] = useState(products);
let [productsList, setProductsList] = useState<Product[]>([]);
let [rawProductList, setRawProductList] = useState<Product[]>([]);
useEffect(() => {
// Filter products by name with the search term
setProductsList(products.filter(product => {
setProductsList(rawProductList.filter(product => {
return product.name.toLowerCase().includes(search.toLowerCase());
}))
}, [search]);
}, [search, rawProductList]);
useEffect(() => {
getItems().then((items) => {
setRawProductList(items);
setProductsList(items);
});
}, []);
return (
<div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
{rawProductList.length > 0 && <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
<label htmlFor="search" className="block text-sm font-medium text-gray-700">Recherche</label>
<div className="mt-1 relative flex items-center">
<input type="text" name="search" id="search" value={search} onChange={(e) => { setSearch(e.target.value) }} className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
</div>}
{productsList.length > 0
? [...Array.from(new Set(productsList.map(item => item.category)))].map((category) => (
<div key={category}>
......@@ -103,7 +51,7 @@ const Sell = () => {
: <div className="text-center w-full mt-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3>
<p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
{rawProductList.length > 0 && <><p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
<div className="mt-6">
<button
type="button"
......@@ -113,7 +61,7 @@ const Sell = () => {
<CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Afficher tout
</button>
</div>
</div></>}
</div>
}
</div>
......
src/pages/stock.tsx
+ 18
− 79
View file @ 8a3d02c9
import React, { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
interface Product {
name: string,
category: string,
price: string,
quantity: number,
edit?: boolean
}
const products: Product[] = [
{
name: "Coca Cola",
category: "Boissons",
price: "0,50€",
quantity: 50
},
{
name: "Fanta",
category: "Boissons",
price: "0,50€",
quantity: 50
},
{
name: "Ice Tea",
category: "Boissons",
price: "0,50€",
quantity: 50
},
{
name: "Eau",
category: "Boissons",
price: "0,50€",
quantity: 50
},
{
name: "Eau gazeuse",
category: "Boissons",
price: "0,50€",
quantity: 50
},
{
name: "Sandwich",
category: "Manger",
price: "2€",
quantity: 30
},
{
name: "Pizza",
category: "Manger",
price: "2€",
quantity: 20
},
{
name: "Baguettine",
category: "Manger",
price: "1,50€",
quantity: 20
},
{
name: "Wrap",
category: "Manger",
price: "1,50€",
quantity: 10
},
{
name: "Donut",
category: "Dessert",
price: "1€",
quantity: 30
},
];
import { Product } from '../cart/CartTypes';
import { getItems } from '../apis/back';
const Stock = () => {
let [search, setSearch] = useState("");
let [productsList, setProductsList] = useState(products);
let [productsList, setProductsList] = useState<Product[]>([]);
let [rawProductList, setRawProductList] = useState<Product[]>([]);
useEffect(() => {
// Filter products by name with the search term
setProductsList(products.filter(product => {
setProductsList(rawProductList.filter(product => {
return product.name.toLowerCase().includes(search.toLowerCase());
}))
}, [search]);
}, [search, rawProductList]);
useEffect(() => {
getItems().then((items) => {
setRawProductList(items);
setProductsList(items);
});
}, [])
let updateProductQuantity = (productId, quantity) =>
{
......@@ -107,19 +46,19 @@ const Stock = () => {
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
{rawProductList.length > 0 && <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
<label htmlFor="search" className="block text-sm font-medium text-gray-700">Recherche</label>
<div className="mt-1 relative flex items-center">
<input type="text" name="search" id="search" value={search} onChange={(e) => { setSearch(e.target.value) }}
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
</div>}
<div className="max-w-7xl mx-auto">
{productsList.length === 0 ?
<div className="text-center w-full mt-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3>
<p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
{rawProductList.length > 0 && <><p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
<div className="mt-6">
<button
type="button"
......@@ -129,9 +68,9 @@ const Stock = () => {
<CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Afficher tout
</button>
</div>
</div></>}
</div> :
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<div className="shadow overflow-y-auto border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
......
src/pages/users.tsx
+ 20
− 23
View file @ 8a3d02c9
import React, { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
interface User {
nom: string,
prenom: string,
email: string,
studentNumber: string,
adherant: boolean
}
const users: User[] = [
{nom: "Dupont", prenom: "Jean", email: "jean.dupont@etu.unistra.fr", studentNumber: "123456789", adherant: true},
{nom: "Durand", prenom: "Paul", email: "paul.durand@etu.unistra.fr", studentNumber: "987654321", adherant: true},
{nom: "Martin", prenom: "Pierre", email: "pierre.martin@etu.unistra.fr", studentNumber: "1234589", adherant: false},
]
import { User, getUsers } from '../apis/student';
const Users = () => {
let [search, setSearch] = useState("");
let [usersList, setUsersList] = useState(users);
let [rawUsers, setRawUsers] = useState<User[]>([]);
let [usersList, setUsersList] = useState<User[]>([]);
useEffect(() => {
// Filter users by nom or prenom with search term
let filteredUsers = users.filter(user => {
let filteredUsers = rawUsers.filter(user => {
return user.nom.toLowerCase().includes(search.toLowerCase()) ||
user.prenom.toLowerCase().includes(search.toLowerCase()) ||
user.studentNumber.toLowerCase().includes(search.toLowerCase());
});
setUsersList(filteredUsers);
}, [search]);
}, [search, rawUsers]);
useEffect(() => {
// Fetch users from API
getUsers().then((data) => {
setRawUsers(data);
setUsersList(data);
});
}, [])
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
<div className="max-w-7xl overflow-y-hidden mx-auto px-4 sm:px-6 md:px-8">
{rawUsers.length > 0 && <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
<label htmlFor="search" className="block text-sm font-medium text-gray-700">Recherche</label>
<div className="mt-1 relative flex items-center">
<input type="text" name="search" id="search" value={search} onChange={(e) => { setSearch(e.target.value) }}
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
</div>}
<div className="max-w-7xl mx-auto">
{usersList.length === 0 ?
<div className="text-center w-full mt-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun utilisateur trouvé !</h3>
<p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
{rawUsers.length > 0 && <><p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
<div className="mt-6">
<button
type="button"
......@@ -53,10 +50,10 @@ const Users = () => {
<CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Afficher tout
</button>
</div>
</div></>}
</div> :
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<div className="shadow overflow-y-hidden border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full overflow-y-auto divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
......
yarn.lock
+ 12
− 0
View file @ 8a3d02c9
......@@ -2643,6 +2643,13 @@ axe-core@^4.0.2:
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz"
integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
axios@^0.24.0:
version "0.24.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
dependencies:
follow-redirects "^1.14.4"
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
......@@ -5209,6 +5216,11 @@ follow-redirects@^1.0.0:
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz"
integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
follow-redirects@^1.14.4:
version "1.14.6"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment