You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// constants.js// Swiggy API for to get Restaurant dataexportconstSWIGGY_API_URL=`https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9046136&lng=77.614948&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING`;// Swiggy API for to get Restaurant Item exportconstMENU_API_URL=`https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9046136&lng=77.614948&restaurantId=`;// Restaurant Item Image CDN URL for Restaurant cardexportconstIMG_CDN_URL=`https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_300,h_300,c_fit/`;// Swiggy Restaurant Path exportconstSWIGGY_REST_API_PATH=`data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants`;// Social Media Links - URLexportconstLINKEDIN_LINK="https://www.linkedin.com/in/bharat2044/";exportconstGiTHUB_LINK="https://github.com/Bharat2044";exportconstTWITTER_LINK="https://x.com/bharat__2044/";exportconstEMAIL_LINK="mailto:[email protected]";// Github - username and repository nameexportconstGITHUB_USERNAME="Bharat2044";exportconstGITHUB_REPOSITORY_NAME="Namaste-React";// Github API for UserexportconstGITHUB_USER_API="https://api.github.com/users/";// Github API for RepositoryexportconstGITHUB_REPO_API="https://api.github.com/repos/";
// Header.jsimport{useState}from"react";import{Link,useNavigate}from"react-router-dom";importtastyTrailsLogofrom"../../../../../../public/images/tasty-trails-logo.png";import{FaCartArrowDown}from"react-icons/fa";constHeader=()=>{const[isLoggedIn,setIsLoggedIn]=useState(true);constnavigate=useNavigate();return(<divclassName="header"><divclassName="logo-container"><Linkto="/"><imgclassName="logo"src={tastyTrailsLogo}alt="Tasty Trails Logo"/></Link></div><divclassName="nav-items"><ul><li><LinkclassName="nav-links"to="/">
Home
</Link></li><li><LinkclassName="nav-links"to="/about">
About
</Link></li><li><LinkclassName="nav-links"to="/contact">
Contact
</Link></li><liclassName="nav-links"><FaCartArrowDown/></li>{isLoggedIn ? (<buttonclassName="login"onClick={()=>setIsLoggedIn(false)}>
Logout
</button>) : (<buttonclassName="login"onClick={()=>navigate("/login")}>
Login
</button>)}</ul></div></div>);};exportdefaultHeader;
// Error.jsimporterrorImagefrom"../../../../../../public/images/error-image.jpg";import{Link,useRouteError}from"react-router-dom";constError=()=>{consterr=useRouteError();return(<divclassName="error-page"><divclassName="error-image"><imgsrc={errorImage}alt="Error Image"/></div><divclassName="error-details"><h1>Oops! Something Went Wrong!!</h1><h3className="error-data">{err.data}</h3><h3className="error-back-home"><LinkclassName="link-name"to="/">Back Home</Link></h3></div></div>);};exportdefaultError;
// Body.jsimport{useState,useEffect}from"react";importRestaurantCardfrom"./RestaurantCard";import{RestaurantShimmer}from"./Shimmer";import{SWIGGY_API_URL,SWIGGY_REST_API_PATH,}from"../../../../../../public/common/constants";constBody=()=>{const[listOfRestaurants,setListOfRestaurants]=useState([]);const[filteredRestaurants,setFilteredRestaurants]=useState([]);const[searchRestaurant,setSearchRestaurant]=useState("");const[restaurantName,setRestaurantName]=useState("");constfetchRestaurantsData=async()=>{try{constdata=awaitfetch(SWIGGY_API_URL);constjson=awaitdata.json();constrestaurants=eval("json?."+SWIGGY_REST_API_PATH)||[];setListOfRestaurants(restaurants);setFilteredRestaurants(restaurants);}catch(error){console.error("Error fetching data:",error);}};useEffect(()=>{fetchRestaurantsData();},[]);consthandleSearch=()=>{constfiltered=listOfRestaurants.filter((res)=>res.info.name.toLowerCase().includes(searchRestaurant.toLowerCase()));setFilteredRestaurants(filtered);setSearchRestaurant("");// Clear the search input box after searchsetRestaurantName(searchRestaurant);};// Conditional rendering using ternary operatorreturnlistOfRestaurants.length===0 ? (<RestaurantShimmer/>) : (<divclassName="body"><divclassName="search-box"><inputtype="text"value={searchRestaurant}onChange={(e)=>setSearchRestaurant(e.target.value)}placeholder="search a restaurant you want..."/><buttonclassName="search"onClick={handleSearch}>
Search
</button></div><divclassName="restaurant-container">{filteredRestaurants.length!==0 ? (filteredRestaurants.map((restaurant)=>(<RestaurantCardkey={restaurant?.info?.id}{...restaurant?.info}/>))) : (<h2>Sorry, we couldn't find any restaurant for "{restaurantName}"</h2>)}</div></div>);};exportdefaultBody;
// Contact.jsimport{useState}from"react";import"../styles/Contact.css";importcontactUsfrom"../../../../../../public/images/contact-us.png";constContact=()=>{const[message,setMessage]=useState(false);consthandleSubmit=(e)=>{e.preventDefault();setMessage(true);};return(<divclassName="contact-container"><divclassName="contact-left"><imgsrc={contactUs}alt=""/></div><divclassName="contact-right"><h1>Contact us</h1><formonSubmit={handleSubmit}><inputtype="text"placeholder="Name"required/><inputtype="email"placeholder="Email"required/><textareaplaceholder="Type your Message here..."required></textarea><buttontype="submit">Submit</button>{message&&(<span>Thanks for contacting with TastyTrails, We will reply ASAP.</span>)}</form></div></div>);};exportdefaultContact;
// About.jsimportburgerImagefrom"../../../../../../public/images/burger-image.png";import"../styles/About.css";constAbout=()=>{return(<divclassName="about-container"><divclassName="about-left"><h1>
Welcome to <br/> The world of <br/><span>Tasty &FreshFood</span></h1><h4>
"Better you will feel if you eat a Tasty<span>Trails</span> healthy
meal"
</h4></div><divclassName="about-right"><imgsrc={burgerImage}alt="Food Image"/></div></div>);};exportdefaultAbout;
// Login.jsimport{Formik}from"formik";// import Formik from formikimport*asYupfrom"yup";// import Yup from yupimport{useNavigate}from"react-router-dom";import"../styles/Login.css";// create a schema for validationconstschema=Yup.object().shape({email: Yup.string().required("Email is a required field").email("Invalid email format"),password: Yup.string().required("Password is a required field").min(8,"Password must be at least 8 characters"),});constLogin=()=>{constnavigate=useNavigate();functionhandleNavigate(values){// Alert the input values of the form that we filledalert(values);// setTimeout for navigate from login page to home pagesetTimeout(()=>{navigate("/");},0);}return(<>{/* Wrapping form inside formik tag and passing our schema to validationSchema prop */}<FormikvalidationSchema={schema}initialValues={{email: "",password: ""}}onSubmit={(values)=>{// call handleNavigate and pass input filed datahandleNavigate(JSON.stringify(values));}}>{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,})=>(<divclassName="login-container"><divclassName="login-form">{/* Passing handleSubmit parameter to html form onSubmit property */}<formnoValidateonSubmit={handleSubmit}><span>Login</span>{/* Our input html with passing formik parameters like handleChange, values, handleBlur to input properties */}<inputtype="email"name="email"onChange={handleChange}onBlur={handleBlur}value={values.email}placeholder="Enter your email"className="form-control inp_text"id="email"/>{/* If validation is not passed show errors */}<pclassName="error">{errors.email&&touched.email&&errors.email}</p>{/* input with passing formik parameters like handleChange, values, handleBlur to input properties */}<inputtype="password"name="password"onChange={handleChange}onBlur={handleBlur}value={values.password}placeholder="Enter your password"className="form-control"/>{/* If validation is not passed show errors */}<pclassName="error">{errors.password&&touched.password&&errors.password}</p>{/* Click on submit button to submit the form */}<buttontype="submit">Login</button></form></div></div>)}</Formik></>);};exportdefaultLogin;
