├── .DS_Store ├── Episode 01 - Inception ├── .DS_Store ├── Episode 01 - Assignment.pdf ├── Example 01 - HTML │ └── index.html ├── Example 02 - Javascript │ └── index.html ├── Example 03 - React │ ├── app.js │ ├── index.html │ └── style.css ├── Example 04 - React │ ├── app.js │ ├── index.html │ └── style.css ├── Example 05 - React │ ├── app.js │ ├── index.html │ └── style.css └── Example 06 - React │ ├── app.js │ ├── index.html │ └── style.css ├── Episode 02 - Igniting the app ├── .DS_Store ├── .gitignore ├── Episode 02 - Assignment.pdf ├── app.js ├── index.html ├── package.json └── style.css ├── Episode 03 - Laying the foundation ├── .DS_Store ├── Episode 03 - Assignment.pdf ├── Example 01 - JSX │ ├── .gitignore │ ├── app.js │ ├── index.html │ ├── package.json │ └── style.css ├── Example 02 - Component │ ├── .gitignore │ ├── app.js │ ├── index.html │ ├── package.json │ └── style.css └── Example 03 - Component Composition │ ├── .gitignore │ ├── app.js │ ├── index.html │ ├── package.json │ └── style.css ├── Episode 04 - Talk is cheap, Show me the code ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── app.js │ ├── index.html │ ├── package.json │ ├── style.css │ └── zomato-data.js └── Episode 04 - Assignment.pdf ├── Episode 05 - Lets get hooked ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── App.css │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Body.js │ │ ├── Card.js │ │ ├── CardList.js │ │ ├── Header.js │ │ └── Search.js │ │ └── utils │ │ ├── constants.js │ │ └── zomato-data.js └── Episode 05 - Assignment.pdf ├── Episode 06 - Exploring the world ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── App.css │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Body.js │ │ ├── Card.js │ │ ├── CardList.js │ │ ├── CardShimmer.js │ │ ├── Header.js │ │ └── Search.js │ │ └── utils │ │ └── constants.js └── Episode 06 - Assignment.pdf ├── Episode 07 - Finding the path ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── App.css │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── About.js │ │ ├── Body.js │ │ ├── Card.js │ │ ├── CardShimmer.js │ │ ├── Contact.js │ │ ├── Header.js │ │ ├── MenuItem.js │ │ ├── MenuList.js │ │ ├── PageNotFound.js │ │ ├── Restaurant.js │ │ ├── RestaurantInfo.js │ │ ├── RestaurantList.js │ │ └── Search.js │ │ └── utils │ │ └── constants.js └── Episode-07 Assignment.pdf ├── Episode 08 - Lets get classy ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── App.css │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── About.js │ │ ├── Body.js │ │ ├── Card.js │ │ ├── CardShimmer.js │ │ ├── Contact.js │ │ ├── Header.js │ │ ├── MenuItem.js │ │ ├── MenuList.js │ │ ├── PageNotFound.js │ │ ├── Restaurant.js │ │ ├── RestaurantInfo.js │ │ ├── RestaurantList.js │ │ ├── Search.js │ │ └── classComponents │ │ │ ├── AboutBanner.js │ │ │ ├── ClassChild.js │ │ │ ├── ClassCounterApp.js │ │ │ └── ClassParent.js │ │ └── utils │ │ └── constants.js └── Episode-08 Assignment.pdf ├── Episode 09 - Optimizing our app ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── App.css │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── About.js │ │ ├── Body.js │ │ ├── Contact.js │ │ ├── FilterRestaurant.js │ │ ├── Header.js │ │ ├── MenuItem.js │ │ ├── MenuList.js │ │ ├── OnlineStatus.js │ │ ├── PageNotFound.js │ │ ├── Restaurant.js │ │ ├── RestaurantCard.js │ │ ├── RestaurantInfo.js │ │ ├── RestaurantList.js │ │ ├── Search.js │ │ └── shimmer │ │ │ └── CardShimmer.js │ │ ├── hooks │ │ ├── useOnlineStatus.js │ │ ├── useRestaurantList.js │ │ └── useRestaurantMenu.js │ │ └── utils │ │ └── constants.js └── Episode-09 Assignment.pdf ├── Episode 10 - Jo Dikhta Hai, Vo Bikta Hai ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── .postcssrc │ ├── App.css │ ├── index.css │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── components │ │ │ ├── About.js │ │ │ ├── Body.js │ │ │ ├── Contact.js │ │ │ ├── FilterRestaurant.js │ │ │ ├── Header.js │ │ │ ├── MenuItem.js │ │ │ ├── MenuList.js │ │ │ ├── OnlineStatus.js │ │ │ ├── PageNotFound.js │ │ │ ├── Restaurant.js │ │ │ ├── RestaurantCard.js │ │ │ ├── RestaurantInfo.js │ │ │ ├── RestaurantList.js │ │ │ ├── Search.js │ │ │ └── shimmer │ │ │ │ └── CardShimmer.js │ │ ├── hooks │ │ │ ├── useOnlineStatus.js │ │ │ ├── useRestaurantList.js │ │ │ └── useRestaurantMenu.js │ │ └── utils │ │ │ └── constants.js │ └── tailwind.config.js └── Episode-10 Assignment.pdf ├── Episode 11 - Data is the new oil ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── .postcssrc │ ├── App.css │ ├── index.css │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── components │ │ │ ├── About.js │ │ │ ├── AccordionItem.js │ │ │ ├── AccordionList.js │ │ │ ├── Body.js │ │ │ ├── Button.js │ │ │ ├── Contact.js │ │ │ ├── DishIndicator.js │ │ │ ├── FilterRestaurant.js │ │ │ ├── Header.js │ │ │ ├── MenuItem.js │ │ │ ├── MenuList.js │ │ │ ├── OnlineStatus.js │ │ │ ├── PageNotFound.js │ │ │ ├── Restaurant.js │ │ │ ├── RestaurantCard.js │ │ │ ├── RestaurantInfo.js │ │ │ ├── RestaurantList.js │ │ │ ├── Search.js │ │ │ └── shimmer │ │ │ │ └── CardShimmer.js │ │ ├── context │ │ │ └── ThemeContext.js │ │ ├── hoc │ │ │ └── withOffer.js │ │ ├── hooks │ │ │ ├── useOnlineStatus.js │ │ │ ├── useRestaurantList.js │ │ │ └── useRestaurantMenu.js │ │ └── utils │ │ │ └── constants.js │ └── tailwind.config.js └── Episode-11 Assignment.pdf ├── Episode 12 - Let's Build our store ├── .DS_Store ├── Bhojan-food-delivery-app │ ├── .gitignore │ ├── .postcssrc │ ├── App.css │ ├── index.css │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── components │ │ │ ├── About.js │ │ │ ├── AccordionItem.js │ │ │ ├── AccordionList.js │ │ │ ├── Body.js │ │ │ ├── Button.js │ │ │ ├── Cart.js │ │ │ ├── DishIndicator.js │ │ │ ├── FilterRestaurant.js │ │ │ ├── Header.js │ │ │ ├── MenuItem.js │ │ │ ├── MenuList.js │ │ │ ├── OnlineStatus.js │ │ │ ├── PageNotFound.js │ │ │ ├── Restaurant.js │ │ │ ├── RestaurantCard.js │ │ │ ├── RestaurantInfo.js │ │ │ ├── RestaurantList.js │ │ │ └── Search.js │ │ ├── context │ │ │ └── ThemeContext.js │ │ ├── hoc │ │ │ └── withOffer.js │ │ ├── hooks │ │ │ ├── useOnlineStatus.js │ │ │ ├── useRestaurantList.js │ │ │ └── useRestaurantMenu.js │ │ ├── redux │ │ │ ├── AppStore.js │ │ │ └── slices │ │ │ │ └── cartSlice.js │ │ ├── shimmer │ │ │ └── CardShimmer.js │ │ └── utils │ │ │ └── constants.js │ └── tailwind.config.js └── Episode-12 Assignment.pdf ├── Episode 13 - Time for test ├── .DS_Store └── Bhojan-food-delivery-app │ ├── .gitignore │ ├── .parcelrc │ ├── .postcssrc │ ├── App.css │ ├── babel.config.js │ ├── index.css │ ├── index.html │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.js │ ├── components │ │ ├── About.js │ │ ├── AccordionItem.js │ │ ├── AccordionList.js │ │ ├── Body.js │ │ ├── Button.js │ │ ├── Cart.js │ │ ├── DishIndicator.js │ │ ├── FilterRestaurant.js │ │ ├── GlobalSearch.js │ │ ├── Header.js │ │ ├── MenuItem.js │ │ ├── MenuList.js │ │ ├── OnlineStatus.js │ │ ├── PageNotFound.js │ │ ├── PopularCuisine.js │ │ ├── Restaurant.js │ │ ├── RestaurantCard.js │ │ ├── RestaurantInfo.js │ │ ├── RestaurantList.js │ │ ├── Search.js │ │ ├── SearchRestaurantList.js │ │ ├── SearchResult.js │ │ ├── SearchSuggestion.js │ │ ├── __test__ │ │ │ ├── About.spec.js │ │ │ ├── AccordionItem.spec.js │ │ │ ├── AccordionList.spec.js │ │ │ ├── App.spec.js │ │ │ ├── Body.spec.js │ │ │ ├── FilterRestaurant.spec.js │ │ │ ├── Header.spec.js │ │ │ ├── MenuItem.spec.js │ │ │ ├── OnlineStatus.spec.js │ │ │ └── Restaurant.spec.js │ │ ├── atoms │ │ │ ├── BasicContent.js │ │ │ ├── BrandItem.js │ │ │ └── RestaurantItem.js │ │ ├── base │ │ │ ├── cards │ │ │ │ ├── MiniCard.js │ │ │ │ ├── SearchDishCard.js │ │ │ │ ├── SearchRestaurantCard.js │ │ │ │ └── SuggestionCard.js │ │ │ └── form-elements │ │ │ │ └── Input.js │ │ ├── molecules │ │ │ ├── AppInstallLinks.js │ │ │ ├── BrandsContent.js │ │ │ ├── FavouriteRestaurantInfoWithStyle.js │ │ │ ├── ImageInfoLayoutCard.js │ │ │ └── RestaurantList.js │ │ ├── pages │ │ │ ├── Collections.js │ │ │ └── Home.js │ │ └── templates │ │ │ ├── ComponentMapper.js │ │ │ └── GridWidget.js │ ├── context │ │ └── ThemeContext.js │ ├── hoc │ │ └── withOffer.js │ ├── hooks │ │ ├── useCollectionsApi.js │ │ ├── useHomeApi.js │ │ ├── useOnlineStatus.js │ │ ├── usePopularCuisine.js │ │ ├── useRestaurantList.js │ │ ├── useRestaurantMenu.js │ │ ├── useSearchResult.js │ │ └── useSearchSuggestion.js │ ├── index.js │ ├── mock-data │ │ ├── HeaderMock.json │ │ ├── MockCategoriesList.json │ │ ├── MockMenuItemInfo.json │ │ ├── MockRestaurantDetails.json │ │ ├── MockRestaurantInfo.json │ │ └── MockRestaurantList.json │ ├── redux │ │ ├── AppStore.js │ │ └── slices │ │ │ └── cartSlice.js │ ├── router │ │ └── AppRouter.js │ ├── shimmer │ │ └── CardShimmer.js │ ├── test-demo │ │ ├── __test__ │ │ │ └── sum.spec.js │ │ └── sum.js │ └── utils │ │ ├── componentHash.js │ │ ├── constants.js │ │ └── iconMapper.js │ └── tailwind.config.js ├── Episode 14 - Final Food App ├── .DS_Store └── Bhojan-food-delivery-app │ ├── .env │ ├── .gitignore │ ├── .parcelrc │ ├── .postcssrc │ ├── babel.config.js │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.css │ ├── App.js │ ├── components │ │ ├── Body.js │ │ ├── FilterRestaurant.js │ │ ├── Restaurant.js │ │ ├── RestaurantCard.js │ │ ├── RestaurantInfo.js │ │ ├── RestaurantList.js │ │ ├── Search.js │ │ ├── __test__ │ │ │ ├── About.spec.js │ │ │ ├── AccordionItem.spec.js │ │ │ ├── AccordionList.spec.js │ │ │ ├── App.spec.js │ │ │ ├── Body.spec.js │ │ │ ├── FilterRestaurant.spec.js │ │ │ ├── Header.spec.js │ │ │ ├── MenuItem.spec.js │ │ │ ├── OnlineStatus.spec.js │ │ │ └── Restaurant.spec.js │ │ ├── atoms │ │ │ ├── AccordionItem.js │ │ │ ├── BasicContent.js │ │ │ ├── BrandItem.js │ │ │ ├── Button.js │ │ │ ├── DishIndicator.js │ │ │ ├── Input.js │ │ │ ├── MapButton.js │ │ │ ├── MenuItem.js │ │ │ ├── MiniCard.js │ │ │ ├── OnlineStatus.js │ │ │ ├── RestaurantItem.js │ │ │ ├── SearchDishCard.js │ │ │ ├── SearchRestaurantCard.js │ │ │ └── SuggestionCard.js │ │ ├── molecules │ │ │ ├── AccordionList.js │ │ │ ├── AppInstallLinks.js │ │ │ ├── BrandsContent.js │ │ │ ├── FavouriteRestaurantInfoWithStyle.js │ │ │ ├── Header.js │ │ │ ├── ImageInfoLayoutCard.js │ │ │ ├── MenuList.js │ │ │ ├── PopularCuisine.js │ │ │ ├── RestaurantList.js │ │ │ ├── SearchRestaurantList.js │ │ │ ├── SearchSuggestion.js │ │ │ └── SidebarContainer.js │ │ ├── organisms │ │ │ ├── LocationList.js │ │ │ └── SearchResult.js │ │ ├── pages │ │ │ ├── About.js │ │ │ ├── Cart.js │ │ │ ├── Collections.js │ │ │ ├── GlobalSearch.js │ │ │ ├── Home.js │ │ │ └── PageNotFound.js │ │ └── templates │ │ │ ├── ComponentMapper.js │ │ │ └── GridWidget.js │ ├── context │ │ └── ThemeContext.js │ ├── hoc │ │ └── withOffer.js │ ├── hooks │ │ ├── useCollectionsApi.js │ │ ├── useHomeApi.js │ │ ├── useNavigator.js │ │ ├── useOnlineStatus.js │ │ ├── usePopularCuisine.js │ │ ├── useRestaurantList.js │ │ ├── useRestaurantMenu.js │ │ ├── useSearchResult.js │ │ ├── useSearchSuggestion.js │ │ └── useToggle.js │ ├── index.css │ ├── index.html │ ├── index.js │ ├── mock-data │ │ ├── HeaderMock.json │ │ ├── MockCategoriesList.json │ │ ├── MockMenuItemInfo.json │ │ ├── MockRestaurantDetails.json │ │ ├── MockRestaurantInfo.json │ │ └── MockRestaurantList.json │ ├── redux │ │ ├── AppStore.js │ │ └── slices │ │ │ ├── cartSlice.js │ │ │ └── locationSlice.js │ ├── router │ │ └── AppRouter.js │ ├── shimmer │ │ └── CardShimmer.js │ ├── test-demo │ │ ├── __test__ │ │ │ └── sum.spec.js │ │ └── sum.js │ └── utils │ │ ├── componentHash.js │ │ ├── constants.js │ │ └── iconMapper.js │ ├── tailwind.config.js │ └── yarn.lock ├── LICENSE └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/.DS_Store -------------------------------------------------------------------------------- /Episode 01 - Inception/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 01 - Inception/.DS_Store -------------------------------------------------------------------------------- /Episode 01 - Inception/Episode 01 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 01 - Inception/Episode 01 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 01 - HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Namaste HTML 7 | 8 | 9 |
10 |

Hello World!

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 02 - Javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Namaste Javascript 7 | 8 | 9 |
10 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 03 - React/app.js: -------------------------------------------------------------------------------- 1 | const heading = React.createElement("h1", {id: 'heading'}, "Hello world from react!"); 2 | const root = ReactDOM.createRoot(document.getElementById("root")); 3 | root.render(heading); 4 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 03 - React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 03 - React/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 04 - React/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | *
3 | *
4 | *

I am h1 tag

5 | *
6 | *
7 | */ 8 | 9 | const parent = React.createElement( 10 | "div", 11 | { id: "parent" }, 12 | React.createElement( 13 | "div", 14 | { id: "child" }, 15 | React.createElement("h1", {}, "I am h1 tag") 16 | ) 17 | ); 18 | const root = ReactDOM.createRoot(document.getElementById("root")); 19 | root.render(parent); 20 | 21 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 04 - React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 04 - React/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 05 - React/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | *
3 | *
4 | *

I am h1 tag

5 | *

I am h2 tag

6 | *
7 | *
8 | */ 9 | 10 | const parent = React.createElement( 11 | "div", 12 | { id: "parent" }, 13 | React.createElement( 14 | "div", 15 | { id: "child" }, 16 | [React.createElement("h1", {}, "I am h1 tag"), React.createElement("h2", {}, "I am h2 tag")] 17 | ) 18 | ); 19 | const root = ReactDOM.createRoot(document.getElementById("root")); 20 | root.render(parent); 21 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 05 - React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 05 - React/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 06 - React/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | *
3 | *
4 | *

I am h1 tag

5 | *

I am h2 tag

6 | *
7 | *
8 | *

I am h1 tag

9 | *

I am h2 tag

10 | *
11 | *
12 | */ 13 | 14 | const parent = React.createElement("div", { id: "parent" }, [ 15 | React.createElement("div", { id: "child1" }, [ 16 | React.createElement("h1", {}, "I am h1 tag"), 17 | React.createElement("h2", {}, "I am h2 tag"), 18 | ]), 19 | React.createElement("div", { id: "child2" }, [ 20 | React.createElement("h1", {}, "I am h1 tag"), 21 | React.createElement("h2", {}, "I am h2 tag"), 22 | ]), 23 | ]); 24 | const root = ReactDOM.createRoot(document.getElementById("root")); 25 | root.render(parent); 26 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 06 - React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Episode 01 - Inception/Example 06 - React/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 02 - Igniting the app/.DS_Store -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/Episode 02 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 02 - Igniting the app/Episode 02 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | /** 4 | *
5 | *
6 | *

I am h1 tag

7 | *

I am h2 tag

8 | *
9 | *
10 | *

I am h1 tag

11 | *

I am h2 tag

12 | *
13 | *
14 | */ 15 | 16 | const parent = React.createElement("div", { id: "parent" }, [ 17 | React.createElement("div", { id: "child1" }, [ 18 | React.createElement("h1", {}, "I am h1 tag"), 19 | React.createElement("h2", {}, "I am h2 tag"), 20 | ]), 21 | React.createElement("div", { id: "child2" }, [ 22 | React.createElement("h1", {}, "I am h1 tag"), 23 | React.createElement("h2", {}, "I am h2 tag"), 24 | ]), 25 | ]); 26 | 27 | const root = ReactDOM.createRoot(document.getElementById("root")); 28 | root.render(parent); 29 | -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "react", 16 | "18", 17 | "namaste", 18 | "react" 19 | ], 20 | "author": "Akshay Saini", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/tanishraj/learn-react-18/issues" 24 | }, 25 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 26 | "devDependencies": { 27 | "parcel": "^2.10.3", 28 | "process": "^0.11.10" 29 | }, 30 | "dependencies": { 31 | "react": "^18.2.0", 32 | "react-dom": "^18.2.0" 33 | }, 34 | "browserlist": [ 35 | "last 2 versions" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /Episode 02 - Igniting the app/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 03 - Laying the foundation/.DS_Store -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Episode 03 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 03 - Laying the foundation/Episode 03 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 01 - JSX/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 01 - JSX/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | 4 | // Creating React Elements or HTML DOM elements like this can be very hectic and is not developer friendly. 5 | const heading = React.createElement("h1", { id: 'heading' }, "Namaste React!") 6 | console.log(heading) 7 | 8 | // Below syntax looks like writing HTML and is more developer friendly and easy to write. 9 | const jsxHeading =

Namaste React using JSX!

10 | console.log(jsxHeading); 11 | 12 | const root = ReactDOM.createRoot(document.getElementById("root")) 13 | root.render(heading) -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 01 - JSX/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 01 - JSX/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 01 - JSX/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 02 - Component/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 02 - Component/app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | // Below code is similar to React.createElement because babel will transpile it. 5 | const jsxHeading = ( 6 |

7 | Namaste React using JSX! 8 |

9 | ); 10 | 11 | /* 12 | React Component 13 | 1 - Class based Component 14 | 2 - Functional Component 15 | */ 16 | 17 | // functional component 18 | const HeadingComponent = () => { 19 | return

I am a heading component.

; 20 | }; 21 | 22 | const root = ReactDOM.createRoot(document.getElementById("root")); 23 | // Javascript way to render the component 24 | root.render(HeadingComponent()); 25 | 26 | // React way to Render the component 27 | root.render(); 28 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 02 - Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 02 - Component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 02 - Component/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 03 - Component Composition/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 03 - Component Composition/app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | // React component using normal function 5 | function TitleComponent() { 6 | return ( 7 |

8 | Namaste React using JSX! 9 |

10 | ); 11 | } 12 | 13 | // javascript variable 14 | const value = 1000 15 | 16 | // Component Composition - Calling one componen within the other 17 | const HeadingComponent = () => { 18 | return ( 19 |
20 | {/* {} helps write js inside JSX */} 21 |

{value}

22 |

{value + value}

23 | {console.log("Any Javascript code will work within JSX")} 24 | {TitleComponent()} 25 | 26 | 27 |

I am a heading component.

28 |
29 | ); 30 | }; 31 | 32 | const root = ReactDOM.createRoot(document.getElementById("root")); 33 | // React way to Render the component 34 | root.render(); 35 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 03 - Component Composition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 03 - Component Composition/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 03 - Laying the foundation/Example 03 - Component Composition/style.css: -------------------------------------------------------------------------------- 1 | #heading { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /Episode 04 - Talk is cheap, Show me the code/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 04 - Talk is cheap, Show me the code/.DS_Store -------------------------------------------------------------------------------- /Episode 04 - Talk is cheap, Show me the code/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 04 - Talk is cheap, Show me the code/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 04 - Talk is cheap, Show me the code/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 04 - Talk is cheap, Show me the code/Episode 04 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 04 - Talk is cheap, Show me the code/Episode 04 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 05 - Lets get hooked/.DS_Store -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import { Header } from "./components/Header"; 5 | import { Body } from "./components/Body"; 6 | 7 | const App = () => { 8 | return ( 9 |
10 |
11 | 12 |
13 | ); 14 | }; 15 | 16 | const root = ReactDOM.createRoot(document.getElementById("root")); 17 | root.render(); 18 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import { Search } from "./Search"; 2 | import { CardList } from "./CardList"; 3 | 4 | export const Body = () => { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/components/Card.js: -------------------------------------------------------------------------------- 1 | export const Card = ({ cardData }) => { 2 | const { info } = cardData; 3 | return ( 4 |
5 |
6 | {info?.image?.name} 11 |
12 |
13 |
14 |

{info?.name}

15 |
16 |
17 | {info?.cuisine 18 | ?.map((cuisine) => { 19 | return cuisine.name; 20 | }) 21 | .join(", ")} 22 |
23 |
24 |
25 |
26 |

{info?.costText?.text}

27 | 30 |
31 |
32 |
33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | export const Header = () => { 2 | return ( 3 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/components/Search.js: -------------------------------------------------------------------------------- 1 | export const Search = () => { 2 | return ( 3 |
4 |
5 | 10 | 11 | 12 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 05 - Lets get hooked/Bhojan-food-delivery-app/src/utils/constants.js -------------------------------------------------------------------------------- /Episode 05 - Lets get hooked/Episode 05 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 05 - Lets get hooked/Episode 05 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 06 - Exploring the world/.DS_Store -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0" 35 | }, 36 | "browserlist": [ 37 | "last 2 versions" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import { Header } from "./components/Header"; 5 | import { Body } from "./components/Body"; 6 | 7 | const App = () => { 8 | return ( 9 |
10 |
11 | 12 |
13 | ); 14 | }; 15 | 16 | const root = ReactDOM.createRoot(document.getElementById("root")); 17 | root.render(); 18 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/components/Card.js: -------------------------------------------------------------------------------- 1 | const IMAGE_BASE_URL = 2 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 3 | 4 | export const Card = ({ cardData }) => { 5 | const { info } = cardData; 6 | return ( 7 |
8 |
9 | {info?.image?.name} 14 |
15 |
16 |
17 |

{info?.name}

18 |
19 |
{info?.cuisines?.join(", ")}
20 |
21 |
22 |
23 |

{info?.costForTwo}

24 | 25 |
26 |
27 |
28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/components/CardShimmer.js: -------------------------------------------------------------------------------- 1 | export const CardShimmer = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | export const Header = () => { 2 | return ( 3 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export const Search = ({ filterRestaurants }) => { 4 | const [searchText, setSerachText] = useState(""); 5 | 6 | return ( 7 |
8 |
9 | setSerachText(e.target.value)} 15 | /> 16 | 17 | 25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 06 - Exploring the world/Bhojan-food-delivery-app/src/utils/constants.js -------------------------------------------------------------------------------- /Episode 06 - Exploring the world/Episode 06 - Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 06 - Exploring the world/Episode 06 - Assignment.pdf -------------------------------------------------------------------------------- /Episode 07 - Finding the path/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 07 - Finding the path/.DS_Store -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "react-router-dom": "^6.21.1" 36 | }, 37 | "browserlist": [ 38 | "last 2 versions" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | export const About = () => { 2 | return ( 3 |
4 |

About Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/Card.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { IMAGE_BASE_URL } from "../utils/constants"; 3 | 4 | export const Card = ({ cardData }) => { 5 | const { info } = cardData; 6 | return ( 7 |
8 | 9 |
10 | {info?.image?.name} 15 |
16 |
17 |
18 |

{info?.name}

19 |
20 |
{info?.cuisines?.join(", ")}
21 |
22 |
23 |
24 |

{info?.costForTwo}

25 | 26 |
27 |
28 | 29 |
30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/CardShimmer.js: -------------------------------------------------------------------------------- 1 | export const CardShimmer = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/Contact.js: -------------------------------------------------------------------------------- 1 | export const Contact = () => { 2 | return ( 3 |
4 |

Contact Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export const Header = () => { 4 | return ( 5 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | export const MenuItem = ({ menuItemInfo }) => { 2 | const menuItem = menuItemInfo?.card?.info ?? {}; 3 | 4 | return ( 5 |
6 |
11 |
12 |
13 |
{menuItem?.name}
14 |
Rs. {menuItem?.price / 100}
15 |
{menuItem?.description}
16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | const menuItemList = 5 | menuList?.groupedCard?.cardGroupMap?.REGULAR?.cards?.[1]?.card?.card 6 | ?.itemCards ?? []; 7 | 8 | return ( 9 |
10 | {menuItemList?.map((menuItem) => ( 11 | 12 | ))} 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

404

12 |

Page not found

13 |
14 | 15 | Go Back Home 16 |
17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 4 | import { RestaurantInfo } from "./RestaurantInfo"; 5 | import { MenuList } from "./MenuList"; 6 | 7 | export const RestaurantDetails = () => { 8 | const [restaurantDetails, setRestaurantDetails] = useState([]); 9 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 10 | const { resId } = useParams(); 11 | 12 | const fetchRestaurantDetails = async () => { 13 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 14 | const { 15 | data: { cards }, 16 | } = (await restaurantDetails.json()) ?? {}; 17 | setRestaurantDetails(cards); 18 | }; 19 | 20 | useEffect(() => { 21 | fetchRestaurantDetails(); 22 | }, []); 23 | 24 | return ( 25 |
26 | 27 | 28 |
29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/RestaurantInfo.js: -------------------------------------------------------------------------------- 1 | export const RestaurantInfo = ({ restaurantInfo }) => { 2 | const { 3 | card: { 4 | card: { info }, 5 | }, 6 | } = restaurantInfo ?? { card: { card: { info: {} } } }; 7 | 8 | return ( 9 |
10 |
11 |
12 |

{info?.name}

13 |
14 |
{info?.cuisines?.join(", ")}
15 |
16 | {info?.areaName}, {info?.sla?.lastMileTravelString} 17 |
18 |
{info?.feeDetails?.message}
19 |
20 |
21 |
{info?.sla?.slaString}
22 |
{info?.costForTwoMessage}
23 |
24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export const Search = ({ filterRestaurants }) => { 4 | const [searchText, setSerachText] = useState(""); 5 | 6 | return ( 7 |
8 |
9 | setSerachText(e.target.value)} 15 | /> 16 | 17 | 25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | -------------------------------------------------------------------------------- /Episode 07 - Finding the path/Episode-07 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 07 - Finding the path/Episode-07 Assignment.pdf -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 08 - Lets get classy/.DS_Store -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "react-router-dom": "^6.21.1" 36 | }, 37 | "browserlist": [ 38 | "last 2 versions" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | import AboutBanner from "./classComponents/AboutBanner"; 2 | import ClassCounterApp from "./classComponents/ClassCounterApp"; 3 | import ClassParent from "./classComponents/ClassParent"; 4 | 5 | export const About = () => { 6 | return ( 7 |
8 | 9 |
10 |

Introduction to class based component in React

11 | 12 |
13 |
14 |

Let's look at Component Lifecycle

15 | 16 |
17 |
18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/Card.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { IMAGE_BASE_URL } from "../utils/constants"; 3 | 4 | export const Card = ({ cardData }) => { 5 | const { info } = cardData; 6 | return ( 7 |
8 | 9 |
10 | {info?.image?.name} 15 |
16 |
17 |
18 |

{info?.name}

19 |
20 |
{info?.cuisines?.join(", ")}
21 |
22 |
23 |
24 |

{info?.costForTwo}

25 | 26 |
27 |
28 | 29 |
30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/CardShimmer.js: -------------------------------------------------------------------------------- 1 | export const CardShimmer = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/Contact.js: -------------------------------------------------------------------------------- 1 | export const Contact = () => { 2 | return ( 3 |
4 |

Contact Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export const Header = () => { 4 | return ( 5 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | export const MenuItem = ({ menuItemInfo }) => { 2 | const menuItem = menuItemInfo?.card?.info ?? {}; 3 | 4 | return ( 5 |
6 |
11 |
12 |
13 |
{menuItem?.name}
14 |
Rs. {menuItem?.price / 100}
15 |
{menuItem?.description}
16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | const menuItemList = 5 | menuList?.groupedCard?.cardGroupMap?.REGULAR?.cards?.[1]?.card?.card 6 | ?.itemCards ?? []; 7 | 8 | return ( 9 |
10 | {menuItemList?.map((menuItem) => ( 11 | 12 | ))} 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

404

12 |

Page not found

13 |
14 | 15 | Go Back Home 16 |
17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 4 | import { RestaurantInfo } from "./RestaurantInfo"; 5 | import { MenuList } from "./MenuList"; 6 | 7 | export const RestaurantDetails = () => { 8 | const [restaurantDetails, setRestaurantDetails] = useState([]); 9 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 10 | const { resId } = useParams(); 11 | 12 | const fetchRestaurantDetails = async () => { 13 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 14 | const { 15 | data: { cards }, 16 | } = (await restaurantDetails.json()) ?? {}; 17 | setRestaurantDetails(cards); 18 | }; 19 | 20 | useEffect(() => { 21 | fetchRestaurantDetails(); 22 | }, []); 23 | 24 | return ( 25 |
26 | 27 | 28 |
29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/RestaurantInfo.js: -------------------------------------------------------------------------------- 1 | export const RestaurantInfo = ({ restaurantInfo }) => { 2 | const { 3 | card: { 4 | card: { info }, 5 | }, 6 | } = restaurantInfo ?? { card: { card: { info: {} } } }; 7 | 8 | return ( 9 |
10 |
11 |
12 |

{info?.name}

13 |
14 |
{info?.cuisines?.join(", ")}
15 |
16 | {info?.areaName}, {info?.sla?.lastMileTravelString} 17 |
18 |
{info?.feeDetails?.message}
19 |
20 |
21 |
{info?.sla?.slaString}
22 |
{info?.costForTwoMessage}
23 |
24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export const Search = ({ filterRestaurants }) => { 4 | const [searchText, setSerachText] = useState(""); 5 | 6 | return ( 7 |
8 |
9 | setSerachText(e.target.value)} 15 | /> 16 | 17 | 25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/classComponents/AboutBanner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class AboutBanner extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | render() { 9 | return ( 10 |
11 |

{this.props.intro}

12 |

{this.props.name}

13 |
14 | ); 15 | } 16 | } 17 | 18 | export default AboutBanner; 19 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/classComponents/ClassChild.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class ClassChild extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | console.log("Child Constructor"); 7 | } 8 | 9 | componentDidMount() { 10 | console.log("Child componentDidMount"); 11 | } 12 | 13 | componentDidUpdate() { 14 | console.log("Child componentDidUpdate"); 15 | } 16 | 17 | componentWillUnmount() { 18 | console.log("Child componentWillUnmount"); 19 | } 20 | 21 | render() { 22 | console.log("Child Render"); 23 | 24 | return ( 25 |
26 |

Child Component

27 |
28 | ); 29 | } 30 | } 31 | 32 | export default ClassChild; 33 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/classComponents/ClassCounterApp.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class ClassCounterApp extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | count: 0, 8 | }; 9 | } 10 | 11 | render() { 12 | const { appName } = this.props; 13 | const { count } = this.state; 14 | 15 | const increment = () => { 16 | this.setState({ count: count + 1 }); 17 | }; 18 | 19 | const decrement = () => { 20 | this.setState({ count: count - 1 }); 21 | }; 22 | 23 | return ( 24 |
25 |

{appName}

26 |
27 | 30 |
{count}
31 | 34 |
35 |
36 | ); 37 | } 38 | } 39 | 40 | export default ClassCounterApp; 41 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/components/classComponents/ClassParent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ClassChild from "./ClassChild"; 3 | 4 | class ClassParent extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | console.log("Parent Constructor"); 8 | } 9 | 10 | componentDidMount() { 11 | console.log("Parent componentDidMount"); 12 | } 13 | 14 | componentDidUpdate() { 15 | console.log("Parent componentDidUpdate"); 16 | } 17 | 18 | componentWillUnmount() { 19 | console.log("Parent componentWillUnmount"); 20 | } 21 | 22 | render() { 23 | console.log("Parent Render"); 24 | 25 | return ( 26 |
27 |

Parent Component

28 | 29 | 30 |
31 | ); 32 | } 33 | } 34 | export default ClassParent; 35 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | -------------------------------------------------------------------------------- /Episode 08 - Lets get classy/Episode-08 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 08 - Lets get classy/Episode-08 Assignment.pdf -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 09 - Optimizing our app/.DS_Store -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "process": "^0.11.10" 31 | }, 32 | "dependencies": { 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "react-router-dom": "^6.21.1" 36 | }, 37 | "browserlist": [ 38 | "last 2 versions" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

Hi I'm

6 |

Tanish!

7 |
8 |
9 | ); 10 | }; 11 | 12 | export default About; 13 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import { Search } from "./Search"; 3 | import { RestaurantList } from "./RestaurantList"; 4 | import { useRestaurantList } from "../hooks/useRestaurantList"; 5 | import { FilterRestaurant } from "./FilterRestaurant"; 6 | 7 | export const Body = () => { 8 | const { restaurantList } = useRestaurantList() ?? {}; 9 | const [finalRestaurantList, setFinalRestaurantList] = useState([]); 10 | 11 | useEffect(() => { 12 | setFinalRestaurantList(restaurantList); 13 | }, [restaurantList]); 14 | 15 | const getFilteredRestaurants = (filteredRestauratns = restaurantList) => { 16 | setFinalRestaurantList(filteredRestauratns); 17 | }; 18 | 19 | return ( 20 |
21 | 25 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/Contact.js: -------------------------------------------------------------------------------- 1 | export const Contact = () => { 2 | return ( 3 |
4 |

Contact Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/FilterRestaurant.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const FilterRestaurant = ({ 4 | restaurantList, 5 | getTopRatedRestaurants, 6 | }) => { 7 | const [isFiltered, setIsFiltered] = useState(false); 8 | 9 | useEffect(() => { 10 | if (isFiltered) { 11 | getTopRatedRestaurants(filterTopRatedRestaurants()); 12 | } else { 13 | getTopRatedRestaurants(); 14 | } 15 | }, [isFiltered]); 16 | 17 | const filterTopRatedRestaurants = () => { 18 | return restaurantList.filter((restaurants) => { 19 | return Number(restaurants?.info?.avgRating) > 4.2; 20 | }); 21 | }; 22 | 23 | return ( 24 |
25 |
26 | 32 |
33 |
34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { OnlineStatus } from "./OnlineStatus"; 3 | 4 | export const Header = () => { 5 | return ( 6 |
7 | 25 |
26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | export const MenuItem = ({ menuItemInfo }) => { 2 | const menuItem = menuItemInfo?.card?.info ?? {}; 3 | 4 | return ( 5 |
6 |
11 |
12 |
13 |
{menuItem?.name}
14 |
Rs. {menuItem?.price / 100}
15 |
{menuItem?.description}
16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | const menuItemList = 5 | menuList?.groupedCard?.cardGroupMap?.REGULAR?.cards?.[1]?.card?.card 6 | ?.itemCards ?? []; 7 | 8 | return ( 9 |
10 | {menuItemList?.map((menuItem) => ( 11 | 12 | ))} 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
7 | ); 8 | }; 9 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

404

12 |

Page not found

13 |
14 | 15 | Go Back Home 16 |
17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { RestaurantInfo } from "./RestaurantInfo"; 3 | import { MenuList } from "./MenuList"; 4 | import { useRestaurantMenu } from "../hooks/useRestaurantMenu"; 5 | 6 | export const RestaurantDetails = () => { 7 | const { resId } = useParams(); 8 | const { restaurant, menu } = useRestaurantMenu(resId); 9 | 10 | return ( 11 |
12 | 13 | 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/RestaurantCard.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { IMAGE_BASE_URL } from "../utils/constants"; 3 | 4 | export const RestaurantCard = ({ cardData }) => { 5 | const { info } = cardData; 6 | return ( 7 |
8 | 9 |
10 | {info?.image?.name} 15 |
16 |
17 |
18 |

{info?.name}

19 |
20 |
{info?.cuisines?.join(", ")}
21 |
22 |
23 |
24 |

{info?.costForTwo}

25 | 26 |
27 |
28 | 29 |
30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/RestaurantInfo.js: -------------------------------------------------------------------------------- 1 | export const RestaurantInfo = ({ restaurantInfo }) => { 2 | const { 3 | card: { 4 | card: { info }, 5 | }, 6 | } = restaurantInfo ?? { card: { card: { info: {} } } }; 7 | 8 | return ( 9 |
10 |
11 |
12 |

{info?.name}

13 |
14 |
{info?.cuisines?.join(", ")}
15 |
16 | {info?.areaName}, {info?.sla?.lastMileTravelString} 17 |
18 |
{info?.feeDetails?.message}
19 |
20 |
21 |
{info?.sla?.slaString}
22 |
{info?.costForTwoMessage}
23 |
24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "./shimmer/CardShimmer"; 3 | 4 | const shimmerSize = new Array(4).fill(1); 5 | 6 | export const RestaurantList = ({ restaurantList }) => { 7 | return ( 8 |
9 | {restaurantList?.length 10 | ? restaurantList.map((cardData) => ( 11 | 12 | )) 13 | : shimmerSize.map((_item, index) => )} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/components/shimmer/CardShimmer.js: -------------------------------------------------------------------------------- 1 | export const CardShimmer = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | const { 11 | data: { cards }, 12 | } = swiggyData; 13 | const restaurants = 14 | cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 15 | setRestaurantList(restaurants); 16 | }; 17 | 18 | useEffect(() => { 19 | getRestaurantList(); 20 | }, []); 21 | 22 | return { restaurantList }; 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | console.log(resId); 6 | const [restaurantDetails, setRestaurantDetails] = useState([]); 7 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 8 | 9 | const getRestaurantDetails = async () => { 10 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 11 | const { 12 | data: { cards }, 13 | } = (await restaurantDetails.json()) ?? {}; 14 | setRestaurantDetails(cards); 15 | }; 16 | 17 | useEffect(() => { 18 | getRestaurantDetails(); 19 | }, []); 20 | 21 | return { restaurant, menu }; 22 | }; 23 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | -------------------------------------------------------------------------------- /Episode 09 - Optimizing our app/Episode-09 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 09 - Optimizing our app/Episode-09 Assignment.pdf -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/.DS_Store -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .masthead { 8 | background-image: url("https://i.imgur.com/D4rA84W.jpg"); 9 | } 10 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "postcss": "^8.4.32", 31 | "process": "^0.11.10", 32 | "tailwindcss": "^3.4.0" 33 | }, 34 | "dependencies": { 35 | "react": "^18.2.0", 36 | "react-dom": "^18.2.0", 37 | "react-router-dom": "^6.21.1" 38 | }, 39 | "browserlist": [ 40 | "last 2 versions" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

6 | Hi I'm 7 |

8 |

9 | Tanish! 10 |

11 |
12 |
13 | ); 14 | }; 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import { Search } from "./Search"; 3 | import { RestaurantList } from "./RestaurantList"; 4 | import { useRestaurantList } from "../hooks/useRestaurantList"; 5 | import { FilterRestaurant } from "./FilterRestaurant"; 6 | 7 | export const Body = () => { 8 | const { restaurantList } = useRestaurantList() ?? {}; 9 | const [finalRestaurantList, setFinalRestaurantList] = useState([]); 10 | 11 | useEffect(() => { 12 | setFinalRestaurantList(restaurantList); 13 | }, [restaurantList]); 14 | 15 | const getFilteredRestaurants = (filteredRestauratns = restaurantList) => { 16 | setFinalRestaurantList(filteredRestauratns); 17 | }; 18 | 19 | return ( 20 |
21 | 25 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/Contact.js: -------------------------------------------------------------------------------- 1 | export const Contact = () => { 2 | return ( 3 |
4 |

Contact Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | export const MenuItem = ({ menuItemInfo }) => { 2 | const menuItem = menuItemInfo?.card?.info ?? {}; 3 | 4 | return ( 5 |
6 |
13 |
20 |
21 |
{menuItem?.name}
22 |
23 | Rs. {menuItem?.price / 100} 24 |
25 |
26 | {menuItem?.description} 27 |
28 |
29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | const menuItemList = 5 | menuList?.groupedCard?.cardGroupMap?.REGULAR?.cards?.[1]?.card?.card 6 | ?.itemCards ?? []; 7 | 8 | return ( 9 |
10 | {menuItemList?.map((menuItem) => ( 11 | 12 | ))} 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

404

12 |

Page not found

13 |
14 | 15 | Go Back Home 16 |
17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { RestaurantInfo } from "./RestaurantInfo"; 3 | import { MenuList } from "./MenuList"; 4 | import { useRestaurantMenu } from "../hooks/useRestaurantMenu"; 5 | 6 | export const RestaurantDetails = () => { 7 | const { resId } = useParams(); 8 | const { restaurant, menu } = useRestaurantMenu(resId); 9 | 10 | return ( 11 |
12 | 13 | 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "./shimmer/CardShimmer"; 3 | 4 | const shimmerSize = new Array(4).fill(1); 5 | 6 | export const RestaurantList = ({ restaurantList }) => { 7 | return ( 8 |
9 | {restaurantList?.length 10 | ? restaurantList.map((cardData) => ( 11 | 12 | )) 13 | : shimmerSize.map((_item, index) => )} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | const { 11 | data: { cards }, 12 | } = swiggyData; 13 | const restaurants = 14 | cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 15 | setRestaurantList(restaurants); 16 | }; 17 | 18 | useEffect(() => { 19 | getRestaurantList(); 20 | }, []); 21 | 22 | return { restaurantList }; 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | console.log(resId); 6 | const [restaurantDetails, setRestaurantDetails] = useState([]); 7 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 8 | 9 | const getRestaurantDetails = async () => { 10 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 11 | const { 12 | data: { cards }, 13 | } = (await restaurantDetails.json()) ?? {}; 14 | setRestaurantDetails(cards); 15 | }; 16 | 17 | useEffect(() => { 18 | getRestaurantDetails(); 19 | }, []); 20 | 21 | return { restaurant, menu }; 22 | }; 23 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | -------------------------------------------------------------------------------- /Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Episode-10 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 10 - Jo Dikhta Hai, Vo Bikta Hai/Episode-10 Assignment.pdf -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 11 - Data is the new oil/.DS_Store -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .masthead { 8 | background-image: url("https://i.imgur.com/D4rA84W.jpg"); 9 | } 10 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "postcss": "^8.4.32", 31 | "process": "^0.11.10", 32 | "tailwindcss": "^3.4.0" 33 | }, 34 | "dependencies": { 35 | "react": "^18.2.0", 36 | "react-dom": "^18.2.0", 37 | "react-router-dom": "^6.21.1" 38 | }, 39 | "browserlist": [ 40 | "last 2 versions" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

6 | Hi I'm 7 |

8 |

9 | Tanish! 10 |

11 |
12 |
13 | ); 14 | }; 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/AccordionItem.js: -------------------------------------------------------------------------------- 1 | import { MenuList } from "./MenuList"; 2 | 3 | export const AccordionItem = ({ 4 | categoryItem, 5 | isAccordionOpen, 6 | setAccordionOpenIndex, 7 | }) => { 8 | const title = categoryItem?.card?.card?.title ?? ""; 9 | const menuList = categoryItem?.card?.card?.itemCards ?? []; 10 | 11 | return ( 12 |
13 |
{ 16 | setAccordionOpenIndex(); 17 | }} 18 | > 19 |
20 | {title} 21 |
22 |
23 | {isAccordionOpen ? "↑" : "↓"} 24 |
25 |
26 | {isAccordionOpen && ( 27 |
28 | 29 |
30 | )} 31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/AccordionList.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { AccordionItem } from "./AccordionItem"; 3 | 4 | export const AccordionList = ({ categoriesList }) => { 5 | const [accordionOpenIndex, setAccordionOpenIndex] = useState(0); 6 | 7 | return ( 8 |
9 | {categoriesList?.map((category, index) => ( 10 | 15 | accordionOpenIndex === index 16 | ? setAccordionOpenIndex(null) 17 | : setAccordionOpenIndex(index) 18 | } 19 | /> 20 | ))} 21 |
22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import { Search } from "./Search"; 3 | import { RestaurantList } from "./RestaurantList"; 4 | import { useRestaurantList } from "../hooks/useRestaurantList"; 5 | import { FilterRestaurant } from "./FilterRestaurant"; 6 | 7 | export const Body = () => { 8 | const { restaurantList } = useRestaurantList() ?? {}; 9 | const [finalRestaurantList, setFinalRestaurantList] = useState([]); 10 | 11 | useEffect(() => { 12 | setFinalRestaurantList(restaurantList); 13 | }, [restaurantList]); 14 | 15 | const getFilteredRestaurants = (filteredRestauratns = restaurantList) => { 16 | setFinalRestaurantList(filteredRestauratns); 17 | }; 18 | 19 | return ( 20 |
21 | 25 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/Button.js: -------------------------------------------------------------------------------- 1 | export const Button = ({ label }) => { 2 | return ( 3 | 6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/Contact.js: -------------------------------------------------------------------------------- 1 | export const Contact = () => { 2 | return ( 3 |
4 |

Contact Page

5 |
6 | ); 7 | }; 8 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/DishIndicator.js: -------------------------------------------------------------------------------- 1 | export const DishIndicator = ({ dishType }) => { 2 | return ( 3 |
8 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | return ( 5 |
6 | {menuList?.map((menuItem) => ( 7 | 8 | ))} 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

12 | 404 13 |

14 |

15 | Page not found 16 |

17 | 21 | Go Back Home 22 | 23 |
24 |
25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { RestaurantInfo } from "./RestaurantInfo"; 3 | import { MenuList } from "./MenuList"; 4 | import { useRestaurantMenu } from "../hooks/useRestaurantMenu"; 5 | import { AccordionList } from "./AccordionList"; 6 | import { ITEM_CATEGORY_TEXT } from "../utils/constants"; 7 | import { useEffect, useState } from "react"; 8 | 9 | export const RestaurantDetails = () => { 10 | const { resId } = useParams(); 11 | const { restaurant, menu } = useRestaurantMenu(resId); 12 | const [categoriesList, setCategoriesList] = useState([]); 13 | 14 | const getCategoryList = () => { 15 | const categoryList = menu?.groupedCard?.cardGroupMap?.REGULAR?.cards.filter( 16 | (item) => { 17 | return item?.card?.card?.["@type"] === ITEM_CATEGORY_TEXT; 18 | } 19 | ); 20 | setCategoriesList(categoryList); 21 | }; 22 | 23 | useEffect(() => { 24 | getCategoryList(); 25 | }, [menu]); 26 | 27 | return ( 28 |
29 | 30 | 31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/RestaurantInfo.js: -------------------------------------------------------------------------------- 1 | export const RestaurantInfo = ({ restaurantInfo }) => { 2 | const { 3 | card: { 4 | card: { info }, 5 | }, 6 | } = restaurantInfo ?? { card: { card: { info: {} } } }; 7 | 8 | return ( 9 |
10 |
11 |
12 |

{info?.name}

13 |
14 |
{info?.cuisines?.join(", ")}
15 |
16 | {info?.areaName}, {info?.sla?.lastMileTravelString} 17 |
18 |
19 | {info?.feeDetails?.message} 20 |
21 |
22 |
23 |
{info?.sla?.slaString}
24 |
{info?.costForTwoMessage}
25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "./shimmer/CardShimmer"; 3 | import { withOffer } from "../hoc/withOffer"; 4 | 5 | const shimmerSize = new Array(4).fill(1); 6 | 7 | const RestaurantCardWithOffers = withOffer(RestaurantCard); 8 | 9 | export const RestaurantList = ({ restaurantList }) => { 10 | return ( 11 |
12 | {restaurantList?.length 13 | ? restaurantList.map((cardData) => { 14 | return cardData?.info?.aggregatedDiscountInfoV3?.header !== "" ? ( 15 | 19 | ) : ( 20 | 21 | ); 22 | }) 23 | : shimmerSize.map((_item, index) => )} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/context/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const ThemeContext = createContext("light"); 4 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/hoc/withOffer.js: -------------------------------------------------------------------------------- 1 | export const withOffer = (RestaurantCard) => { 2 | return (props) => { 3 | return ( 4 |
5 | {props.cardData.info.aggregatedDiscountInfoV3?.header ? ( 6 |
7 | {props.cardData.info.aggregatedDiscountInfoV3?.header} {" - "} 8 | {props.cardData.info.aggregatedDiscountInfoV3?.subHeader} 9 |
10 | ) : null} 11 | 12 | 13 |
14 | ); 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | const { 11 | data: { cards }, 12 | } = swiggyData; 13 | const restaurants = 14 | cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 15 | setRestaurantList(restaurants); 16 | }; 17 | 18 | useEffect(() => { 19 | getRestaurantList(); 20 | }, []); 21 | 22 | return { restaurantList }; 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | const [restaurantDetails, setRestaurantDetails] = useState([]); 6 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 7 | 8 | const getRestaurantDetails = async () => { 9 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 10 | const { 11 | data: { cards }, 12 | } = (await restaurantDetails.json()) ?? {}; 13 | setRestaurantDetails(cards); 14 | }; 15 | 16 | useEffect(() => { 17 | getRestaurantDetails(); 18 | }, []); 19 | 20 | return { restaurant, menu }; 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | 10 | export const ITEM_CATEGORY_TEXT = 11 | "type.googleapis.com/swiggy.presentation.food.v2.ItemCategory"; 12 | -------------------------------------------------------------------------------- /Episode 11 - Data is the new oil/Episode-11 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 11 - Data is the new oil/Episode-11 Assignment.pdf -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 12 - Let's Build our store/.DS_Store -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .masthead { 8 | background-image: url("https://i.imgur.com/D4rA84W.jpg"); 9 | } 10 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "namaste-react", 3 | "version": "1.0.0", 4 | "description": "Learning React 18 with Akshay Saini", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html", 9 | "test": "jest" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tanishraj/learn-react-18.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react", 18 | "18", 19 | "namaste", 20 | "react" 21 | ], 22 | "author": "Akshay Saini", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/tanishraj/learn-react-18/issues" 26 | }, 27 | "homepage": "https://github.com/tanishraj/learn-react-18#readme", 28 | "devDependencies": { 29 | "parcel": "^2.10.3", 30 | "postcss": "^8.4.32", 31 | "process": "^0.11.10", 32 | "tailwindcss": "^3.4.0" 33 | }, 34 | "dependencies": { 35 | "@reduxjs/toolkit": "^2.0.1", 36 | "react": "^18.2.0", 37 | "react-dom": "^18.2.0", 38 | "react-redux": "^9.0.4", 39 | "react-router-dom": "^6.21.1" 40 | }, 41 | "browserlist": [ 42 | "last 2 versions" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

6 | Hi I'm 7 |

8 |

9 | Tanish! 10 |

11 |
12 |
13 | ); 14 | }; 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/AccordionItem.js: -------------------------------------------------------------------------------- 1 | import { MenuList } from "./MenuList"; 2 | 3 | export const AccordionItem = ({ 4 | categoryItem, 5 | isAccordionOpen, 6 | setAccordionOpenIndex, 7 | }) => { 8 | const title = categoryItem?.card?.card?.title ?? ""; 9 | const menuList = categoryItem?.card?.card?.itemCards ?? []; 10 | 11 | return ( 12 |
13 |
{ 16 | setAccordionOpenIndex(); 17 | }} 18 | > 19 |
20 | {title} 21 |
22 |
23 | {isAccordionOpen ? "↑" : "↓"} 24 |
25 |
26 | {isAccordionOpen && ( 27 |
28 | 29 |
30 | )} 31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/AccordionList.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { AccordionItem } from "./AccordionItem"; 3 | 4 | export const AccordionList = ({ categoriesList }) => { 5 | const [accordionOpenIndex, setAccordionOpenIndex] = useState(null); 6 | 7 | return ( 8 |
9 | {categoriesList?.map((category, index) => ( 10 | 15 | accordionOpenIndex === index 16 | ? setAccordionOpenIndex(null) 17 | : setAccordionOpenIndex(index) 18 | } 19 | /> 20 | ))} 21 |
22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import { Search } from "./Search"; 3 | import { RestaurantList } from "./RestaurantList"; 4 | import { useRestaurantList } from "../hooks/useRestaurantList"; 5 | import { FilterRestaurant } from "./FilterRestaurant"; 6 | 7 | export const Body = () => { 8 | const { restaurantList } = useRestaurantList() ?? {}; 9 | const [finalRestaurantList, setFinalRestaurantList] = useState([]); 10 | 11 | useEffect(() => { 12 | setFinalRestaurantList(restaurantList); 13 | }, [restaurantList]); 14 | 15 | const getFilteredRestaurants = (filteredRestauratns = restaurantList) => { 16 | setFinalRestaurantList(filteredRestauratns); 17 | }; 18 | 19 | return ( 20 |
21 | 25 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/Button.js: -------------------------------------------------------------------------------- 1 | export const Button = ({ label, ...restProps }) => { 2 | return ( 3 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/Cart.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import { MenuList } from "./MenuList"; 3 | 4 | export const Cart = () => { 5 | const { cart } = useSelector((state) => state.cart); 6 | 7 | return ( 8 |
9 | {cart.length === 0 ? ( 10 |
11 |

12 | You do not have anything in your cart, yet! 13 |

14 |
15 | ) : ( 16 |
17 |

18 | Items in your cart 19 |

20 | 21 |
22 | )} 23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/DishIndicator.js: -------------------------------------------------------------------------------- 1 | export const DishIndicator = ({ dishType }) => { 2 | return ( 3 |
8 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | return ( 5 |
6 | {menuList?.map((menuItem) => ( 7 | 8 | ))} 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

12 | 404 13 |

14 |

15 | Page not found 16 |

17 | 21 | Go Back Home 22 | 23 |
24 |
25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "../shimmer/CardShimmer"; 3 | import { withOffer } from "../hoc/withOffer"; 4 | 5 | const shimmerSize = new Array(4).fill(1); 6 | 7 | const RestaurantCardWithOffers = withOffer(RestaurantCard); 8 | 9 | export const RestaurantList = ({ restaurantList }) => { 10 | return ( 11 |
12 | {restaurantList?.length 13 | ? restaurantList.map((cardData) => { 14 | return cardData?.info?.aggregatedDiscountInfoV3?.header !== "" ? ( 15 | 19 | ) : ( 20 | 21 | ); 22 | }) 23 | : shimmerSize.map((_item, index) => )} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/context/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const ThemeContext = createContext("light"); 4 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/hoc/withOffer.js: -------------------------------------------------------------------------------- 1 | export const withOffer = (RestaurantCard) => { 2 | return (props) => { 3 | return ( 4 |
5 | {props.cardData.info.aggregatedDiscountInfoV3?.header ? ( 6 |
7 | {props.cardData.info.aggregatedDiscountInfoV3?.header} {" - "} 8 | {props.cardData.info.aggregatedDiscountInfoV3?.subHeader} 9 |
10 | ) : null} 11 | 12 | 13 |
14 | ); 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | const { 11 | data: { cards }, 12 | } = swiggyData; 13 | const restaurants = 14 | cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 15 | setRestaurantList(restaurants); 16 | }; 17 | 18 | useEffect(() => { 19 | getRestaurantList(); 20 | }, []); 21 | 22 | return { restaurantList }; 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | const [restaurantDetails, setRestaurantDetails] = useState([]); 6 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 7 | 8 | const getRestaurantDetails = async () => { 9 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 10 | const { 11 | data: { cards }, 12 | } = (await restaurantDetails.json()) ?? {}; 13 | setRestaurantDetails(cards); 14 | }; 15 | 16 | useEffect(() => { 17 | getRestaurantDetails(); 18 | }, []); 19 | 20 | return { restaurant, menu }; 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/redux/AppStore.js: -------------------------------------------------------------------------------- 1 | import { configureStore, combineSlices } from "@reduxjs/toolkit"; 2 | import cartReducer from "./slices/cartSlice"; 3 | 4 | export const AppStore = configureStore({ reducer: { cart: cartReducer } }); 5 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/redux/slices/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | cart: [], 5 | }; 6 | 7 | const cartSlice = createSlice({ 8 | name: "cart", 9 | initialState, 10 | reducers: { 11 | addToCart: (state, action) => { 12 | state.cart.push(action.payload); 13 | }, 14 | clearCart: (state) => { 15 | state.cart.length = 0; 16 | }, 17 | }, 18 | }); 19 | 20 | export const { addToCart, clearCart } = cartSlice.actions; 21 | export default cartSlice.reducer; 22 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Bhojan-food-delivery-app/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const RESTAURANT_LIST_API_URL = 2 | "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"; 3 | 4 | export const RESTAURANT_DETAILS_API_URL = (resId) => 5 | `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=12.9165757&lng=77.6101163&restaurantId=${resId}&catalog_qa=undefined&submitAction=ENTER`; 6 | 7 | export const IMAGE_BASE_URL = 8 | "https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_660/"; 9 | 10 | export const ITEM_CATEGORY_TEXT = 11 | "type.googleapis.com/swiggy.presentation.food.v2.ItemCategory"; 12 | -------------------------------------------------------------------------------- /Episode 12 - Let's Build our store/Episode-12 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 12 - Let's Build our store/Episode-12 Assignment.pdf -------------------------------------------------------------------------------- /Episode 13 - Time for test/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 13 - Time for test/.DS_Store -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist 5 | /coverage -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@parcel/config-default", 3 | "transformers": { 4 | "*.{js,mjs,jsx,cjs,ts,tsx}": [ 5 | "@parcel/transformer-js", 6 | "@parcel/transformer-react-refresh-wrap" 7 | ] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ["@babel/preset-env", { targets: { node: "current" } }], 4 | ["@babel/preset-react", { runtime: "automatic" }], 5 | ], 6 | }; 7 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .masthead { 8 | background-image: url("https://i.imgur.com/D4rA84W.jpg"); 9 | } 10 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | import { Provider } from "react-redux"; 4 | 5 | import { Header } from "./components/Header"; 6 | import { ThemeContext } from "./context/ThemeContext"; 7 | import { AppStore } from "./redux/AppStore"; 8 | 9 | export const App = () => { 10 | const [theme, setTheme] = useState("light"); 11 | 12 | return ( 13 | 14 | 15 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

6 | Hi I'm 7 |

8 |

9 | Tanish! 10 |

11 |
12 |
13 | ); 14 | }; 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/AccordionItem.js: -------------------------------------------------------------------------------- 1 | import { MenuList } from "./MenuList"; 2 | 3 | export const AccordionItem = ({ 4 | categoryItem, 5 | isAccordionOpen, 6 | setAccordionOpenIndex, 7 | }) => { 8 | const title = categoryItem?.card?.card?.title ?? ""; 9 | const menuList = categoryItem?.card?.card?.itemCards ?? []; 10 | 11 | return ( 12 |
16 |
{ 20 | setAccordionOpenIndex(); 21 | }} 22 | > 23 |
24 | {title} 25 |
26 |
27 | {isAccordionOpen ? "↑" : "↓"} 28 |
29 |
30 | {isAccordionOpen && ( 31 |
32 | 33 |
34 | )} 35 |
36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/AccordionList.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { AccordionItem } from "./AccordionItem"; 3 | 4 | export const AccordionList = ({ categoriesList }) => { 5 | const [accordionOpenIndex, setAccordionOpenIndex] = useState(null); 6 | 7 | return ( 8 |
9 | {categoriesList?.map((category, index) => ( 10 | 15 | accordionOpenIndex === index 16 | ? setAccordionOpenIndex(null) 17 | : setAccordionOpenIndex(index) 18 | } 19 | /> 20 | ))} 21 |
22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/Button.js: -------------------------------------------------------------------------------- 1 | export const Button = ({ label, ...restProps }) => { 2 | return ( 3 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/Cart.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import { MenuList } from "./MenuList"; 3 | 4 | export const Cart = () => { 5 | const { cart } = useSelector((state) => state.cart); 6 | 7 | return ( 8 |
9 | {cart.length === 0 ? ( 10 |
11 |

12 | You do not have anything in your cart, yet! 13 |

14 |
15 | ) : ( 16 |
17 |

18 | Items in your cart 19 |

20 | 21 |
22 | )} 23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/DishIndicator.js: -------------------------------------------------------------------------------- 1 | export const DishIndicator = ({ dishType }) => { 2 | return ( 3 |
8 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "./MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | return ( 5 |
6 | {menuList?.map((menuItem) => ( 7 | 8 | ))} 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

12 | 404 13 |

14 |

15 | Page not found 16 |

17 | 21 | Go Back Home 22 | 23 |
24 |
25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { RestaurantInfo } from "./RestaurantInfo"; 3 | import { useRestaurantMenu } from "../hooks/useRestaurantMenu"; 4 | import { AccordionList } from "./AccordionList"; 5 | import { ITEM_CATEGORY_TEXT } from "../utils/constants"; 6 | import { useEffect, useState } from "react"; 7 | 8 | export const RestaurantDetails = () => { 9 | const { resId } = useParams(); 10 | const { restaurant, menu } = useRestaurantMenu(resId); 11 | const [categoriesList, setCategoriesList] = useState([]); 12 | 13 | const getCategoryList = () => { 14 | const categoryList = menu?.groupedCard?.cardGroupMap?.REGULAR?.cards.filter( 15 | (item) => { 16 | return item?.card?.card?.["@type"] === ITEM_CATEGORY_TEXT; 17 | } 18 | ); 19 | setCategoriesList(categoryList); 20 | }; 21 | 22 | useEffect(() => { 23 | getCategoryList(); 24 | }, [menu]); 25 | 26 | return ( 27 |
28 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "../shimmer/CardShimmer"; 3 | import { withOffer } from "../hoc/withOffer"; 4 | 5 | const shimmerSize = new Array(4).fill(1); 6 | 7 | const RestaurantCardWithOffers = withOffer(RestaurantCard); 8 | 9 | export const RestaurantList = ({ restaurantList }) => { 10 | return ( 11 |
12 | {restaurantList?.length 13 | ? restaurantList.map((cardData) => { 14 | return cardData?.info?.aggregatedDiscountInfoV3?.header !== "" ? ( 15 | 19 | ) : ( 20 | 21 | ); 22 | }) 23 | : shimmerSize.map((_item, index) => )} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/SearchSuggestion.js: -------------------------------------------------------------------------------- 1 | import { useSearchSuggestion } from "../hooks/useSearchSuggestion"; 2 | import { SuggestionCard } from "./base/cards/SuggestionCard"; 3 | 4 | export const SearchSuggestion = ({ 5 | searchKeyword, 6 | suggestionCardClickHandler, 7 | }) => { 8 | const { suggestionList } = useSearchSuggestion(searchKeyword); 9 | 10 | return ( 11 |
12 | {suggestionList.map((suggestion, index) => ( 13 | 18 | ))} 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/__test__/About.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import "@testing-library/jest-dom"; 3 | import About from "../About"; 4 | 5 | describe("Testing About Component", () => { 6 | test("should render the About component", () => { 7 | render(); 8 | const title = screen.getByRole("heading"); 9 | expect(title).toBeInTheDocument(); 10 | }); 11 | 12 | test("should render the text Tanish!", () => { 13 | render(); 14 | const titleText = screen.getByText("Tanish!"); 15 | expect(titleText).toBeInTheDocument(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/__test__/AccordionItem.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import { AccordionItem } from "../AccordionItem"; 3 | import "@testing-library/jest-dom"; 4 | 5 | describe("Testing Accordion Item", () => { 6 | test("should not render the menu details and menu list", () => { 7 | render(); 8 | const menuList = screen.queryAllByTestId("menuItem"); 9 | expect(menuList.length).toBe(0); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/__test__/AccordionList.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import { AccordionList } from "../AccordionList"; 3 | import MOCK_CATEGORIES_LIST from "../../mock-data/MockCategoriesList.json"; 4 | import "@testing-library/jest-dom"; 5 | 6 | describe("Testing Accordion List", () => { 7 | test("should render the component", () => { 8 | render(); 9 | const accordionItem = screen.getAllByTestId("accordionItem"); 10 | expect(accordionItem.length).toBe(5); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/__test__/FilterRestaurant.spec.js: -------------------------------------------------------------------------------- 1 | import { fireEvent, render, screen } from "@testing-library/react"; 2 | import { FilterRestaurant } from "../FilterRestaurant"; 3 | import MOCK_RESTAURANT_LIST from "../../mock-data/MockRestaurantList.json"; 4 | import "@testing-library/jest-dom"; 5 | 6 | describe("Testing Filter Restaurant Component", () => { 7 | test("should render the component properly", () => { 8 | render( 9 | 13 | ); 14 | expect(screen.getByText("Top Rated Restaurants")).toBeInTheDocument(); 15 | }); 16 | 17 | test("should render the component properly", () => { 18 | const { container } = render( 19 | 23 | ); 24 | const filterButton = screen.getByTestId("topRatedRestaurantButton"); 25 | fireEvent.click(filterButton); 26 | const elements = container.getElementsByClassName("bg-primary text-white"); 27 | expect(elements.length).toBe(1); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/atoms/BasicContent.js: -------------------------------------------------------------------------------- 1 | export const BasicContent = ({ propsData, isDivider = true }) => { 2 | const { title } = propsData; 3 | return ( 4 |
5 | {isDivider &&
} 6 |

{title}

7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/atoms/BrandItem.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export const BrandItem = ({ brandItem, ...restProps }) => { 4 | const { text, _link } = brandItem; 5 | return ( 6 | 10 | {text} 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/base/cards/MiniCard.js: -------------------------------------------------------------------------------- 1 | export const MiniCard = ({ 2 | imagePath, 3 | imageAltText, 4 | key, 5 | imageContainerClasses, 6 | ...restProps 7 | }) => { 8 | return ( 9 |
10 | {imageAltText} 11 |
12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/base/cards/SuggestionCard.js: -------------------------------------------------------------------------------- 1 | import { IMAGE_BASE_URL } from "../../../utils/constants"; 2 | 3 | export const SuggestionCard = ({ 4 | info, 5 | suggestionCardClickHandler, 6 | ...restProps 7 | }) => { 8 | return ( 9 |
{ 12 | suggestionCardClickHandler(info?.text); 13 | }} 14 | {...restProps} 15 | > 16 | {info?.text} 21 |
22 |
{info?.text}
23 |
24 | {info?.type?.toLowerCase()} 25 |
26 |
27 |
28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/molecules/AppInstallLinks.js: -------------------------------------------------------------------------------- 1 | import { IMAGE_BASE_URL } from "../../utils/constants"; 2 | 3 | export const AppInstallLinks = ({ propsData }) => { 4 | return ( 5 |
6 |

{propsData?.title}

7 |
8 | 12 | 16 | 17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/molecules/FavouriteRestaurantInfoWithStyle.js: -------------------------------------------------------------------------------- 1 | import { RestaurantList } from "./RestaurantList"; 2 | 3 | export const FavouriteRestaurantInfoWithStyle = ({ propsData }) => { 4 | const layoutData = propsData?.layout; 5 | const restaurantList = propsData?.gridElements?.infoWithStyle?.restaurants; 6 | return ( 7 |
8 | 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/molecules/ImageInfoLayoutCard.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { IMAGE_BASE_URL } from "../../utils/constants"; 3 | 4 | export const ImageInfoLayoutCard = ({ propsData }) => { 5 | const { id, gridElements } = propsData; 6 | const cards = gridElements?.infoWithStyle?.info; 7 | const isBanner = id === "topical_banner"; 8 | 9 | return ( 10 |
11 | {cards?.map((card) => ( 12 | 17 | {card?.accessibility?.altText} 22 | 23 | ))} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/molecules/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantItem } from "../atoms/RestaurantItem"; 2 | 3 | export const RestaurantList = ({ layoutData, restaurantList }) => { 4 | return ( 5 |
10 | {restaurantList?.map((restaurant, index) => ( 11 |
12 | 13 |
14 | ))} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/pages/Collections.js: -------------------------------------------------------------------------------- 1 | import { useCollectionsApi } from "../../hooks/useCollectionsApi"; 2 | import { BasicContent } from "../atoms/BasicContent"; 3 | import { ComponentMapper } from "../templates/ComponentMapper"; 4 | 5 | export const Collections = () => { 6 | const { collectionPageData } = useCollectionsApi(); 7 | 8 | if (collectionPageData.length === 0) return; 9 | 10 | return ( 11 |
12 | 16 | 17 |
18 | {collectionPageData?.map((section, index) => ( 19 | 20 | ))} 21 |
22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/pages/Home.js: -------------------------------------------------------------------------------- 1 | import { useHomeApi } from "../../hooks/useHomeApi"; 2 | import { ComponentMapper } from "../templates/ComponentMapper"; 3 | 4 | export const Home = () => { 5 | const { homePageData } = useHomeApi(); 6 | 7 | return ( 8 |
9 | {homePageData?.map((section, index) => ( 10 |
11 | 12 |
13 | ))} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/templates/ComponentMapper.js: -------------------------------------------------------------------------------- 1 | import { COMPONENT_HASH } from "../../utils/componentHash"; 2 | 3 | export const ComponentMapper = ({ propsData }) => { 4 | const SectionComponent = COMPONENT_HASH[propsData?.["@type"]]; 5 | 6 | if (!SectionComponent) return; 7 | 8 | return ; 9 | }; 10 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/components/templates/GridWidget.js: -------------------------------------------------------------------------------- 1 | import { COMPONENT_HASH, HEADER_HASH } from "../../utils/componentHash"; 2 | import { ImageInfoLayoutCard } from "../molecules/ImageInfoLayoutCard"; 3 | 4 | export const GridWidget = ({ propsData }) => { 5 | const { header, id, gridElements } = propsData; 6 | const ChildComponent = 7 | COMPONENT_HASH?.[gridElements?.infoWithStyle?.["@type"]]; 8 | 9 | return ( 10 |
11 | {(header?.title || HEADER_HASH[id]) && ( 12 |

13 | {header?.title ? header?.title : HEADER_HASH[id]} 14 |

15 | )} 16 | 17 |
18 | 19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/context/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const ThemeContext = createContext("light"); 4 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hoc/withOffer.js: -------------------------------------------------------------------------------- 1 | export const withOffer = (RestaurantCard) => { 2 | return (props) => { 3 | return ( 4 |
5 | {props.cardData.info.aggregatedDiscountInfoV3?.header ? ( 6 |
7 | {props.cardData.info.aggregatedDiscountInfoV3?.header} {" - "} 8 | {props.cardData.info.aggregatedDiscountInfoV3?.subHeader} 9 |
10 | ) : null} 11 | 12 | 13 |
14 | ); 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useCollectionsApi.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { 4 | COLLECTION_PAGE_API, 5 | COLLECTION_PAGE_API_FRACTION, 6 | } from "../utils/constants"; 7 | 8 | export const useCollectionsApi = () => { 9 | const { collectionId } = useParams(); 10 | const [collectionPageData, setCollectionPageData] = useState([]); 11 | 12 | const getCollectionPageData = async () => { 13 | const data = await fetch( 14 | `${COLLECTION_PAGE_API}${collectionId}${COLLECTION_PAGE_API_FRACTION}` 15 | ); 16 | const response = await data.json(); 17 | console.log(response); 18 | 19 | setCollectionPageData(response?.data?.cards); 20 | }; 21 | 22 | useEffect(() => { 23 | getCollectionPageData(); 24 | }, [collectionId]); 25 | 26 | return { collectionPageData }; 27 | }; 28 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useHomeApi.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useHomeApi = () => { 5 | const [homePageData, setHomePageData] = useState([]); 6 | 7 | const getHomePageData = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | 11 | const { 12 | data: { cards }, 13 | } = swiggyData; 14 | setHomePageData(cards); 15 | }; 16 | 17 | useEffect(() => { 18 | getHomePageData(); 19 | }, []); 20 | 21 | return { homePageData }; 22 | }; 23 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/usePopularCuisine.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { POPULAR_CUISINE_API } from "../utils/constants"; 3 | 4 | export const usePopularCuisine = () => { 5 | const [popularCuisine, setPopularCuisine] = useState([]); 6 | 7 | const fetchPopularCuisine = async () => { 8 | data = await fetch(POPULAR_CUISINE_API); 9 | response = await data.json(); 10 | const cuisines = 11 | response?.data?.cards?.[1]?.card?.card?.gridElements?.infoWithStyle?.info; 12 | setPopularCuisine(cuisines); 13 | }; 14 | 15 | useEffect(() => { 16 | fetchPopularCuisine(); 17 | }, []); 18 | 19 | return { popularCuisine }; 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL); 9 | const swiggyData = await apiResponse.json(); 10 | 11 | const { 12 | data: { cards }, 13 | } = swiggyData; 14 | 15 | const bestoffers = cards[0]?.card?.card?.gridElements?.infoWithStyle?.info; 16 | const restaurants = 17 | cards[2]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 18 | 19 | setRestaurantList({ restaurants, bestoffers, cards }); 20 | }; 21 | 22 | useEffect(() => { 23 | getRestaurantList(); 24 | }, []); 25 | 26 | return { restaurantList }; 27 | }; 28 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | const [restaurantDetails, setRestaurantDetails] = useState([]); 6 | const [restaurant, _offers, menu] = restaurantDetails ?? []; 7 | 8 | const getRestaurantDetails = async () => { 9 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId)); 10 | const { 11 | data: { cards }, 12 | } = (await restaurantDetails.json()) ?? {}; 13 | setRestaurantDetails(cards); 14 | }; 15 | 16 | useEffect(() => { 17 | getRestaurantDetails(); 18 | }, []); 19 | 20 | return { restaurant, menu }; 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/hooks/useSearchSuggestion.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { SEARCH_SUGGESTION_API } from "../utils/constants"; 3 | 4 | export const useSearchSuggestion = (searchKeyword) => { 5 | const [suggestionList, setSuggestionList] = useState([]); 6 | 7 | const fetchSearchSuggestion = async () => { 8 | const data = await fetch( 9 | `${SEARCH_SUGGESTION_API}&str=${searchKeyword}&trackingId=null` 10 | ); 11 | const response = await data.json(); 12 | const suggestions = response?.data?.suggestions ?? []; 13 | setSuggestionList(suggestions); 14 | }; 15 | 16 | useEffect(() => { 17 | fetchSearchSuggestion(); 18 | }, [searchKeyword]); 19 | 20 | return { suggestionList }; 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import { RouterProvider } from "react-router-dom"; 3 | import { AppRouter } from "./router/AppRouter"; 4 | 5 | const rootElement = document.getElementById("root"); 6 | const root = ReactDOM.createRoot(rootElement); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/mock-data/HeaderMock.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 13 - Time for test/Bhojan-food-delivery-app/src/mock-data/HeaderMock.json -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/redux/AppStore.js: -------------------------------------------------------------------------------- 1 | import { configureStore, combineSlices } from "@reduxjs/toolkit"; 2 | import cartReducer from "./slices/cartSlice"; 3 | 4 | export const AppStore = configureStore({ reducer: { cart: cartReducer } }); 5 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/redux/slices/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | cart: [], 5 | }; 6 | 7 | const cartSlice = createSlice({ 8 | name: "cart", 9 | initialState, 10 | reducers: { 11 | addToCart: (state, action) => { 12 | state.cart.push(action.payload); 13 | }, 14 | clearCart: (state) => { 15 | state.cart.length = 0; 16 | }, 17 | }, 18 | }); 19 | 20 | export const { addToCart, clearCart } = cartSlice.actions; 21 | export default cartSlice.reducer; 22 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/test-demo/__test__/sum.spec.js: -------------------------------------------------------------------------------- 1 | import { sum } from "../sum"; 2 | 3 | describe("Testing Function Sum", () => { 4 | test("should return 3 if (1,2) is provided as input", () => { 5 | const result = sum(1, 2); 6 | expect(result).toBe(3); 7 | }); 8 | 9 | test("should return 5 if (3,-2) is provided as input", () => { 10 | const result = sum(3, -2); 11 | expect(result).toBe(1); 12 | }); 13 | 14 | test("should return 1 if ('3',-2) is provided as input", () => { 15 | const result = sum("3", -2); 16 | expect(result).toBe(1); 17 | }); 18 | 19 | test("should return 5 if (3,-2) is provided as input", () => { 20 | const result = sum("3", "-2"); 21 | expect(result).toBe(undefined); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/test-demo/sum.js: -------------------------------------------------------------------------------- 1 | export const sum = (a, b) => { 2 | if (typeof a !== "number" && typeof b !== "number") return; 3 | return Number(a) + Number(b); 4 | }; 5 | -------------------------------------------------------------------------------- /Episode 13 - Time for test/Bhojan-food-delivery-app/src/utils/iconMapper.js: -------------------------------------------------------------------------------- 1 | import { IoCartOutline } from "react-icons/io5"; 2 | import { RiUser6Fill } from "react-icons/ri"; 3 | import { IoHelpBuoy } from "react-icons/io5"; 4 | import { BiSolidOffer } from "react-icons/bi"; 5 | import { IoSearch } from "react-icons/io5"; 6 | 7 | export const ICON_MAPPER = { 8 | search: , 9 | offers: , 10 | help: , 11 | signin: , 12 | cart: , 13 | }; 14 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 14 - Final Food App/.DS_Store -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/.env: -------------------------------------------------------------------------------- 1 | X_CORS_API_KEY = temp_907965272042a5006e2ff57757f88d22 -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /.parcel-cache 4 | /dist 5 | /coverage -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@parcel/config-default", 3 | "transformers": { 4 | "*.{js,mjs,jsx,cjs,ts,tsx}": [ 5 | "@parcel/transformer-js", 6 | "@parcel/transformer-react-refresh-wrap" 7 | ] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ["@babel/preset-env", { targets: { node: "current" } }], 4 | ["@babel/preset-react", { runtime: "automatic" }], 5 | ], 6 | }; 7 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | import { Provider } from "react-redux"; 4 | 5 | import { Header } from "./components/molecules/Header"; 6 | import { ThemeContext } from "./context/ThemeContext"; 7 | import { AppStore } from "./redux/AppStore"; 8 | 9 | export const App = () => { 10 | const [theme, setTheme] = useState("light"); 11 | 12 | return ( 13 | 14 | 15 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/Restaurant.js: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { RestaurantInfo } from "./RestaurantInfo"; 3 | import { useRestaurantMenu } from "../hooks/useRestaurantMenu"; 4 | import { AccordionList } from "./molecules/AccordionList"; 5 | import { ITEM_CATEGORY_TEXT } from "../utils/constants"; 6 | import { useEffect, useState } from "react"; 7 | 8 | export const RestaurantDetails = () => { 9 | const { resId } = useParams(); 10 | const { restaurant, menu } = useRestaurantMenu(resId); 11 | const [categoriesList, setCategoriesList] = useState([]); 12 | 13 | const getCategoryList = () => { 14 | const categoryList = menu?.groupedCard?.cardGroupMap?.REGULAR?.cards.filter( 15 | (item) => { 16 | return item?.card?.card?.["@type"] === ITEM_CATEGORY_TEXT; 17 | } 18 | ); 19 | setCategoriesList(categoryList); 20 | }; 21 | 22 | useEffect(() => { 23 | getCategoryList(); 24 | }, [menu]); 25 | 26 | return ( 27 |
28 | 29 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantCard } from "./RestaurantCard"; 2 | import { CardShimmer } from "../shimmer/CardShimmer"; 3 | import { withOffer } from "../hoc/withOffer"; 4 | 5 | const shimmerSize = new Array(4).fill(1); 6 | 7 | const RestaurantCardWithOffers = withOffer(RestaurantCard); 8 | 9 | export const RestaurantList = ({ restaurantList }) => { 10 | return ( 11 |
12 | {restaurantList?.length 13 | ? restaurantList.map((cardData) => { 14 | return cardData?.info?.aggregatedDiscountInfoV3?.header !== "" ? ( 15 | 19 | ) : ( 20 | 21 | ); 22 | }) 23 | : shimmerSize.map((_item, index) => )} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/__test__/About.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import "@testing-library/jest-dom"; 3 | import About from "../About"; 4 | 5 | describe("Testing About Component", () => { 6 | test("should render the About component", () => { 7 | render(); 8 | const title = screen.getByRole("heading"); 9 | expect(title).toBeInTheDocument(); 10 | }); 11 | 12 | test("should render the text Tanish!", () => { 13 | render(); 14 | const titleText = screen.getByText("Tanish!"); 15 | expect(titleText).toBeInTheDocument(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/__test__/AccordionItem.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import { AccordionItem } from "../AccordionItem"; 3 | import "@testing-library/jest-dom"; 4 | 5 | describe("Testing Accordion Item", () => { 6 | test("should not render the menu details and menu list", () => { 7 | render(); 8 | const menuList = screen.queryAllByTestId("menuItem"); 9 | expect(menuList.length).toBe(0); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/__test__/AccordionList.spec.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import { AccordionList } from "../AccordionList"; 3 | import MOCK_CATEGORIES_LIST from "../../mock-data/MockCategoriesList.json"; 4 | import "@testing-library/jest-dom"; 5 | 6 | describe("Testing Accordion List", () => { 7 | test("should render the component", () => { 8 | render(); 9 | const accordionItem = screen.getAllByTestId("accordionItem"); 10 | expect(accordionItem.length).toBe(5); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/__test__/FilterRestaurant.spec.js: -------------------------------------------------------------------------------- 1 | import { fireEvent, render, screen } from "@testing-library/react"; 2 | import { FilterRestaurant } from "../FilterRestaurant"; 3 | import MOCK_RESTAURANT_LIST from "../../mock-data/MockRestaurantList.json"; 4 | import "@testing-library/jest-dom"; 5 | 6 | describe("Testing Filter Restaurant Component", () => { 7 | test("should render the component properly", () => { 8 | render( 9 | 13 | ); 14 | expect(screen.getByText("Top Rated Restaurants")).toBeInTheDocument(); 15 | }); 16 | 17 | test("should render the component properly", () => { 18 | const { container } = render( 19 | 23 | ); 24 | const filterButton = screen.getByTestId("topRatedRestaurantButton"); 25 | fireEvent.click(filterButton); 26 | const elements = container.getElementsByClassName("bg-primary text-white"); 27 | expect(elements.length).toBe(1); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/AccordionItem.js: -------------------------------------------------------------------------------- 1 | import { MenuList } from "../molecules/MenuList"; 2 | 3 | export const AccordionItem = ({ 4 | categoryItem, 5 | isAccordionOpen, 6 | setAccordionOpenIndex, 7 | }) => { 8 | const title = categoryItem?.card?.card?.title ?? ""; 9 | const menuList = categoryItem?.card?.card?.itemCards ?? []; 10 | 11 | return ( 12 |
16 |
{ 20 | setAccordionOpenIndex(); 21 | }} 22 | > 23 |
24 | {title} 25 |
26 |
27 | {isAccordionOpen ? "↑" : "↓"} 28 |
29 |
30 | {isAccordionOpen && ( 31 |
32 | 33 |
34 | )} 35 |
36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/BasicContent.js: -------------------------------------------------------------------------------- 1 | export const BasicContent = ({ propsData, isDivider = true }) => { 2 | const { title } = propsData; 3 | return ( 4 |
5 | {isDivider &&
} 6 |

{title}

7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/BrandItem.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export const BrandItem = ({ brandItem, ...restProps }) => { 4 | const { text, _link } = brandItem; 5 | return ( 6 | 10 | {text} 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/Button.js: -------------------------------------------------------------------------------- 1 | export const Button = ({ label, ...restProps }) => { 2 | return ( 3 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/DishIndicator.js: -------------------------------------------------------------------------------- 1 | export const DishIndicator = ({ dishType }) => { 2 | return ( 3 |
8 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/Input.js: -------------------------------------------------------------------------------- 1 | import { forwardRef } from "react"; 2 | import { MdClose } from "react-icons/md"; 3 | import { TbChevronLeft } from "react-icons/tb"; 4 | 5 | export const Input = (props) => { 6 | const { 7 | showClearButton, 8 | onEnter, 9 | showBackButton, 10 | onClear, 11 | value, 12 | ...restProps 13 | } = props; 14 | return ( 15 |
16 | {showBackButton && ( 17 | 20 | )} 21 | 26 | keyEvent.code === "Enter" && onEnter && onEnter() 27 | } 28 | value={value} 29 | {...restProps} 30 | /> 31 | {showClearButton && ( 32 | 35 | )} 36 |
37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/MapButton.js: -------------------------------------------------------------------------------- 1 | import { FaMapMarkerAlt } from "react-icons/fa"; 2 | import { useSelector } from "react-redux"; 3 | import { useToggle } from "../../hooks/useToggle"; 4 | import { SidebarContainer } from "../molecules/SidebarContainer"; 5 | export const MapButton = () => { 6 | const { show, toggle } = useToggle(); 7 | const { location } = useSelector((state) => state.location); 8 | 9 | return ( 10 |
11 | 21 | {show && } 22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/MiniCard.js: -------------------------------------------------------------------------------- 1 | export const MiniCard = ({ 2 | imagePath, 3 | imageAltText, 4 | key, 5 | imageContainerClasses, 6 | ...restProps 7 | }) => { 8 | return ( 9 |
10 | {imageAltText} 11 |
12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/OnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useOnlineStatus } from "../../hooks/useOnlineStatus"; 2 | 3 | export const OnlineStatus = () => { 4 | const { onlineStatus } = useOnlineStatus(); 5 | return ( 6 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/atoms/SuggestionCard.js: -------------------------------------------------------------------------------- 1 | import { IMAGE_BASE_URL } from "../../utils/constants"; 2 | 3 | export const SuggestionCard = ({ 4 | info, 5 | suggestionCardClickHandler, 6 | ...restProps 7 | }) => { 8 | return ( 9 |
{ 12 | suggestionCardClickHandler(info?.text); 13 | }} 14 | {...restProps} 15 | > 16 | {info?.text} 21 |
22 |
{info?.text}
23 |
24 | {info?.type?.toLowerCase()} 25 |
26 |
27 |
28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/AccordionList.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { AccordionItem } from "../atoms/AccordionItem"; 3 | 4 | export const AccordionList = ({ categoriesList }) => { 5 | const [accordionOpenIndex, setAccordionOpenIndex] = useState(null); 6 | 7 | return ( 8 |
9 | {categoriesList?.map((category, index) => ( 10 | 15 | accordionOpenIndex === index 16 | ? setAccordionOpenIndex(null) 17 | : setAccordionOpenIndex(index) 18 | } 19 | /> 20 | ))} 21 |
22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/AppInstallLinks.js: -------------------------------------------------------------------------------- 1 | import { IMAGE_BASE_URL } from "../../utils/constants"; 2 | 3 | export const AppInstallLinks = ({ propsData }) => { 4 | return ( 5 |
6 |

{propsData?.title}

7 |
8 | 12 | 16 | 17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/FavouriteRestaurantInfoWithStyle.js: -------------------------------------------------------------------------------- 1 | import { RestaurantList } from "./RestaurantList"; 2 | 3 | export const FavouriteRestaurantInfoWithStyle = ({ propsData }) => { 4 | const layoutData = propsData?.layout; 5 | const restaurantList = propsData?.gridElements?.infoWithStyle?.restaurants; 6 | return ( 7 |
8 | 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/ImageInfoLayoutCard.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { IMAGE_BASE_URL } from "../../utils/constants"; 3 | 4 | export const ImageInfoLayoutCard = ({ propsData }) => { 5 | const { id, gridElements } = propsData; 6 | const cards = gridElements?.infoWithStyle?.info; 7 | const isBanner = id === "topical_banner"; 8 | 9 | return ( 10 |
11 | {cards?.map((card) => ( 12 | 17 | {card?.accessibility?.altText} 22 | 23 | ))} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/MenuList.js: -------------------------------------------------------------------------------- 1 | import { MenuItem } from "../atoms/MenuItem"; 2 | 3 | export const MenuList = ({ menuList }) => { 4 | return ( 5 |
6 | {menuList?.map((menuItem) => ( 7 | 8 | ))} 9 |
10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/RestaurantList.js: -------------------------------------------------------------------------------- 1 | import { RestaurantItem } from "../atoms/RestaurantItem"; 2 | 3 | export const RestaurantList = ({ layoutData, restaurantList }) => { 4 | return ( 5 |
10 | {restaurantList?.map((restaurant, index) => ( 11 |
12 | 13 |
14 | ))} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/molecules/SearchSuggestion.js: -------------------------------------------------------------------------------- 1 | import { useSearchSuggestion } from "../../hooks/useSearchSuggestion"; 2 | import { SuggestionCard } from "../atoms/SuggestionCard"; 3 | 4 | export const SearchSuggestion = ({ 5 | searchKeyword, 6 | suggestionCardClickHandler, 7 | }) => { 8 | const { suggestionList } = useSearchSuggestion(searchKeyword); 9 | 10 | return ( 11 |
12 | {suggestionList.map((suggestion, index) => ( 13 | 18 | ))} 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/pages/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |
5 |

6 | Hi I'm 7 |

8 |

9 | Tanish! 10 |

11 |
12 |
13 | ); 14 | }; 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/pages/Cart.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import { MenuList } from "../molecules/MenuList"; 3 | 4 | export const Cart = () => { 5 | const { cart } = useSelector((state) => state.cart); 6 | 7 | return ( 8 |
9 | {cart.length === 0 ? ( 10 |
11 |

12 | You do not have anything in your cart, yet! 13 |

14 |
15 | ) : ( 16 |
17 |

18 | Items in your cart 19 |

20 | 21 |
22 | )} 23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/pages/Collections.js: -------------------------------------------------------------------------------- 1 | import { useCollectionsApi } from "../../hooks/useCollectionsApi"; 2 | import { BasicContent } from "../atoms/BasicContent"; 3 | import { ComponentMapper } from "../templates/ComponentMapper"; 4 | 5 | export const Collections = () => { 6 | const { collectionPageData } = useCollectionsApi(); 7 | 8 | if (collectionPageData.length === 0) return; 9 | 10 | return ( 11 |
12 | 16 | 17 |
18 | {collectionPageData?.map((section, index) => ( 19 | 20 | ))} 21 |
22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/pages/Home.js: -------------------------------------------------------------------------------- 1 | import { useHomeApi } from "../../hooks/useHomeApi"; 2 | import { ComponentMapper } from "../templates/ComponentMapper"; 3 | 4 | export const Home = () => { 5 | const { homePageData } = useHomeApi(); 6 | 7 | return ( 8 |
9 | {homePageData?.map((section, index) => ( 10 |
11 | 12 |
13 | ))} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/pages/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export const PageNotFound = () => { 4 | const err = useRouteError(); 5 | console.log("Error Hook", err); 6 | return ( 7 |
8 |
9 |
10 |
11 |

12 | 404 13 |

14 |

15 | Page not found 16 |

17 | 21 | Go Back Home 22 | 23 |
24 |
25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/templates/ComponentMapper.js: -------------------------------------------------------------------------------- 1 | import { COMPONENT_HASH } from "../../utils/componentHash"; 2 | 3 | export const ComponentMapper = ({ propsData }) => { 4 | const SectionComponent = COMPONENT_HASH[propsData?.["@type"]]; 5 | 6 | if (!SectionComponent) return; 7 | 8 | return ; 9 | }; 10 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/components/templates/GridWidget.js: -------------------------------------------------------------------------------- 1 | import { COMPONENT_HASH, HEADER_HASH } from "../../utils/componentHash"; 2 | import { ImageInfoLayoutCard } from "../molecules/ImageInfoLayoutCard"; 3 | 4 | export const GridWidget = ({ propsData }) => { 5 | const { header, id, gridElements } = propsData; 6 | const ChildComponent = 7 | COMPONENT_HASH?.[gridElements?.infoWithStyle?.["@type"]]; 8 | 9 | return ( 10 |
11 | {(header?.title || HEADER_HASH[id]) && ( 12 |

13 | {header?.title ? header?.title : HEADER_HASH[id]} 14 |

15 | )} 16 | 17 |
18 | 19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/context/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const ThemeContext = createContext("light"); 4 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hoc/withOffer.js: -------------------------------------------------------------------------------- 1 | export const withOffer = (RestaurantCard) => { 2 | return (props) => { 3 | return ( 4 |
5 | {props.cardData.info.aggregatedDiscountInfoV3?.header ? ( 6 |
7 | {props.cardData.info.aggregatedDiscountInfoV3?.header} {" - "} 8 | {props.cardData.info.aggregatedDiscountInfoV3?.subHeader} 9 |
10 | ) : null} 11 | 12 | 13 |
14 | ); 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useCollectionsApi.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { 4 | COLLECTION_PAGE_API, 5 | COLLECTION_PAGE_API_FRACTION, 6 | } from "../utils/constants"; 7 | 8 | export const useCollectionsApi = () => { 9 | const { collectionId } = useParams(); 10 | const [collectionPageData, setCollectionPageData] = useState([]); 11 | 12 | const getCollectionPageData = async () => { 13 | const data = await fetch( 14 | `${COLLECTION_PAGE_API}${collectionId}${COLLECTION_PAGE_API_FRACTION}`, 15 | { 16 | headers: { 17 | "x-cors-api-key": process.env.X_CORS_API_KEY, 18 | }, 19 | } 20 | ); 21 | const response = await data.json(); 22 | setCollectionPageData(response?.data?.cards); 23 | }; 24 | 25 | useEffect(() => { 26 | getCollectionPageData(); 27 | }, [collectionId]); 28 | 29 | return { collectionPageData }; 30 | }; 31 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useHomeApi.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { HOME_PAGE_API } from "../utils/constants"; 4 | 5 | export const useHomeApi = () => { 6 | const [homePageData, setHomePageData] = useState([]); 7 | const { location } = useSelector((state) => state.location); 8 | const { lat, lng } = location?.geometry?.location ?? {}; 9 | 10 | const getHomePageData = async () => { 11 | const apiResponse = await fetch(HOME_PAGE_API(lat, lng), { 12 | headers: { 13 | "x-cors-api-key": process.env.X_CORS_API_KEY, 14 | }, 15 | }); 16 | const swiggyData = await apiResponse.json(); 17 | 18 | if (!swiggyData) return null; 19 | 20 | const { 21 | data: { cards }, 22 | } = swiggyData; 23 | setHomePageData(cards); 24 | }; 25 | 26 | useEffect(() => { 27 | getHomePageData(); 28 | }, [location]); 29 | 30 | return { homePageData }; 31 | }; 32 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useNavigator.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | export const useNavigator = () => { 3 | const [currentLocation, setCurrentLocation] = useState(""); 4 | const [loading, setLoading] = useState(true); 5 | 6 | useEffect(() => { 7 | navigator.geolocation.getCurrentPosition((position) => { 8 | const { latitude, longitude } = position.coords; 9 | setCurrentLocation(() => { 10 | setLoading(false); 11 | return { lat: latitude, lng: longitude }; 12 | }); 13 | }); 14 | }, []); 15 | 16 | return { currentLocation, loading }; 17 | }; 18 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useOnlineStatus.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useOnlineStatus = () => { 4 | const [onlineStatus, setOnlineStatus] = useState(true); 5 | 6 | // Check if online 7 | useEffect(() => { 8 | window.addEventListener("online", () => { 9 | setOnlineStatus(true); 10 | }); 11 | window.addEventListener("offline", () => { 12 | setOnlineStatus(false); 13 | }); 14 | }, []); 15 | 16 | // return final response 17 | return { onlineStatus }; 18 | }; 19 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/usePopularCuisine.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { POPULAR_CUISINE_API } from "../utils/constants"; 3 | 4 | export const usePopularCuisine = () => { 5 | const [popularCuisine, setPopularCuisine] = useState([]); 6 | 7 | const fetchPopularCuisine = async () => { 8 | const popularCuisineData = await fetch(POPULAR_CUISINE_API, { 9 | headers: { 10 | "x-cors-api-key": process.env.X_CORS_API_KEY, 11 | }, 12 | }); 13 | const cuisineResponse = await popularCuisineData.json(); 14 | const cuisines = 15 | cuisineResponse?.data?.cards?.[1]?.card?.card?.gridElements?.infoWithStyle 16 | ?.info; 17 | setPopularCuisine(cuisines); 18 | }; 19 | 20 | useEffect(() => { 21 | fetchPopularCuisine(); 22 | }, []); 23 | 24 | return { popularCuisine }; 25 | }; 26 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useRestaurantList.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RESTAURANT_LIST_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantList = () => { 5 | const [restaurantList, setRestaurantList] = useState([]); 6 | 7 | const getRestaurantList = async () => { 8 | const apiResponse = await fetch(RESTAURANT_LIST_API_URL, { 9 | headers: { 10 | "x-cors-api-key": process.env.X_CORS_API_KEY, 11 | }, 12 | }); 13 | const swiggyData = await apiResponse.json(); 14 | 15 | const { 16 | data: { cards }, 17 | } = swiggyData; 18 | 19 | const bestoffers = cards[0]?.card?.card?.gridElements?.infoWithStyle?.info; 20 | const restaurants = 21 | cards[2]?.card?.card?.gridElements?.infoWithStyle?.restaurants; 22 | 23 | setRestaurantList({ restaurants, bestoffers, cards }); 24 | }; 25 | 26 | useEffect(() => { 27 | getRestaurantList(); 28 | }, []); 29 | 30 | return { restaurantList }; 31 | }; 32 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useRestaurantMenu.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { RESTAURANT_DETAILS_API_URL } from "../utils/constants"; 3 | 4 | export const useRestaurantMenu = (resId) => { 5 | const [restaurantDetails, setRestaurantDetails] = useState([]); 6 | const [_empty, _empty2, restaurant, _offers, menu] = restaurantDetails ?? []; 7 | 8 | const getRestaurantDetails = async () => { 9 | const restaurantDetails = await fetch(RESTAURANT_DETAILS_API_URL(resId), { 10 | headers: { 11 | "x-cors-api-key": process.env.X_CORS_API_KEY 12 | } 13 | }); 14 | const { 15 | data: { cards } 16 | } = (await restaurantDetails.json()) ?? {}; 17 | setRestaurantDetails(cards); 18 | }; 19 | 20 | useEffect(() => { 21 | getRestaurantDetails(); 22 | }, []); 23 | 24 | return { restaurant, menu }; 25 | }; 26 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useSearchSuggestion.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { SEARCH_SUGGESTION_API } from "../utils/constants"; 3 | 4 | export const useSearchSuggestion = (searchKeyword) => { 5 | const [suggestionList, setSuggestionList] = useState([]); 6 | 7 | const fetchSearchSuggestion = async () => { 8 | const data = await fetch( 9 | `${SEARCH_SUGGESTION_API}&str=${searchKeyword}&trackingId=null`, 10 | { 11 | headers: { 12 | "x-cors-api-key": process.env.X_CORS_API_KEY, 13 | }, 14 | } 15 | ); 16 | const response = await data.json(); 17 | const suggestions = response?.data?.suggestions ?? []; 18 | setSuggestionList(suggestions); 19 | }; 20 | 21 | useEffect(() => { 22 | fetchSearchSuggestion(); 23 | }, [searchKeyword]); 24 | 25 | return { suggestionList }; 26 | }; 27 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/hooks/useToggle.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | export const useToggle = () => { 3 | const [show, setShow] = useState(false); 4 | const toggle = () => { 5 | setShow(!show); 6 | }; 7 | return { show, toggle }; 8 | }; 9 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | .masthead { 8 | background-image: url("https://i.imgur.com/D4rA84W.jpg"); 9 | } 10 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste Javascript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import { RouterProvider } from "react-router-dom"; 3 | import { AppRouter } from "./router/AppRouter"; 4 | 5 | const rootElement = document.getElementById("root"); 6 | const root = ReactDOM.createRoot(rootElement); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/mock-data/HeaderMock.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishraj/learn_react_advanced/c74a642bb2544a782d88b1f5ba8d74b75c50d074/Episode 14 - Final Food App/Bhojan-food-delivery-app/src/mock-data/HeaderMock.json -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/redux/AppStore.js: -------------------------------------------------------------------------------- 1 | import { configureStore, combineSlices } from "@reduxjs/toolkit"; 2 | import cartReducer from "./slices/cartSlice"; 3 | import locationReducer from "./slices/locationSlice"; 4 | 5 | export const AppStore = configureStore({ 6 | reducer: { cart: cartReducer, location: locationReducer }, 7 | }); 8 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/redux/slices/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | cart: [], 5 | }; 6 | 7 | const cartSlice = createSlice({ 8 | name: "cart", 9 | initialState, 10 | reducers: { 11 | addToCart: (state, action) => { 12 | state.cart.push(action.payload); 13 | }, 14 | clearCart: (state) => { 15 | state.cart.length = 0; 16 | }, 17 | }, 18 | }); 19 | 20 | export const { addToCart, clearCart } = cartSlice.actions; 21 | export default cartSlice.reducer; 22 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/redux/slices/locationSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | location: null, 5 | }; 6 | 7 | const locationSlice = createSlice({ 8 | name: "location", 9 | initialState, 10 | reducers: { 11 | updateLocation: (state, action) => { 12 | state.location = action.payload; 13 | }, 14 | }, 15 | }); 16 | 17 | export const { updateLocation } = locationSlice.actions; 18 | export default locationSlice.reducer; 19 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/test-demo/__test__/sum.spec.js: -------------------------------------------------------------------------------- 1 | import { sum } from "../sum"; 2 | 3 | describe("Testing Function Sum", () => { 4 | test("should return 3 if (1,2) is provided as input", () => { 5 | const result = sum(1, 2); 6 | expect(result).toBe(3); 7 | }); 8 | 9 | test("should return 5 if (3,-2) is provided as input", () => { 10 | const result = sum(3, -2); 11 | expect(result).toBe(1); 12 | }); 13 | 14 | test("should return 1 if ('3',-2) is provided as input", () => { 15 | const result = sum("3", -2); 16 | expect(result).toBe(1); 17 | }); 18 | 19 | test("should return 5 if (3,-2) is provided as input", () => { 20 | const result = sum("3", "-2"); 21 | expect(result).toBe(undefined); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/test-demo/sum.js: -------------------------------------------------------------------------------- 1 | export const sum = (a, b) => { 2 | if (typeof a !== "number" && typeof b !== "number") return; 3 | return Number(a) + Number(b); 4 | }; 5 | -------------------------------------------------------------------------------- /Episode 14 - Final Food App/Bhojan-food-delivery-app/src/utils/iconMapper.js: -------------------------------------------------------------------------------- 1 | import { IoCartOutline } from "react-icons/io5"; 2 | import { RiUser6Fill } from "react-icons/ri"; 3 | import { IoHelpBuoy } from "react-icons/io5"; 4 | import { BiSolidOffer } from "react-icons/bi"; 5 | import { IoSearch } from "react-icons/io5"; 6 | 7 | export const ICON_MAPPER = { 8 | search: , 9 | offers: , 10 | help: , 11 | signin: , 12 | cart: , 13 | }; 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Tanish Raj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | --------------------------------------------------------------------------------