Skip to content

Commit

Permalink
6.0.4
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed May 15, 2024
1 parent 01ab9ea commit ab88434
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 166 deletions.
155 changes: 24 additions & 131 deletions src/components/Outfit/Outfit.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
import React, { useRef } from 'react';
import React, { useState, useEffect } from 'react';
import Carousel from './CarouselI';
import Button from 'react-bootstrap/Button';
import './Outfit.css';
import { useState, useEffect } from 'react';
import apiClient from '../../services/apiClient';
import Modal from 'react-bootstrap/Modal';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';

// This component is used to show the outfit.
const Outfit = ({ handleSubmmit, handleSections}) => {
const Outfit = ({ handleSubmmit, layersTypes }) => {
const [layers, setLayers] = useState([]);
const [layersType, setLayersType] = useState([]);
const [carouselIndex, setCarouselIndex] = useState([]);
const [upperLayers, setUpperLayers] = useState([]);
const [lowerLayers, setLowerLayers] = useState([]);
const [show, setShow] = useState(false);
const [lower, setLower] = useState(false);
const handleClose = () => setShow(false);
const handleShow = (lower) => { setLower(lower); setShow(true); }
const [layer, setLayer] = useState('');
const isInitialMount = useRef(true);


const handleSave = async (event) => {
event.preventDefault();
Expand All @@ -32,130 +19,36 @@ const Outfit = ({ handleSubmmit, handleSections}) => {
handleSubmmit(clothes);
};

const addUpperLayer = async () => {
try {
var layerT = layer;
if (layerT === '') layerT = upperLayers[0];
await apiClient.post(`/wardrobe/upperLayers/${layerT}`)
.then((response) => {
window.location.reload();
});
}
catch (e) {
console.log(e);
}
setLayer('');
};

const addLowerLayer = async () => {
try {
var layerT = layer;
if (layerT === '') layerT = lowerLayers[0];
await apiClient.post(`/wardrobe/lowerLayers/${layerT}`)
.then((response) => {
window.location.reload();
});
}
catch (e) {
console.log(e);
}
setLayer('');
};

const handleDeleteLayer = async (index) => {
try {
await apiClient.delete(`/wardrobe/layers/${layersType[index]}`)
.then((response) => {
window.location.reload();
});
}
catch (e) {
console.log(e);
}
}
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
const getLayers = async () => {
try {
const layers = [];
const layersType = [];
const carouselIndex = [];
const layersTypes = await apiClient.get('/wardrobe/layersTypes');
for (let i = 0; i < layersTypes.data.length; i++) {
layers.push([]);
layersType.push(layersTypes.data[i]);
carouselIndex.push(0);
const answer = await apiClient.get(`/clothing/byType/${layersTypes.data[i]}`);
layers[i] = answer.data;
}
const upperLayers = await apiClient.get(`/wardrobe/upperLayers/${layersType[0]}`);
const lowerLayers = await apiClient.get(`/wardrobe/lowerLayers/${layersType[layersType.length - 1]}`);
setUpperLayers(upperLayers.data);
setLowerLayers(lowerLayers.data);
setLayers(layers);
setLayersType(layersType);
console.log(layersType);
console.log(layers);
handleSections(layersType);
setCarouselIndex(carouselIndex);
} catch (e) {
console.log(e);
const getLayers = async () => {
try {
const layers = [];
const carouselIndex = [];
for (let i = 0; i < layersTypes.length; i++) {
layers.push([]);
carouselIndex.push(0);
const answer = await apiClient.get(`/clothing/byType/${layersTypes[i]}`);
layers[i] = answer.data;
}
};
getLayers();
}
}, [handleSections]);
setLayers(layers);
setCarouselIndex(carouselIndex);
} catch (e) {
console.log(e);
}
};
getLayers();
}, [layersTypes]);

return (
<div className='row col-10 offset-1'>
{layers.map((layer, index) => (
<Carousel key={index} clothes={layer} type={layersType[index]}
handleChange={(clohingIndex) => {
carouselIndex[index] = clohingIndex;
}} />
<Carousel key={index} clothes={layer} type={layersTypes[index]}
handleChange={(clohingIndex) => {
carouselIndex[index] = clohingIndex;
}} />
))}
<Button onClick={handleSave} className='col-4 offset-4 mt-3 circular-button'>SAVE</Button>

<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Adding a {lower ? "lower" : "upper"} layer</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group as={Row} className="mb-3" controlId="formGridType">
<Form.Label column sm={2}>Layer</Form.Label>
<Col sm={10}>
<Form.Select onChange={(e) => setLayer(e.target.value)}
defaultValue={lower ? lowerLayers[0] : upperLayers[0]}>
{lower ? (
Array.isArray(lowerLayers) && lowerLayers.map((l, i) => (
<option key={i}>{l}</option>
))
) :
(
Array.isArray(upperLayers) && upperLayers.map((l, i) => (
<option key={i}>{l}</option>
))
)}

</Form.Select>
</Col>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={() => { lower ? addLowerLayer() : addUpperLayer() }}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>


);
}

Expand Down
20 changes: 20 additions & 0 deletions src/components/Outfit/Sections.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@

.section .icons .buttonT{
background-color: inherit;
border: none;
}
.section{
height: 100%;
align-items: center !important;
}
.text-sections{
color: #2A2829;
}
.recommendations{
color: #A4826D;
background-color: #D9D7D6;
border: none;
border-radius: 0%;
height: fit-content !important;
padding: 0 !important;
}
163 changes: 163 additions & 0 deletions src/components/Outfit/Sections.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import React from "react";
import { Button } from "react-bootstrap";
import { useState, useEffect, useRef } from 'react';
import apiClient from '../../services/apiClient';
import { Modal, Form, Row, Col } from 'react-bootstrap';
import { FaPlus, FaRegTrashAlt } from "react-icons/fa";
import './Sections.css';

const Sections = ({ handleLayersTypes }) => {

const [layersType, setLayersType] = useState([]);
const [upperLayers, setUpperLayers] = useState([]);
const [lowerLayers, setLowerLayers] = useState([]);
const [show, setShow] = useState(false);
const [lower, setLower] = useState(false);
const [layer, setLayer] = useState('');

const isInitialMount = useRef(true);

const handleClose = () => setShow(false);
const handleShow = (lower) => { setLower(lower); setShow(true); }

const addUpperLayer = async () => {
try {
var layerT = layer;
if (layerT === '') layerT = upperLayers[0];
await apiClient.post(`/wardrobe/upperLayers/${layerT}`)
.then((response) => {
isInitialMount.current = true;
handleLayersTypes(response.data.map(layer => layer));
setShow(false);
});
}
catch (e) {
console.log(e);
}
setLayer('');
};

const addLowerLayer = async () => {
try {
var layerT = layer;
if (layerT === '') layerT = lowerLayers[0];
await apiClient.post(`/wardrobe/lowerLayers/${layerT}`)
.then((response) => {
isInitialMount.current = true;
handleLayersTypes(response.data.map(layer => layer));
setShow(false);
});
}
catch (e) {
console.log(e);
}
setLayer('');
};

const handleDeleteLayer = async (index) => {
try {
await apiClient.delete(`/wardrobe/layers/${layersType[index]}`)
.then((response) => {
isInitialMount.current = true;
handleLayersTypes(response.data.map(layer => layer));
});
}
catch (e) {
console.log(e);
}
}

useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
const getLayers = async () => {
try {
const layersTypes = await apiClient.get('/wardrobe/layersTypes');
console.log(layersTypes);
const layersType = layersTypes.data.map(layer => layer);
const upperLayers = await apiClient.get(`/wardrobe/upperLayers/${layersType[0]}`);
const lowerLayers = await apiClient.get(`/wardrobe/lowerLayers/${layersType[layersType.length - 1]}`);
setUpperLayers(upperLayers.data);
setLowerLayers(lowerLayers.data);
setLayersType(layersType);
handleLayersTypes(layersType);

} catch (e) {
console.log(e);
}
};
getLayers();
}
}, [handleLayersTypes]);
return (
<div className="recommendations">
<p className='m-3'><b>Your layers</b></p>
{upperLayers.length > 0 ?
<>
<Button onClick={() => handleShow(false)} className="col-6 offset-3 mb-3" variant="outline-dark" size='sm'>Add upper layer</Button>
</>
:
<>
</>
}

{Array.isArray(layersType) && layersType.map((layer, i) => (
<div key={i} className="section d-flex align-items-center justify-content-between mx-3 mb-3">
<p className="text-sections m-0"><b>Layer name: </b>{layer.toLowerCase()}</p>
<div className="icons">
<button onClick={() => handleDeleteLayer(i)} className="buttonT"><FaRegTrashAlt className="text-danger mx-1" /></button>
<a href={`/Wardrobe/FormGetClothing?type=${layer}`}><FaPlus className="text-success" /></a>

</div>
</div>
))}
{lowerLayers.length > 0 ?
<>
<Button onClick={() => handleShow(true)} className="col-6 offset-3 mb-3" variant="outline-dark" size='sm' >Add lower layer</Button>
</>
:
<>
</>
}
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Adding a {lower ? "lower" : "upper"} layer</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group as={Row} className="mb-3" controlId="formGridType">
<Form.Label column sm={2}>Layer</Form.Label>
<Col sm={10}>
<Form.Select onChange={(e) => setLayer(e.target.value)}
defaultValue={lower ? lowerLayers[0] : upperLayers[0]}>
{lower ? (
Array.isArray(lowerLayers) && lowerLayers.map((l, i) => (
<option key={i}>{l}</option>
))
) :
(
Array.isArray(upperLayers) && upperLayers.map((l, i) => (
<option key={i}>{l}</option>
))
)}

</Form.Select>
</Col>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={() => { lower ? addLowerLayer() : addUpperLayer() }}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>

);
};

export default Sections;
11 changes: 11 additions & 0 deletions src/components/Wardrobe/productListing.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import React from 'react';
import { Button } from 'react-bootstrap';
import apiClient from '../../services/apiClient';

// This component is used to show the product listing.
const ProductListing = ({ product }) => {
const deleteProduct = async () => {
try {
await apiClient.delete(`/clothing/${product.id}?isStactic=true`);
window.location.reload();
} catch (e) {
console.log(e);
}
}
return (
<div className="product-listing" style={{ marginBottom: '20px' }}>
<div className="product-frame" style={{ border: '4px solid #A4826D', padding: '15px', borderRadius: '8px' }}>
Expand All @@ -17,6 +27,7 @@ const ProductListing = ({ product }) => {
<div className="product-details">
<h4>{product.name}</h4>
</div>
<Button variant="danger" onClick={()=>deleteProduct()}>Remove</Button>
</div>
</div>
);
Expand Down
Loading

0 comments on commit ab88434

Please sign in to comment.