backend orders working, need to create ui and connect form to send orders

backend/main.py

@@ -1,6 +1,6 @@
-from flask import Flask, render_template, request, redirect, send_from_directory
+from flask import Flask, render_template, request, redirect, send_from_directory, jsonify
 from config import app, db, bcrypt
-from models import Contact, User
+from models import Contact, User, Orders
 from werkzeug.utils import secure_filename
 from werkzeug.exceptions import RequestEntityTooLarge
 import os
@@ -56,10 +56,6 @@ def mail():
         "email": user.email
     })
         
-@app.route("/orders", methods=["GET"])
-def orders():
-    
-
 
 # Handle Images
 @app.route('/serve-image/<filename>', methods=['GET'])
@@ -67,6 +63,33 @@ def serve_image(filename):
   return send_from_directory(app.config['UPLOAD_DIRECTORY'], filename)
 
 
+# Register User
+@app.route("/new-order", methods=["POST"])
+def register_user():
+    email = request.json["email"]
+    order = request.json["order"]
+
+    new_order= Orders(email=email, order=order)
+
+    # Write to db
+    try:
+        db.session.add(new_order) # add to db staging area
+        db.session.commit() # add to db and catch any errors that can happen with writing to db
+    except Exception as e:
+        return (jsonify({"message": str(e)}), 400)
+    
+    
+    return jsonify({
+        "email": email,
+        "order confirmed": order,
+    })
+# Get orders
+@app.route("/orders", methods=["GET"])
+def orders():
+    orders = Orders.query.all()
+    json_orders = list(map(lambda x : x.to_json(), orders))
+    return jsonify({"orders": json_orders})
+
 # Main
 if __name__ == "__main__":
     # Initialize database connection

backend/models.py

@@ -28,20 +28,16 @@ class User(db.Model):
 class Orders(db.Model):
     __tablename__ ="orders"
     id = db.Column(db.Integer, primary_key=True)
-    name = db.Column(db.String(80), unique=False, nullable=False)
     email = db.Column(db.String(120), unique=False, nullable=False)
     order = db.Column(db.String(345), unique=False, nullable=False)
-    
-    
-    
     def to_json(self):
         return {
             "id": self.id,
-            "firstName":self.first_name,
-            "lastName":self.last_name,
             "email":self.email,
+            "order":self.order,
         }  
     
+    
 # class Category(db.Model):
 #     __tablename__ = "categories"
 #     id = db.Column(db.String(32), primary_key=True, unique=True, default=get_uuid)

backend/requirements.txt

@@ -5,6 +5,6 @@ flask-cors
 python-dotenv
 flask-session
 redis
-Flask-Migrate 
-flask_validator 
-psycopg2-binary
+# Flask-Migrate 
+# flask_validator 
+# psycopg2-binary

frontend/package.json

@@ -21,12 +21,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "resend": "^3.5.0",
-    "sharp": "^0.33.4",
+    "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.16.1",
     "@types/nodemailer": "^6.4.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

frontend/src/app/page.tsx

@@ -42,7 +42,9 @@ export default function Home() {
       {/* Title */}
       <div className="text-4xl w-full justify-center text-center items-center flex flex-col gap-4 py-12 font-medium text-orange-600">
         <span className={`${Popp.className}`}>Kevo&#39;s Attire</span>
-        <div className={`${Popp.className} text-orange-600 text-center`}>All sizes - $25</div>
+        <div className={`${Popp.className} text-orange-600 text-center`}>
+          All sizes - $25
+        </div>
       </div>
 
       {/* Body */}
@@ -57,15 +59,39 @@ export default function Home() {
         </Modal>
       </div> */}
 
-      <form className="mt-10 flex flex-col w-full items-center gap-4" action={async (formData) => {await sendEmail(formData)}}>
+      <form
+        className="mt-10 flex flex-col w-full items-center gap-4"
+        action={async (formData) => {
+          await sendEmail(formData);
+        }}
+      >
         <h2 className="text-orange-600 text-2xl">Order Form</h2>
-        <input className="h-14 px-4 rounded-lg border-black bg-slate-600 lg:w-1/3 md:w-1/2 text-[#EEEEEE]" type="email" required maxLength={500} placeholder="Your email" name="senderEmail"/>
+        <input
+          className="h-14 px-4 rounded-lg border-black bg-slate-600 lg:w-1/3 md:w-1/2 text-[#EEEEEE]"
+          type="email"
+          required
+          maxLength={500}
+          placeholder="Your email"
+          name="senderEmail"
+        />
 
-        <textarea className="h-52 my-3 rounded-lg lg:w-1/3 md:w-1/2 bg-slate-600 p-4 text-[#EEEEEE]" name="message" placeholder="Your order" required maxLength={500}/>
-
-        <button className="w-[8rem] flex items-center justify-center gap-2 h-[3rem] bg-slate-600 rounded-full outline-none transition-all text-white hover:bg-slate-500 hover:scale-110 hover:focus:scale-110 active:scale-105" type="submit" value="Submit">Submit</button>
+        <textarea
+          className="h-52 my-3 rounded-lg lg:w-1/3 md:w-1/2 bg-slate-600 p-4 text-[#EEEEEE]"
+          name="message"
+          placeholder="Your order"
+          required
+          maxLength={500}
+        />
 
+        <button
+          className="w-[8rem] flex items-center justify-center gap-2 h-[3rem] bg-slate-600 rounded-full outline-none transition-all text-white hover:bg-slate-500 hover:scale-110 hover:focus:scale-110 active:scale-105"
+          type="submit"
+          value="Submit"
+        >
+          Submit
+        </button>
       </form>
+      {/* Add that we will send a paypal invoice to confirm the order and items  */}
 
       {/* Footer */}
       <div className="flex w-full h-[250px] items-center text-gray-400">