Edit restaurant

client/src/App.js

@@ -1,5 +1,5 @@
 import './App.css';
-import React from 'react';
+import React, {useState} from 'react';
 import { Routes, Route, HashRouter } from 'react-router-dom';
 
 import Menu from './pages/menu';
@@ -13,6 +13,31 @@ import Landing_page from './pages/landing-page';
 import WebSocketService from './WebSocketService';
 
 function App() {
+
+  const [restaurantInfo, setRestaurantInfo] = useState({
+    name: "115A's Diner",
+    description:`Welcome to 115A's Diner, where passion meets flavor! Our journey began with a simple
+    idea: to create a dining experience that combines the warmth of home-cooked meals with
+    the excitement of culinary innovation. At 115A's Diner, we source the finest ingredients
+    to craft delicious dishes that cater to every palate. Whether you're a fan of classic
+    comfort food or crave bold and adventurous flavors, our menu has something special for you.
+    Join us on this gastronomic journey and savor the moments at 115A's Diner. We look
+    forward to serving you with a smile and creating memories that last a lifetime.`,
+    instagramLink: "https://www.instagram.com/your_instagram",
+    facebookLink: "https://www.facebook.com/your_facebook",
+    twitterLink: "https://twitter.com/your_twitter",
+  });
+  const [isSaved, setIsSaved] = useState(false);
+
+  const updateRestaurantInfo = (newInfo) => {
+    setRestaurantInfo(newInfo);
+    setIsSaved(true);
+
+    setTimeout(() => {
+      setIsSaved(false);
+    }, 3000);
+  };
+
   // Establish a connection if not already connected
   /*useEffect(() => {
     if (!WebSocketService.socket) {
@@ -43,11 +68,11 @@ function App() {
     <div className="App font-tt-norms-pro">
       <HashRouter>
         <Routes>
-          <Route index element={<Landing_page />} />
-          <Route path='/' element={<Landing_page />} />
+          <Route index element={<Landing_page restaurantInfo={restaurantInfo}/>} />
+          <Route path='/' element={<Landing_page restaurantInfo={restaurantInfo}/>} />
           <Route path='/menu' element={<Menu />} />
           <Route path='/table' element={<Table />} />
-          <Route path='/admin-dashboard' element={<Admin_dashboard WebSocketService={WebSocketService} />} />
+          <Route path='/admin-dashboard' element={<Admin_dashboard WebSocketService={WebSocketService} restaurantInfo={restaurantInfo}  updateRestaurantInfo={updateRestaurantInfo} saved={isSaved}/>} />
           <Route path='*' element={<NoPage />} />
         </Routes>
       </HashRouter>

client/src/components/editRestaurant.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { FaFacebook, FaInstagram, FaTwitterSquare } from 'react-icons/fa';
+
+const EditRestaurant = ({ restaurantInfo, updateRestaurantInfo , saved}) => {
+    //store edits of the fields
+    const [newName, setNewName] = useState(restaurantInfo.name);
+    const [newDescription, setNewDescription] = useState(restaurantInfo.description);
+    const [newInstagram, setNewInstagram] = useState(restaurantInfo.instagram);
+    const [newFacebook, setNewFacebook] = useState(restaurantInfo.facebook);
+    const [newTwitter, setNewTwitter] = useState(restaurantInfo.newTwitter);
+
+
+    const handleSave = () => {
+      //update restaurant info using the provided function
+        updateRestaurantInfo({ name: newName, description: newDescription, instagramLink: newInstagram, facebookLink: newFacebook, twitterLink: newTwitter,});
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-content h-screen ">
+            <div className="bg-white p-8 rounded-3xl shadow-md flex flex-col p-[3em] w-full max-w-screen-md ">
+
+                    <div className="mb-4 text-2xl block flex items-center justify-center">Edit Details</div>
+                        <div className="mb-4">
+                            <label className="text-2xl block">Restaurant Name:</label>
+                            <input className="border border-gray-300 p-2 rounded-md w-full max-h-6 overflow-x-auto max-w-full" type="text" value={newName} onChange={(e) => setNewName(e.target.value)} />
+                        </div>
+
+                        <div className="mb-4">
+                            <label className="text-2xl block">Restaurant Description:</label>
+                            <textarea
+                                className="border border-gray-300 p-2 rounded-md w-full overflow-y-auto max-w-full"
+                                value={newDescription}
+                                onChange={(e) => setNewDescription(e.target.value)}
+                            />
+                        </div>
+                        <div className="mb-4">
+                            <div className="flex flex-row items-center justify-content">
+                                <FaFacebook className="mr-2 text-2xl"/>
+                                <label className="text-2xl block">Facebook Link:</label>
+                            </div>
+
+                            <input
+                                className="border border-gray-300 p-2 rounded-md w-full max-h-8 overflow-x-auto max-w-full"
+                                value={newFacebook}
+                                onChange={(e) => setNewFacebook(e.target.value)}
+                            />
+                        </div>
+                        <div className="mb-4">
+                            <div className="flex flex-row items-center justify-content">
+                                <FaInstagram className="mr-2 text-2xl"/>
+                                <label className="text-2xl block">Instagram Link:</label>
+                            </div>
+                            <input
+                                className="border border-gray-300 p-2 rounded-md w-full max-h-8 overflow-x-auto max-w-full"
+                                value={newInstagram}
+                                onChange={(e) => setNewInstagram(e.target.value)}
+                            />
+                        </div>
+                        <div className="mb-4">
+                            <div className="flex flex-row items-center justify-content">
+                                <FaTwitterSquare className="mr-2 text-2xl"/>
+                                <label className="text-2xl block">Twitter Link:</label>
+                            </div>
+                            <input
+                                className="border border-gray-300 p-2 rounded-md w-full max-h-8 overflow-x-auto w-full max-w-full"
+                                value={newTwitter}
+                                onChange={(e) => setNewTwitter(e.target.value)}
+                            />
+                        </div>
+
+                        <div className="flex flex-col space-between">
+                            <div className="flex items-center justify-center">
+                                <button className="bg-gray-200 mb-2 hover:ring-2 hover:ring-blue text-black py-2 px-6 rounded-md mr-2 text-center text-xl font-medium flex items-center justify-center space-x-2" 
+                                        onClick={handleSave}>Save</button>
+                            </div>
+
+                            {saved && (
+                                <div className="flex items-center font-medium justify-center text-blue-500  text-center"> Saved Details! </div>
+
+                            )}
+
+                        </div>
+
+
+
+
+
+            </div>
+
+        </div>
+    );
+};
+
+export default EditRestaurant;

client/src/components/landing-page/lpFooter.jsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { FaFacebook, FaInstagram, FaTwitterSquare } from 'react-icons/fa';
 
-const LpFooter = () => {
+const LpFooter = ({restaurantInfo}) => {
     return (
         <footer className="bg-light-tertiary py-8 ">
             <div className="flex flex-col items-center">
-                <div className="text-4xl font-bold text-light-secondary mb-4">115A's Diner</div>
+                <div className="text-4xl font-bold text-light-secondary mb-4">{restaurantInfo.name}</div>
                 <div className="flex justify-center space-x-4 text-light-primary">
-                    <a href=''><FaFacebook className="text-xl" size={30}/></a>
-                    <a href=''><FaInstagram className="text-xl " size={30}/></a>
-                    <a href=''><FaTwitterSquare className="text-xl " size={30}/></a>
+                    <a href={restaurantInfo.facebookLink}><FaFacebook className="text-xl" size={30}/></a>
+                    <a href={restaurantInfo.instagramLink}><FaInstagram className="text-xl " size={30}/></a>
+                    <a href={restaurantInfo.twitterLink}><FaTwitterSquare className="text-xl " size={30}/></a>
                 </div>
             </div>
             <div className="mt-4 text-center ">
-                © {new Date().getFullYear()} 115A's Diner. All rights reserved.
+                © {new Date().getFullYear()} {restaurantInfo.name}. All rights reserved.
             </div>
         </footer>
     )

client/src/components/landing-page/lpNavBar.jsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { MdOutlineDashboard } from "react-icons/md";
 import LpShoppingCart from './lpShoppingCart';
 
-const LpNavBar = ({cartItems, cartSize, renderCartSize, removeFromCart, WebSocketService}) => {
+const LpNavBar = ({cartItems, cartSize, renderCartSize, removeFromCart, WebSocketService, restaurantInfo}) => {
     /* Testing */
     let email = true;
     // let email = false;
@@ -129,7 +129,7 @@ const LpNavBar = ({cartItems, cartSize, renderCartSize, removeFromCart, WebSocke
         <>
             <div className='font-tt-norms-pro px-12 relative z-20'>
                 <div className='md:flex absolute items-center font-bold text-4xl text-light-secondary hidden top-4 left-8 '>
-                    <Link to={"/"}>115A's Diner</Link>
+                    <Link to={"/"}>{restaurantInfo.name}</Link>
                 </div>
                 {email ? (
                     <div className='absolute top-4 right-8 '>

client/src/pages/admin-customer.js

@@ -1,16 +1,19 @@
 import React from 'react'
 import AdminNavbar from '../components/adminNavbar'
+import EditRestaurant from '../components/editRestaurant'
 
-const Admin_customer = (props) => {
-    const { WebSocketService, setPage } = props;
+const Admin_customer = ( props ) => {
+    const { WebSocketService, setPage, restaurantInfo, updateRestaurantInfo, saved } = props;
+
+    //const { WebSocketService, setPage } = props;
     return (
         <>
             <div className="flex flex-row">
-                <div className='w-[20%]'><AdminNavbar setPage={setPage}/></div>
+                <div className='w-[20%]'><AdminNavbar setPage={props.setPage}/></div>
                 <div className="w-[80%] h-screen">
                     <div className='flex flex-col'>
                         <div className='text-center mt-27 text-black font-Montserrat text-4xl font-bold py-6'>Customer</div>
-                        <div>{/* Component */}</div>
+                        <div><EditRestaurant restaurantInfo={props.restaurantInfo} updateRestaurantInfo={props.updateRestaurantInfo} saved={saved}/></div>
                     </div>
                 </div>
             </div>

client/src/pages/admin-dashboard.js

@@ -11,7 +11,7 @@ const Admin_dashboard = (props) => {
 
     const [page, setPage] = useState("Dashboard");
 
-    const {WebSocketService} = props;
+    const {WebSocketService} = props
 
     useEffect(() => {
         if (!WebSocketService.socket){
@@ -42,7 +42,7 @@ const Admin_dashboard = (props) => {
         return <Admin_analytics WebSocketService={WebSocketService} setPage = {setPage} />;
     }
     else if (page === "Customer"){
-        return <Admin_customer WebSocketService={WebSocketService} setPage = {setPage} />;
+        return <Admin_customer WebSocketService={WebSocketService} setPage = {setPage} restaurantInfo={props.restaurantInfo} updateRestaurantInfo={props.updateRestaurantInfo} saved={props.saved}/>;
     }
     else if (page === "Orders"){
         return <Admin_orders WebSocketService={WebSocketService} setPage = {setPage} />;

client/src/pages/landing-page.js

@@ -23,7 +23,7 @@ function getItemsToShow() {
     }
 }
 
-const Landing_page = () => {
+const Landing_page = ({restaurantInfo}) => {
     const [itemsToShow, setItemsToShow] = useState(getItemsToShow());
 
     useEffect(() => {
@@ -44,10 +44,10 @@ const Landing_page = () => {
         <>
             <div className='font-tt-norms-pro'>
                 <div className='relative'>
-                    <LpNavBar cartItems={items}/>
+                    <LpNavBar cartItems={items} restaurantInfo={restaurantInfo}/>
                     <div className='flex flex-col justify-center items-center h-[85vh] z-10 relative'>
                         <span className='md:text-6xl text-5xl'>Welcome to</span>
-                        <span className='md:text-8xl text-7xl'>115A's Diner</span>
+                        <span className='md:text-8xl text-7xl'>{restaurantInfo.name}</span>
                         <Link to="/menu">
                             <button className='bg-light-secondary text-white rounded-3xl py-2 px-4 mt-7 font-bold text-2xl flex items-center'>
                                 <div>Order Now&nbsp;</div>
@@ -78,19 +78,20 @@ const Landing_page = () => {
                         <div className='flex flex-col items-center'>
                             <div className='text-5xl font-bold text-light-primary mb-6'>About Us</div>
                             <div className='text-2xl text-light-primary max-w-4xl text-center px-5'>
-                                Welcome to 115A's Diner, where passion meets flavor! Our journey began with a simple
+                                {restaurantInfo.description}
+                                {/* Welcome to 115A's Diner, where passion meets flavor! Our journey began with a simple
                                 idea: to create a dining experience that combines the warmth of home-cooked meals with
                                 the excitement of culinary innovation. At 115A's Diner, we source the finest ingredients
                                 to craft delicious dishes that cater to every palate. Whether you're a fan of classic
                                 comfort food or crave bold and adventurous flavors, our menu has something special for you.
                                 Join us on this gastronomic journey and savor the moments at 115A's Diner. We look
-                                forward to serving you with a smile and creating memories that last a lifetime.
+                                forward to serving you with a smile and creating memories that last a lifetime. */}
                             </div>
                         </div>
                     </div>
                 </div>
                 <LpTestimonial />
-                <LpFooter />
+                <LpFooter restaurantInfo={restaurantInfo}/>
             </div>
         </>
     )