Calendar update

Naetffy · May 7, 2024 · 66bde7c · 66bde7c
1 parent 26aaf20
commit 66bde7c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 47 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -13,7 +13,7 @@ import Button from 'react-bootstrap/Button';
 import Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
-import DatePicker from "react-datepicker";
+/*import DatePicker from "react-datepicker";*/
 import "react-datepicker/dist/react-datepicker.css";
 
 
@@ -22,17 +22,15 @@ const Home = () => {
 
     const [show, setShow] = useState(false);
     const [name, setName] = useState('');
-    const [category, setCategory] = useState(0);
+    const [category, setCategory] = useState('');
     const [clothes, setClothes] = useState([]);
-    const [date, setDate] = useState(new Date());
 
     const [categories, setCategories] = useState([]);
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
 
     useEffect(() => {
-        setCategories([]);
         const getCategories = async () => {
             try {
                 const answer = await axios.get(`${apiUrl}outfit/categories`);
@@ -55,19 +53,6 @@ const Home = () => {
         }
         await axios.post(`${apiUrl}outfit`, outfitData)
             .then(response => {
-                const params = {
-                    date: date,
-                    outfitId: response.data.id
-                }
-                axios.post(`${apiUrl}day/user/aed01e26-1d1b-479e-a2aa-c8acc92f03c0`, params)
-                    .then(response => {
-                        console.log(response.data);
-                    }
-                    )
-                    .catch(error => {
-                        console.log(error);
-                    }
-                    );
                 console.log(response.data);
             })
             .catch(error => {
@@ -109,12 +94,12 @@ const Home = () => {
                     <Modal.Title>Creating a outfit</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <div className='text-center'>
+                    <div>
                         <h3>Outfit preview</h3>
                         <div className='col-4 offset-4'>
-                            {Array.isArray(clothes) && (clothes.map((clothes, i) => (
+                            {clothes.map((clothes, i) => (
                                 <img key={i} src={`data:image/jpeg;base64,${clothes.image}`} alt="" className="custom-carousel-image" />
-                            )))}
+                            ))}
                         </div>
                     </div>
                     <Form>
@@ -130,23 +115,12 @@ const Home = () => {
                             <Col sm={10}>
                                 <Form.Select onChange={(e) => setCategory(e.target.value)}
                                     defaultValue="Select a category...">
-                                    { Array.isArray(categories) && (categories.map((category, i) => (
+                                    {categories.map((category, i) => (
                                         <option key={i}>{category}</option>
-                                    )))}
+                                    ))}
                                 </Form.Select>
                             </Col>
                         </Form.Group>
-                        <Form.Group as={Row} className="mb-3" controlId="formGridDate">
-                            <Form.Label column sm={2}>Date</Form.Label>
-                            <Col sm={10}>
-                                <DatePicker
-                                    selected={new Date()}
-                                    dateFormat="dd/MM/yyyy"
-                                    className="form-control"
-                                    onChange={(date) => setDate(date)}
-                                />
-                            </Col>
-                        </Form.Group>
                     </Form>
 
                 </Modal.Body>

diff --git a/src/components/secondary/OutfitOfDay.js b/src/components/secondary/OutfitOfDay.js
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './styles/OutfitOfDay.css';
 import Outfit from './Outfit';
+import axios from 'axios';
 
 const OutfitOfDay = ({ selectedDate }) => {
 
+    const [outfits, setOutfits] = useState([]);
     const getWeekDates = (selectedDate) => {
         const startDate = new Date(selectedDate);
         const weekDates = [];
@@ -16,7 +18,19 @@ const OutfitOfDay = ({ selectedDate }) => {
     };
 
     const weekDates = getWeekDates(selectedDate);
+    useEffect(() => {
+        const fetchOutfitOfDay = async () => {
+            try {               
+                const response = await axios.get(`clothcraft.azurewebsites.net/day/${selectedDate}`);
+                const outfitOfDay = response.data;
+                setOutfits([outfitOfDay]);
+            } catch (error) {
+                console.error('Error fetching outfit of the day:', error);
+            }
+        };
 
+        fetchOutfitOfDay(); 
+    }, [selectedDate]);
     return (
         <div className='outfit-container'>
             <table className='table outfit-table'>
@@ -38,21 +52,16 @@ const OutfitOfDay = ({ selectedDate }) => {
                 <tbody>
                     <tr>
                         {weekDates.map((date, index) => (
-                            <td key={index}>
-                                {date.getDate() === selectedDate.getDate() && (
-                                    <Outfit makeOutfit={false} day={date}></Outfit>
-                                )}
-                            </td>
+                             <td key={index}>
+                                 {outfits.map((outfit, index) => (
+                                     <Outfit key={index} outfit={outfit} makeOutfit={false} />
+                                 ))}
+                             </td>
                         ))}
                     </tr>
                 </tbody>
             </table>
         </div>
     );
 }
-
 export default OutfitOfDay;
-
-
-
-