Jeff feature branch

client/App.jsx

@@ -11,25 +11,28 @@ const App = () => {
 
   console.log('this is SSID', SSID);
   return (
+
     <Router>
-      <Link to="/" style={{ margin: 10 }}>
-        Home
-      </Link>
-      <Link to="/signup" style={{ margin: 10 }}>
-        Signup
-      </Link>
-      <Link to="/login" style={{ margin: 10 }}>
-        Login
-      </Link>
-      <Link to="/dashboard" style={{ margin: 10 }}>
-        Dashboard
-      </Link>
-      <Link to="/alloutfits" style={{ margin: 10 }}>
-        All Outfits
-      </Link>
+      <div id="tabs">
+        <Link to="/signup" id='link'>
+          SIGN UP
+        </Link>
+        <Link to="/login" id='link'>
+          LOG IN
+        </Link>
+        <Link to="/dashboard" id='link'>
+          DASHBOARD
+        </Link>
+        <Link to="/alloutfits" id='link'>
+          ALL OUTFITS
+        </Link>
+      </div>
       <Routes>
+        {/** Look into why they have the setSSID to SetSSID 
+          Potentially is prop drilling this function down*/}
         <Route path="/" element={<Login setSSID={setSSID} />} />
         <Route path="/signup" element={<Signup setSSID={setSSID} />} />
+        <Route path="/login" element={<Login setSSID={setSSID} />} />
         <Route path="/dashboard" element={<Dashboard SSID={SSID} />} />
         <Route path="/alloutfits" element={<AllOutfits SSID={SSID} />} />
       </Routes>

client/components/AllOutfits.jsx

@@ -3,49 +3,164 @@ import Outfit from './Outfit.jsx';
 import '../styles/style.css';
 
 const AllOutfits = ({ SSID }) => {
-  const [outfitImage, setOutfitImage] = useState([]);
-  const [outfitDes, setOutfitDes] = useState([]);
+  const [data, setData] = useState([]);
+  const [outfitsArray, setOutfitsArray] = useState([]);
+  const [categories, setCategories] = useState({
+    casual: false,
+    smartCasual: false,
+    businessAttire: false,
+    formal: false,
+    athleisure: false,
+  });
+  const [randomOutift,setRandomOutfit] = useState()
+  const [allOutfits,setAllOutfits] = useState(true)
 
   useEffect(() => {
-    fetch(`/outfits/alloutfits`, {
+    // initial fetching of all outfit data
+    const fetchData = () => {
+      fetch(`/outfits/alloutfits`, {
+        method: 'POST',
+        headers: {
+          'Content-type': 'Application/JSON',
+        },
+        body: JSON.stringify({
+          SSID: SSID,
+        }),
+      })
+        .then((initialRes) => initialRes.json())
+        .then((initialData) => setData(initialData.rows))
+        .catch((error) => {
+          console.error('Error fetching initial data:', error);
+        });
+    };
+
+    fetchData();
+  }, []);
+
+  // update array that stores outfit data when data changes 
+  useEffect(() => {
+    setOutfitsArray(data.map((outfit, index) => <Outfit key={outfit.index} outfitData={outfit} />));
+  }, [data]);
+
+  const getRandomOutift = () => {
+    const copy = outfitsArray.slice()
+    setRandomOutfit(copy[Math.floor(Math.random() * copy.length)])
+    allOutfits ? setAllOutfits(false):setAllOutfits(true)
+  }
+
+  // function to handle updating of checkboxes
+  const handleCheckChange = (event) => {
+    const { name, value, checked } = event.target;
+    if (name === 'categories') {
+      setCategories((prevCategories) => ({
+        ...prevCategories,
+        [value]: checked,
+      }));
+    }
+  };
+
+  // filter the keys of the categories so we only send the selected categories
+  const selectedCategories = Object.keys(categories).filter((key) => categories[key]);
+
+  // function to handle the filtered outfit form submission
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    fetch(`/outfits/filteredoutfits`, {
       method: 'POST',
       headers: {
         'Content-type': 'Application/JSON',
       },
       body: JSON.stringify({
         SSID: SSID,
+        categories: selectedCategories,
       }),
     })
-      .then((res) => res.json())
       .then((res) => {
-        console.log('these are all outfits from frontend', res.rows);
-        const outfitImageArr = [];
-        const outfitDesArr = [];
-        for (let i = 0; i < res.rows.length; i++) {
-          outfitImageArr.push(res.rows[i]['aws_image']);
-          outfitDesArr.push(res.rows[i]['description']);
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
         }
-        setOutfitImage(outfitImageArr);
-        setOutfitDes(outfitDesArr);
+        return res.json();
+      })
+      .then((res) => {
+        console.log('Filtered outfits from frontend:', res.rows);
+        setData(res.rows);
+      })
+      .catch((error) => {
+        console.log('An error occurred while getting the outfits data', error);
       });
-  }, []);
-  // add image and description to outfitdata
-
-  console.log('outfitImage:', outfitImage);
-  console.log('outfitDes:', outfitDes);
-
-  const array = [];
-  for (let i = 0; i < outfitImage.length; i++) {
-    array.push(
-      <Outfit outfitImage={outfitImage[i]} outfitDes={outfitDes[i]} />
-    );
-  }
+  };
 
   return (
     <div className="outfitsContainer">
-      <div id="outfitBox">{array}</div>
+      <h2 className='header'>CATEGORIES</h2>
+      <form className='allOutfitsForm'onSubmit={handleSubmit}>
+        <div className='checkboxDiv'>
+          <div>
+            <input
+              type="checkbox"
+              id="casual"
+              value="casual"
+              name="categories"
+              checked={categories.casual}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="casual">Casual</label>
+          </div>
+
+          <div>
+            <input
+              type="checkbox"
+              id="smartCasual"
+              value="smartCasual"
+              name="categories"
+              checked={categories.smartCasual}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="smartCasual">Smart Casual</label>
+          </div>
+
+          <div>
+            <input
+              type="checkbox"
+              id="businessAttire"
+              value="businessAttire"
+              name="categories"
+              checked={categories.businessAttire}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="businessAttire">Business Attire</label>
+          </div>
+
+          <div>
+            <input
+              type="checkbox"
+              id="formal"
+              value="formal"
+              name="categories"
+              checked={categories.formal}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="formal">Formal</label>
+          </div>
+
+          <div>
+            <input
+              type="checkbox"
+              id="athleisure"
+              value="athleisure"
+              name="categories"
+              checked={categories.athleisure}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="athleisure">Athleisure</label>
+          </div>
+        </div>
+        <button className='outfitsButton'  type="submit">GET RESULTS</button>
+      </form>
+      <div id="outfitBox">{allOutfits ? outfitsArray:randomOutift}</div>
+      <button onClick={getRandomOutift}>DONT KNOW WHAT TO WEAR CLICK HERE</button>
     </div>
   );
 };
 
-export default AllOutfits;
+export default AllOutfits;

client/components/Dashboard.jsx

@@ -4,9 +4,9 @@ import UploadOutfit from './UploadOutfit.jsx';
 const Dashboard = ({ SSID }) => {
   return (
     <div>
-      <h2>Welcome to the Dashboard</h2>
       <UploadOutfit SSID={SSID} />
     </div>
   );
 };
-export default Dashboard;
+
+export default Dashboard;

client/components/Login.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import  '../styles/login.css'
+import '../styles/login.css'
 import { Link, useNavigate } from 'react-router-dom';
 
 
 
-const Login = ( {setSSID} ) => {
+const Login = ({ setSSID }) => {
 
     const navigator = useNavigate()
 
     let loginHandler = () => {
 
-        let username =  document.querySelector('#loginUsername').value;
+        let username = document.querySelector('#loginUsername').value;
         let password = document.querySelector('#loginPassword').value;
 
         const userInfo = {
@@ -21,34 +21,36 @@ const Login = ( {setSSID} ) => {
         fetch('/auth/login', {
             method: 'POST',
             headers: {
-                'Content-type' : 'Application/JSON'
+                'Content-type': 'Application/JSON'
             },
             body: JSON.stringify(userInfo)
         })
-        .then((res) => res.json())
-        .then((res) => {
-            if(res.err){
-               alert(res.err)
-            }
-            else{
-            setSSID(res)
-            navigator('/dashboard')
-            }
-        })
+            .then((res) => res.json())
+            .then((res) => {
+                if (res.err) {
+                    alert(res.err)
+                }
+                else {
+                    setSSID(res)
+                    navigator('/dashboard')
+                }
+            })
     };
 
-return (
-    <>
-        <div id='loginBox'>
-            <img id='logo' src='https://www.wrkmode.com/images/id/logo_chic.gif'></img>
-            <input id='loginUsername' placeholder='username'></input>
-            <input id='loginPassword' placeholder='password'></input>
-            <button id='loginButton'onClick= {loginHandler}>Login</button>
-            <Link id='signupLink' to='/signup'>
-            Click here to Signup
+    return (
+        <div id='inputBox'>
+            <div className='logo'>
+                <img className='logoPic' src="https://drive.google.com/uc?export=view&id=1v0179NE5pCP1n3ZWIv51ij3ww4cEeBpV" width="200">
+                </img>
+                <text id='chic'>HIC</text>
+            </div>
+            <input id='loginUsername' className='input' placeholder='USERNAME'></input>
+            <input id='loginPassword' className='input' placeholder='PASSWORD'></input>
+            <button id='signupLoginButton' onClick={loginHandler}>LOGIN</button>
+            <Link id='userLink' to='/signup'>
+                CLICK HERE TO SIGNUP
             </Link>
         </div>
-    </>
     )
 }
 

client/components/Outfit.jsx

@@ -1,14 +1,33 @@
-import React from 'react'
-
-const Outfit = ({ outfitImage, outfitDes }) => {
-    return(
-        <div id='outfit'>
-          <div className='imgContainer'>
-            <img src={'outfits/uploads/' + outfitImage} style={{maxWidth:'300px'}}alt="outfitImage prop" />
-          </div>
-          <h3>{outfitDes}</h3>
+import React from 'react';
+
+const Outfit = (props) => {
+  const { aws_image, description, casual, smart_casual, business_attire, formal, athleisure } = props.outfitData;
+
+  const categoryNames = [];
+  if (casual) categoryNames.push('Casual');
+  if (smart_casual) categoryNames.push('Smart Casual');
+  if (business_attire) categoryNames.push('Business Attire');
+  if (formal) categoryNames.push('Formal');
+  if (athleisure) categoryNames.push('Athleisure');
+
+  return (
+    <div id='outfit'>
+      <div className='imgContainer'>
+        <img src={'outfits/uploads/' + aws_image} style={{ maxWidth: '300px' }} alt="outfitImage prop" />
+      </div>
+      <h3>{description}</h3>
+      {categoryNames.length > 0 && (
+        <div>
+          <h4>Categories:</h4>
+          {categoryNames.map((category, idx) => (
+            <div key={idx}>
+              {category}
+            </div>
+          ))}
         </div>
-       )
-}
+      )}
+    </div>
+  );
+};
 
 export default Outfit;