Merge pull request #35 from agiledev-students-spring2024/master

update branch

back-end/app.js

@@ -1,8 +1,11 @@
 // import and instantiate express
 const express = require("express") // CommonJS import style!
+const cors = require('cors')
 const app = express() // instantiate an Express object
 
 // we will put some server logic here later...
-
+app.use(express.json());
+app.use(cors())
+app.use('/public', express.static('public'));
 // export the express app we created to make it available to other modules
 module.exports = app

back-end/package.json

@@ -1,5 +1,12 @@
 {
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  },
+  "scripts": {
+    "start": "nodemon server.js"
   }
 }

back-end/server.js

@@ -2,9 +2,189 @@
 
 const server = require("./app") // load up the web server
 
-const port = 3000 // the port to listen to for incoming requests
+const port = 3001 // the port to listen to for incoming requests
 
 // call express's listen function to start listening to the port
+const accounts = [
+  {
+    "username": "tester",
+    "password": "tester"
+  },
+  {
+    "username": "example",
+    "password": "login"
+  }
+];
+
+const shirts = [
+  { name: 'Casual Shirt', 
+    brand: 'Awesome Brand', 
+    type: 'Casual', 
+    img: '/public/shirts/casual_shirt.webp'
+  },
+  { name: 'Formal Shirt', 
+    brand: 'Formal Brand', 
+    type: 'Formal', 
+    img: '/public/shirts/formal_shirt.webp'
+  },
+  { name: 'Favorite Shirt', 
+    brand: 'Awesome Brand', 
+    type: 'Casual', 
+    img: '/public/shirts/favorite_shirt.webp'
+  }
+]
+
+const pants = [
+  { name: 'Casual Pants', 
+    brand: 'Awesome Brand', 
+    type: 'Casual', 
+    img: '/public/pants/brown_pants.webp'
+  },
+  { name: 'Least Favorite Pants', 
+    brand: 'Fake Brand 3', 
+    type: 'Casual', 
+    img: '/public/pants/extra_pants.jpg'
+  },
+  { name: 'Favorite Pants', 
+    brand: 'Cool Brand', 
+    type: 'Casual', 
+    img: '/public/pants/comfy.webp'
+  }
+]
+
+const skirts = [
+  { name: 'Best Dress', 
+    brand: 'Awesome Brand', 
+    type: 'Formal', 
+    img: '/public/skirts/skirt_1.webp'
+  },
+  { name: 'Least Favorite Dress', 
+    brand: 'Fake Brand 170', 
+    type: 'Formal', 
+    img: '/public/skirts/skirt_2.webp'
+  },
+  { name: '2nd Favorite Dress', 
+    brand: 'Cool Brand', 
+    type: 'Formal', 
+    img: '/public/skirts/skirt_3.webp'
+  }
+]
+
+const jackets = [
+    { name: 'Ugly Jacket', 
+      brand: 'Awful Brand', 
+      type: 'Casual', 
+      img: '/public/jackets/jacket_1.jpg'
+    },
+    { name: 'Coolest Jacket', 
+      brand: 'Fake Brand 170', 
+      type: 'Formal', 
+      img: '/public/jackets/jacket_2.jpg'
+    },
+    { name: 'Okay Jacket', 
+      brand: 'Cool Brand', 
+      type: 'Casual', 
+      img: '/public/jackets/jacket_3.webp'
+    }
+]
+
+const shoes = [
+  { name: 'Nice Shoes', 
+      brand: 'Definitely Awesome', 
+      type: 'Casual', 
+      img: '/public/shoes/shoes_1.avif'
+    },
+    { name: 'Decent Shoes', 
+      brand: 'Definitely Awesome', 
+      type: 'Casual', 
+      img: '/public/shoes/shoes_2.webp'
+    },
+    { name: 'Okay Shoes', 
+      brand: 'Definitely Awesome', 
+      type: 'Casual', 
+      img: '/public/shoes/shoes_3.webp'
+    }
+]
+
+const accessories = [
+   { name: 'Most Expensive', 
+      brand: 'Cheap-O', 
+      type: 'Formal', 
+      img: '/public/accessories/accessory_1.jpg'
+    },
+    { name: 'Best Accessory', 
+      brand: 'Definitely Awesome', 
+      type: 'Casual', 
+      img: '/public/accessories/accessory_2.jpg'
+    },
+    { name: 'Pretty Cool', 
+      brand: 'Definitely Awesome', 
+      type: 'Casual', 
+      img: '/public/accessories/accessory_3.webp'
+    }
+]
+
+server.post('/login', (req,res) => {
+  const loginSuccessful = {
+    'loggedIn': true
+  };
+  const loginUnsuccessful = {
+    'loggedIn': false
+  };
+
+  console.log("login: ", req.body)
+  for(let i = 0; i < accounts.length; i++){
+    // console.log(req.body.username, req.body.password);
+    if(req.body.username == accounts[i].username){
+      if(req.body.password == accounts[i].password){
+        return res.json(loginSuccessful);
+      }
+    }
+  }
+  return res.json(loginUnsuccessful);
+
+})
+
+server.post('/register', (req,res) => {  
+  console.log("register:", req.body)
+  for(let i = 0; i < accounts.length; i++){
+    // console.log(req.body.username, req.body.password);
+    if(req.body.username == accounts[i].username){
+      return res.json({'message':'Username taken. Please choose a different one','created': false})
+    }
+  }
+  accounts.push(
+    { "username": req.body.username,
+      "password": req.body.password
+    })
+  return res.json({'message':'Account created','created': true})
+})
+
+server.get('/shirts', (req,res) =>{
+  return res.json(shirts);
+})
+
+server.get('/pants', (req,res) => {
+  return res.json(pants);
+})
+
+server.get('/skirts', (req,res) => {
+  return res.json(skirts);
+})
+
+server.get('/jackets', (req,res) => {
+  return res.json(jackets);
+})
+
+server.get('/shoes', (req,res) => {
+  return res.json(shoes);
+})
+
+server.get('/accessories', (req,res) => {
+  return res.json(accessories);
+})
+
+
 const listener = server.listen(port, function () {
   console.log(`Server running on port: ${port}`)
 })

front-end/src/screens/Archive.js

@@ -1,16 +1,39 @@
 import React from 'react';
 import '../styles/Archive.css'
 
-function Archive() {
-    return (
-        <div classname="Archive">
-            <div className='banner'>
+import OverlayMenu from '../components/OverlayMenu'; // Import the OverlayMenu component
+
+const Outfits = () => {
+    // Mock data for Pants
+    const Outfits = [
+        { name: 'Casual Pants', brand: 'Brand A', type: 'Casual' },
+        { name: 'Shirt', brand: 'Brand B', type: 'Formal' },
+        { name: 'Shoes', brand: 'Brand C', type: 'Fashion' },
+        { name: 'Hat', brand: 'Brand D', type: 'New' },
+        // ... add more items and stuff as needed
+    ];
+
+    return(
+        <div className="Outfits">
+            <OverlayMenu />
+            <header className='Archive-banner'>
                 <h1>WARDROBE WIZARD</h1>
-                <h3>Outfit Archive</h3>
+                <h3>Pants</h3>
+            </header>
+            <div className="Outfit Archive">
+                {Outfits.map((item, index) => (
+                    <div className="Outfit-item" key={index}>
+                        <div className="Outfit-image"></div> {/* Placeholder for the image */}
+                        <div className="Outfit-info">
+                            <h3>{item.name}</h3>
+                            <p>{item.brand}</p>
+                            <p>{item.type}</p>
+                        </div>
+                    </div>
+                ))}
             </div>
-
         </div>
     );
 }
 
-export default Archive;
+export default Outfits;

front-end/src/screens/Home.js

@@ -14,7 +14,7 @@ function Home(){
             <div className="homeList"> 
                 <h3><Link to="/closet">View Closet</Link></h3>   
                 <h3><Link to="/additem">Add Item</Link></h3>  
-                <h3><Link to="/outfit-archive">Outfit Archive</Link></h3>  
+                <h3><Link to="/Archive">Outfit Archive</Link></h3>  
                 <h3><Link to="/generator">Generator Outfit</Link></h3>  
             </div>
             <Footer />