memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic api link for item list

Browse Source
This commit is contained in:
Victor Turgeon 2022-10-17 13:07:59 -07:00
parent b95e0800fb
commit 58ee7fa884
6 changed files with 1400 additions and 1278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
GrossesMitaines/GrossesMitainesAPI/Program.cs
View File

@ -1,17 +1,24 @@
using GrossesMitainesAPI.Data; using GrossesMitainesAPI.Data;
using Microsoft.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args); var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
builder.Services.AddCors(options => {
options.AddPolicy(name: MyAllowSpecificOrigins,
policy => {
policy.WithOrigins("http://localhost:3000",
"http://localhost:3001");
});
});
builder.Services.AddControllers(); builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer(); builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(); builder.Services.AddSwaggerGen();
builder.Services.AddDbContextFactory<InventoryContext>(options => { options.UseSqlServer("DefaultConnection"); }); builder.Services.AddDbContextFactory<InventoryContext>(options => { options.UseSqlServer("DefaultConnection"); });
var app = builder.Build(); var app = builder.Build();
// Configure the HTTP request pipeline. // Configure the HTTP request pipeline.
@ -22,8 +29,10 @@ if (app.Environment.IsDevelopment()) {
app.UseHttpsRedirection(); app.UseHttpsRedirection();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthorization(); app.UseAuthorization();
app.MapControllers(); app.MapControllers();
app.Run(); app.Run();

2492
GrossesMitaines/grosses-mitaines-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
GrossesMitaines/grosses-mitaines-ui/package.json
View File

@ -13,7 +13,7 @@
"react-devtools": "^4.26.0", "react-devtools": "^4.26.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.4.1", "react-router-dom": "^6.4.1",
"react-scripts": "5.0.1", "react-scripts": "^5.0.1",
"react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

2
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@ -84,7 +84,7 @@ const Item = ({ imageUrl, name, price, newPrice, status }) => {
return ( return (
<Card className="item"> <Card className="item">
<Card.Img className="item-img" variant="top" src={imageUrl} /> <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
<Card.Body className="item-info"> <Card.Body className="item-info">
<div className="item-name-container"> <div className="item-name-container">
<Card.Title className="item-name"> <Card.Title className="item-name">

14
GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
View File

@ -1,4 +1,3 @@
import { Button } from 'react-bootstrap';
import Item from './Item'; import Item from './Item';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -9,21 +8,16 @@ const ItemList = ({ items }) => {
<div className='item-list'> <div className='item-list'>
{items.map((item) => {items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}> <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item imageUrl={item.imageUrl} <Item imageUrl={item.imageName}
name={item.name} name={item.title}
price={item.price} price={item.price}
status={item.status} status={item.status}
newPrice={item.newPrice} newPrice={item.promoPrice}
/> />
</Link> </Link>
)} )}
</div> </div>
<div>
<Button className='btn-load-more'>
...
</Button>
</div>
</> </>
) )

153
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@ -1,7 +1,9 @@
import { Button } from 'react-bootstrap';
import { useEffect } from "react"; import { useEffect } from "react";
import ItemList from "../components/ItemList"; import ItemList from "../components/ItemList";
import { useState } from 'react';
const Morceaux = () => { const Morceaux = (startingProducts) => {
// public enum States { // public enum States {
@ -13,73 +15,100 @@ const Morceaux = () => {
// Discontinued // Discontinued
// } // }
const products = [ // const products = [
{ // {
"id":0, // "id":0,
"name": "Ceinture flèchée", // "name": "Ceinture flèchée",
"status": 0, // "status": 0,
"price": 85.86, // "price": 85.86,
"newPrice": -1, // "newPrice": -1,
"imageUrl": "/images/ceintureflechee.jpg" // "imageUrl": "/images/ceintureflechee.jpg"
}, // },
{ // {
"id":1, // "id":1,
"name": "Chandail de nowel", // "name": "Chandail de nowel",
"status": 2, // "status": 2,
"price": 69.50, // "price": 69.50,
"newPrice": -1, // "newPrice": -1,
"imageUrl": "/images/chandailquetaine.jpg" // "imageUrl": "/images/chandailquetaine.jpg"
}, // },
{ // {
"id":2, // "id":2,
"name": "Pantoufles du Canadien en Phentex", // "name": "Pantoufles du Canadien en Phentex",
"status": 5, // "status": 5,
"price": 15.64, // "price": 15.64,
"newPrice": -1, // "newPrice": -1,
"imageUrl": "/images/pantouflesCH.jpg" // "imageUrl": "/images/pantouflesCH.jpg"
}, // },
{ // {
"id":3, // "id":3,
"name": "Jean-Luc Mongrain", // "name": "Jean-Luc Mongrain",
"status": 1, // "status": 1,
"price": 1453.12, // "price": 1453.12,
"newPrice": -1, // "newPrice": -1,
"imageUrl": "/images/jeanlucmongrain.jpg" // "imageUrl": "/images/jeanlucmongrain.jpg"
}, // },
{ // {
"id":4, // "id":4,
"name": "Mitaines de laine", // "name": "Mitaines de laine",
"status": 4, // "status": 4,
"price": 24.99, // "price": 24.99,
"newPrice": 19.99, // "newPrice": 19.99,
"imageUrl": "/images/mitaines.jpg" // "imageUrl": "/images/mitaines.jpg"
}, // },
{ // {
"id":5, // "id":5,
"name": "Sous-vêtements coquins", // "name": "Sous-vêtements coquins",
"status": 3, // "status": 3,
"price": 19.99, // "price": 19.99,
"newPrice": 14.99, // "newPrice": 14.99,
"imageUrl": "/images/kokin.jpg" // "imageUrl": "/images/kokin.jpg"
}, // },
{ // {
"id":6, // "id":6,
"name": "Doudou douce et grise", // "name": "Doudou douce et grise",
"status": 3, // "status": 3,
"price": 99.99, // "price": 99.99,
"newPrice": 89.99, // "newPrice": 89.99,
"imageUrl": "/images/doudou.jpg" // "imageUrl": "/images/doudou.jpg"
} // }
]; // ];
useEffect(() => { useEffect(() => {
document.title = 'Morceaux'; document.title = 'Morceaux';
}); });
const [products, setProducts] = useState([]);
const handleNextItems = async () => {
var url;
if (products.length > 0)
url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}`;
else
url = 'https://localhost:7292/api/Inventory'
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
setProducts([...products, ...json]);
}
return ( return (
<div className="morceaux-container"> <>
<ItemList items={products} /> <div className="morceaux-container">
</div> <ItemList items={products} />
</div>
{/* faire un spinner qui tourne quand ça load */}
<div>
<Button onClick={handleNextItems} className='btn-load-more'>
...
</Button>
</div>
</>
); );
} }