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

react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
Conversation 0 Commits 290 Files Changed 270 +1400 -1278
6 changed files with 1400 additions and 1278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 58ee7fa884 - Show all commits

15
GrossesMitaines/GrossesMitainesAPI/Program.cs
View File

@ -1,17 +1,24 @@
using GrossesMitainesAPI.Data;
using Microsoft.EntityFrameworkCore;
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);
// 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();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContextFactory<InventoryContext>(options => { options.UseSqlServer("DefaultConnection"); });
var app = builder.Build();
// Configure the HTTP request pipeline.
@ -22,8 +29,10 @@ if (app.Environment.IsDevelopment()) {
app.UseHttpsRedirection();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthorization();
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-dom": "^18.2.0",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"react-transition-group": "^4.4.5",
"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 (
<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">
<div className="item-name-container">
<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 { Link } from 'react-router-dom';
@ -9,21 +8,16 @@ const ItemList = ({ items }) => {
<div className='item-list'>
{items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item imageUrl={item.imageUrl}
name={item.name}
<Item imageUrl={item.imageName}
name={item.title}
price={item.price}
status={item.status}
newPrice={item.newPrice}
newPrice={item.promoPrice}
/>
</Link>
)}
</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 ItemList from "../components/ItemList";
import { useState } from 'react';
const Morceaux = () => {
const Morceaux = (startingProducts) => {
// public enum States {
@ -13,73 +15,100 @@ const Morceaux = () => {
// Discontinued
// }
const products = [
{
"id":0,
"name": "Ceinture flèchée",
"status": 0,
"price": 85.86,
"newPrice": -1,
"imageUrl": "/images/ceintureflechee.jpg"
},
{
"id":1,
"name": "Chandail de nowel",
"status": 2,
"price": 69.50,
"newPrice": -1,
"imageUrl": "/images/chandailquetaine.jpg"
},
{
"id":2,
"name": "Pantoufles du Canadien en Phentex",
"status": 5,
"price": 15.64,
"newPrice": -1,
"imageUrl": "/images/pantouflesCH.jpg"
},
{
"id":3,
"name": "Jean-Luc Mongrain",
"status": 1,
"price": 1453.12,
"newPrice": -1,
"imageUrl": "/images/jeanlucmongrain.jpg"
},
{
"id":4,
"name": "Mitaines de laine",
"status": 4,
"price": 24.99,
"newPrice": 19.99,
"imageUrl": "/images/mitaines.jpg"
},
{
"id":5,
"name": "Sous-vêtements coquins",
"status": 3,
"price": 19.99,
"newPrice": 14.99,
"imageUrl": "/images/kokin.jpg"
},
{
"id":6,
"name": "Doudou douce et grise",
"status": 3,
"price": 99.99,
"newPrice": 89.99,
"imageUrl": "/images/doudou.jpg"
}
];
// const products = [
// {
// "id":0,
// "name": "Ceinture flèchée",
// "status": 0,
// "price": 85.86,
// "newPrice": -1,
// "imageUrl": "/images/ceintureflechee.jpg"
// },
// {
// "id":1,
// "name": "Chandail de nowel",
// "status": 2,
// "price": 69.50,
// "newPrice": -1,
// "imageUrl": "/images/chandailquetaine.jpg"
// },
// {
// "id":2,
// "name": "Pantoufles du Canadien en Phentex",
// "status": 5,
// "price": 15.64,
// "newPrice": -1,
// "imageUrl": "/images/pantouflesCH.jpg"
// },
// {
// "id":3,
// "name": "Jean-Luc Mongrain",
// "status": 1,
// "price": 1453.12,
// "newPrice": -1,
// "imageUrl": "/images/jeanlucmongrain.jpg"
// },
// {
// "id":4,
// "name": "Mitaines de laine",
// "status": 4,
// "price": 24.99,
// "newPrice": 19.99,
// "imageUrl": "/images/mitaines.jpg"
// },
// {
// "id":5,
// "name": "Sous-vêtements coquins",
// "status": 3,
// "price": 19.99,
// "newPrice": 14.99,
// "imageUrl": "/images/kokin.jpg"
// },
// {
// "id":6,
// "name": "Doudou douce et grise",
// "status": 3,
// "price": 99.99,
// "newPrice": 89.99,
// "imageUrl": "/images/doudou.jpg"
// }
// ];
useEffect(() => {
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 (
<div className="morceaux-container">
<ItemList items={products} />
</div>
<>
<div className="morceaux-container">
<ItemList items={products} />
</div>
{/* faire un spinner qui tourne quand ça load */}
<div>
<Button onClick={handleNextItems} className='btn-load-more'>
...
</Button>
</div>
</>
);
}