Full Stack Ecommerce Mobile App: React Native & Node. js

1. Promotional Video & Class Demo: Hello, I am Pi, a full stack whip and bile developer. In this course, I will guide you step by step to build a full featured reac Native Ecommerce app powered by Express JS and Mongo Deb, all from scratch. By the end of this course, you will learn how to create a cross platform mobile app, which is work in Android and IOS to let user browse products, manage cards, and complete secure checkouts with PayPal or credit card all in one mobile. You will also master building a powerful admin dashboard to manage users, products and orders with full crowd functionality. Here is what you will learn inside discourse. Setting a full stack mobile app with React Native, building user friendly product and card screens, integrating paypal and credit card payments, creating full admin dashboard with product, user and order control, and manage user authentication and authorization and user role. This course is designed for developers who want to build real word apps using React Native without relying on third party ecommerce platforms. If you are someone who want to gain confidence, building fol stack apps with modern tech stack, this course is for you. Ready to build your own mobile ecommerce masterpiece. Start watching this class today to transfer your coding skills. 2. Setting Up Development Environment & Essential Prerequisites - Made with Clipchamp: Before we dive deep into the exciting word of building our react native ecommerce app, it is crucial that we lay a solid foundation. Today, we are going to talk about the prerequisites of this course. Having a basic understanding of following will enhance your learning experience. First one is Javascript. This is the core language for both react native and no jazz. Familiarity with modern JavaScript features like arrow function, promises, and acing Ait. Second thing is react fundamentals. Understanding core react concept like components, RPs state, and component life cycle will make learning react native much easier as React Native is based on the act. Also, STTB methods like get post, put, and delete, which is a basic grasp of how web requests work will help you to understand the interactions between your front end and packet. Don't worry if you aren't an experience in all of these areas right now, we will touch upon relevant concepts as we go. Also, there is some essential software to install before we start with our course. The first one is NojS which is a JavaScript runtime built on Chrome the air JavaScript engine. It allows you to run JavaScript code outside of our web browser. So make sure you install no gsfngs.org website. The second software is Visual Studio code. You can download it from here in order to run code inside it. And for running your React Native application, you can install Expo go app if you have Android from Google Play also from app store, if you have IOS device, and it is crucial that your computer and device if you use the app, so make sure you are connected to the same Wi Fi network for PC and application in your smartphone, and I highly recommended to use this app during our journey. And there are some alternative solutions in order to run our application. First one is Android Studio code. You can install it, but this will be significant undertaken. It is large application and require huge disk space andron. There are another alternative solution. If your PCs specification cannot handle the full Android installation, you can install any Android emulator, then install Epogo inside it and run it in that way. 3. Setting Up Our Express Backend: Welcome back. In this lecture, we are diving into the exciting world of our back end. We will set up our Express dia server, which will be the Powerhouse handling all data for our deactnative Ecommerce app. We will also install a super helpful tool called Nod moon that will make our development process much smooth. So first, let's create our folder project with name of iPhones and inside it, create the back end folder. And write a click on the back end folder to open it with BS code. Then we have to install first initialize the app. So in the three dots, you can open new terminal and hit NPM in Y. And now we will install server Js packet. So in the terminal, make sure you are in the end path and write PMI for install Express. Heat enter All right. Now we will create the server file. So here at ser dot JS, and in the packet JSON, we have here the main GS is not index, it is server file. And let's back again to our server Gs. First, we will import Express package. And then we will create our Express app, so Cost equal Express. Then we will set the port number for our server to listen to. Cost port equal 90 90. And then we will start the server and make it listen for the request on the chosen part. So app dot SEN with port and function to log a message to the console when the server successfully starts. So console log and add here backtick to add some variables. And the message is server running on port and add here Dollar sign with Kelly Brackett to add port as a variable. And now in the package Jason, let's remove this test from the script and add a new script which will be start and the command will be node space server dot JS. Also, here once we use Import, we have to add type here, which is module. The common JS will make you use require instead of Import. Okay? So let's now in the terminal, try to run our server. So we MBM, start and hit Inter as you see, the server is running on port 1990. And there is an issue here. If we try to add the message here or add anything else, the server will still on the old running or output, so we have to stop the server and run it again in order to see the updates. To solve this issue, we will install nod moon package, so it will rerun again once the update has happened. Okay? So write MBM nod moon And in the script, we will add a new script and name it server. And here the command will be Nod mo server JS. So right now, if we write BM, server, and hit Inter, if we remove this now, it will re run again by 4. Install Mongoose and Product Model: Hello, everyone. In this lecture, we are taking a big step toward managing our data. We will install Mongoose, which is a powerful tool that helps us to work with Mongo DB. Think of Mongoose as translator between ODS application and our database. After installing Mongoose, we will create our first two data structures. The first one is review schema to define how product review will look and product schema to define all details of our products. Include how review will link to them. First, let's install Mongos. So let's stop our server and hit MBMI Mongos. And we will create a new folder with name of models and inside it, user model dogs. First of all, we will import Mongos now we will define the main structure for a product in our Ecom store. This schema will describe all important details about each product. So cost product, schema equal new Ongos dot schema. The first field will be for the user. This will link a product to user who created it, and he is should admin. So user and the type of it will be Mongo's schema dot types dot object ID. And the required sd to be true. And the reference will be from user schema that we will implement later. Then the second field will be the name, and this is the name of our product with type of string and required set to be so here required and make it true. The third one is image and the type of it also string required set to be true. And the next field will be for category. The type B string and required set to be true. And the price also. The type will be string and required set to be true. And the next field will be for reviews, and the reviews will be an array. Spot a comma here. This array will contain all reviews for this product, and we will implement it in this file also. So let's add for now, review, schema, and next field will be rating, the type will be number and required set to be true. And also, we will add default value of zero. So the rating of the new products will be zero. And also num reviews with type of number default will be zero and required said to be true also. And the next field will be count in stock. The type will be number required. Also true, and the default value will be zero. And finally here, we will add time sums and set it through. And this type SAMs is automatically created at and updated at fields. It will help us in our database. Now let's create Review schema in the next line. So cost Review schema equal new Mongos dot schema with user, and this user is the user that create this review, and the type will be mangos dot schematyst object ID required, set it to be true, and the reference will be from user schema should be inside as string, and the name which is the name of the person who wrote the review. The type of it will be string, and required set to be true. Also the rating, the type will be number, and required set to be true. Through like this and also comment. Each review should have a comment, so type string required. True, and also we will add times stabs. So right here, let's add times stabs and make it also true. Okay. Finally, we will create our Mongoose model or product, so const product capital equal Mongo's model, and the name of our model will be product, and it is from product schema. Also, we will export default product. Before we move to the next lecture, please make sure the name of file is product model. Okay. Then also, it is all required, not required. So if there is any missing, please make it required like this. And for the price, it should be type of number, nut string. And finally, for the view schema, we have to put its schema above in order to read it because in Javascript, it will read the line by line. Okay? 5. Building Our Product API - Controllers Part 1: We'll come back. In this lecture, we are building the core of our ecommerce packing, the product controller. This is where we will define all function that let us interact with our product data, such as fitch all products, get a single product, and for admin user, we can add a new product, update a product or delete it. So here in the back end folder, let's add a new folder with name controllers and inside it, add product controller. DTs. But first of all, we need to create our first middleware handler, which is ASN handler. This ASN handler will simplify error handling in our routes, so it will wrap our async function so we don't have to write try catch block everywhere. All right. So add also middleware folder, and inside it, add async handler dot ds. Cost ask handler equal F N for function. And here we will add quest Response and next. And then we'll add arrow here, and then promise resolve for request, response and next, and also here cache next. Okay. Then export default ASN handler. So this function will take async function like get the product, get the product by ID, then it will exude that function. The promise to resolve will make sure that the function is always retain a promise, and the catch next means that if the promise run into an error, it will automatically passes that error to express next error handling maneuver. This will keep our controller code cleaner and focuses on the main logic. Okay. So let's pack the product controller, and first thing we're going to do is import ASN candor, from ASN candor and make sure you add here to S because we add type module, if you remember impaJS. Then we will import product from user Model dot Gs. And now we will start with our first controller, which is get the product. This function will fitch all products from the database. It also will handle the search and pagination features. Cost get product equal ASNc handler with ASNC and request response. And then the first thing we're going to do, we will set how many product to show pair one page and single page. So cost, page, size, should like this equal, for example, eight, and then we will get the current page number for pagination and its default value is one. So it is the first page. Cost, page equal number and request Query dot page number. Or the default value is one. Then for search functionality, we will add keyword, so const keyword equal request dot query dot keyword, if there is a keyword. So we'll add if statement. We will use a regular expression to find product where the name it is implemented and contain the keyword. So Name. Let's add he regex, qt query dot Ker and the Options. Will be I. And here, if it is, sorry, here and the else, we should have empty calibraket. If there is no keyword, it is an empty object, so it find all product. Then we will count the total number of products matching the Kord. So right here, add count equal weight product count documents with keyword. Then we will find the products that match the keyword and limit it their za result by page and skip the product that from previous page. Got it. Cast, products equal await, product, find with keyword and dot limit page size, and dot skip the page size multiplied by page minus one. Then we will send the products, current page number, total page, and total count as JSON response. Rest Json with products page pages pages here will be Math dot, SEL and count multiply by page size. This will calculate the total pages needed to show all products, and the total will be our count. Okay. The second controller will be const, get product by ID equal ASIC, handler, ASIC request and response. This function will fitch a single product by its ID from the database. So first of all, we will find the product by its ID from the URL parameters. So product equal a weight product defined by ID with q dot params ID. So if the product is found, we will send it back as a JSON. So if product, we will return JSON product. If there is no product is found, we will set a status to four oh four not found and throw a new error. So is that status with four or four and throw new error with product not found as message. And we will continue in the next lecture. 6. Building Our Product API - Controllers Part 2: Okay. For the two last controllers, which is G products and get the product by ID, it is public controllers. It's means that the user don't have to log in in order to see all products or single products in the product screen. But the next one, it will be create product, and this will be private controller for only admin to create a new product. So const, create product equal Async. Handler with async response and request. And then, should I have arrow here. And then we will create a new product instance with sample default values. Laser field is set to the ID of the current Logan admin user. Okay, so cost product. We will create a new product with a new product schema, and the name will be. It will take sample name by default with price of zero, and also the image, it will take image that put it in uploads slash sample dot PNG. We will implement it when we reach front end implementation. Then the category, it will be sample category Then the count and stock by default is zero and the number of reviews by default, zero and the description red. Description will be sample description. Then we will save the new product to the database. So right here, const, created. Product equal await product. Dot and we will send back the newly created product with two oh one status, which means that successfully created. St status of two oh one dot Json for created product. Or we continue back to user model, and I forget to add description. Let's add it right here. Description. And let's add comma here with type of string and required set to be true. Okay? And that's why the description not shown to us when we add now at Show. So let's continue with new controller, which is update product. This function will allow an admin user to update existing product details. So Cost, update, product equal as in handler, request response. It's open. Function first, we will get the product detail from the request body. Cost name price description and image and category and count in Stock equal request dot body. Then we will find the product to be updated by using its ID from the URL should be request dot their then unstPduct equal a weight product dot find by ID, by request dot Params dot ID. Then we will check if the product is found. We will update its field. So if product, product dot name, Equal name. Product price, equal price. Product dot description. Equal description, product dot image, equalimage and product dot category, equal category, and product dot count in Stock equal count on Stock. Then we will save the updated product to the database, so cost updated product equal await product dot c. Then we will send back the updated product as JSO sorest JSO with updated product. Okay. Else, if the product not found, you will set the status to fall over and throw a new error. So else status for over, then throw a new error with message of product not found. Okay. And the next controller will be delete a product. And this is only for Admin also. So const delete product equal Async request response with ASNchandler. And then we will find the product that want to be deleted by its ID. So cost product equal At product by ID for this request to BAMs td, and if the product is found. We will delete it. Await product from product schema dot delete one according to its ID. ID, it will be product, underscore ID here should be. Then we will send a success message. There is dot Json with message Product successfully deleted. Else, if there is no product and it is not found, we will return status with four or four and throw new error with product not found. Okay. 7. Building Our Product API - Controllers Part 3: Latest controller and product controller file will be for creative product review. This function will allow authenticated user to add a review to a product. It doesn't have to be an admin, it just to be logged in. Cost, create product review, equal ASN handler with Async and request and response. First, we will get the rating and comment from the request body, which will be created by the user itself. Cost rating and comment equal request toot body. Then we will find the product by its ID to add the review into it. Cost. Cost product equal await product schema by ID. For request dot PRAMs dot ID. First of all, we will check if the product already exists, and then we will proceed with logic for the review. So if product, the first thing that we're going to do is to check if the user already reviewed this product. So cost reviewed or already reviewed equal product reviews dot find, we will find R, which is stand for review and R dot user dot two string and equal request dot user dot underscore ID dot two string like this, now we will check statement if the product already reviewed by the same person. If it is already reviewed by same person, we will retain an error because he is already reviewed this product and he can only once review this product. So is status of 400 and throw a new error with passage of product already reviewed. Okay. And then after this statement, we will create a new review object with user name and rating and comment and user ID. So const review, equal name which is request dot user dot Name. And the rating will be number, rating with comment and the user that reviewed this product, it will be request dotuserdt underscore ID. Then right here, we will add product dot reviews dot push review. We will add the new review to the reviews array that implemented in the user model. Then we will update the total number of reviews for the product. So right here, product dot reviews or sorry, numb reviews. Equal product reviews dot Length. And then we will recalculate the average product rating. So product rating, equal product review reviews dot reduce method, and you use accumulator and here should be Im then item rating plus accumulator. And the second argument will be zero divided by product reviews dot link. Okay. Then we will save the updated product with the new review and calculated rating. So await product, save. Then we will send a success message with two oh one status for created review. So st status of two oh one dot Son with message reviewed add. Okay. Then here in the s of this F statement, which is closed right here. If the product not found, we will set the status to four oh four and throw a new error. So is status four oh four and throw a new error with message product not found. And finally, we will export all these controller in order to use them in the product route. So export, get products, then get the product by ID, then create product update product, delete product, and finally, create product review. 8. Connecting Products to Our API - Product Routes: Now that we have our product model and all product controller sets, it's time to create routes for our ABI. Think of route as specific address of URL that our React native app will use to ask for send product information to our packet. In this lecture, we will set up the pathway for our app interact with product. So The thing, we will create a new folder with name of routes inside it. Product Route dot Gs. Then we will import Express from Express. Then we will import from controllers, product controller dot gs. Here we will import all product related function, which is controller that we build in the RS lectures. These are actual tasks our ABI will perform like getting products or creating one. So get products, get the product By ID, create product update product, delete product, and create product review. Also Okay, it's all six controller, so we can move on now. Then we will create an instance of Express Router. This router will help us to organize our routes into separate manageable files. So cost Router equal express Router. Then outer Route. The first path will be slash dot G to get all products then dot post to create product. This line defines route for the main path, which is API products. Okay? So when the Get request to API product, it will run the Get products function. But when the post request come to the slash API slash product, it will run create product, okay? Then we will create another router, router dot Route with ID dot Get to GetProduct by ID and dot boot to update product and delete to delete product. So this line will define the route for specific product identicated by their ID in the URL. So when the ID comes and the method is G, it will get single product. But if the method is put, it will update, and if it is delete, it will delete the product. The last router will be router dot Route and here ID slash RVUs, and the method is post and create product review. Okay. And the latest thing will be export default this router. Okay. Now we will go back to serve JS in order to import the route. So import product. Route It is product route, from Routesfolder, and product out dots. Okay. And here we will use app.us with this path, which is APIs Product and here it will be Product Route. 9. Setting Up Our Database - MongoDB Atlas & Connection: All come back. This is a big lecture where we will set up our actual database. We will use MongoDB Atlas, which is a cloud based service, so you don't need to install MongoDB locally. We will also create a special file to handle our database connection and introduce TMB to keep our sensitive database details secure. So first, let's go and search for Atlas MongoDB. Then select the first link. And if you don't have an account, you can sign up using Google or Github. And now we will navigate to the organization and create a new project. The project name will be same as our, so iPhones. Then click on next. Create a project. And now we need to create a cluster. So click on Create and select the free one and create deployment. Then we need to copy this password because we will need it later. Then create database user. And now choose a colllection method. We will use drivers, so click on it, and let's close it and go here to clusters. And click on Connect. Select the drivers. It's loading, still loading. So let's wait. Okay, let's try again and choose drivers. Yes, this is the URL that we want. So copy it and click on Done. Then let's go back to our S code. Here we will create a new folder with name of Config and inside it, dbtJs. First of all, we will import Mongoose then we'll create asynchronous function, which is connect TB, equal ASNCFunction. This is a synchronous function to connect our application to the MongoDB database. We will use async because connecting to the database takes sometimes and happens in the background. So inside it, we'll add tricaCEror and then connect equal t goos dot connect. And here we will use process dotnv dotngoUnderscore, URI. And now we need to install another package which is dot EMV. So in the back end terminal, add here bmi dot ENV. Presenter And then right here, let's add Environment file, which is start with dot ENV. And we want this variable, copy it and paste it right here, equal and the link that we copied from at Las MongoDB. And here, replace this DB underscore password with the password that we copy already like this. Okay? And this connect, it will attempt to connect to that Mongo DB using Mongos, and we will manage using DTM V package, a wait which is wait for connection to be established before move on. Okay? And if the connection is successful, we will log a message on the console to showing the host. So CLG adhere Bate in order to put some variable. So Mongo DB connected. And add here dollar sign with Calibra kit in order to add the host. So connect dot connection dot host. And if there is an error during connection, we will catch it here and the catch error, and also we will exit and stop the server if there is something error. So CLG with te also error, and we will log the same error. So error dot message, and also we will exit the process. So process dot exit one. And finally, you will export, default, connect database. Okay. And then we will go to servers in order to implement it also. So right here, let's import first EnVtENV and we will import connect db from config db dot Gs. And right here, we will configure dot EMV. And also add here ConnectDBFunction. Now let's run our server. MPM server and the click Enter. As you see right here, server is running on board 90 90 and On goody B connected, and this is our host. 10. Building Our User Data Model: In this lecture, we are going to define how our user data will be stored among DB. We will create a user schema that outline all important details for each user like their name, email and password. We will also add a crucial security feature for handling password safely using BcrptGS. But first of all, I configure that there's error here in the name. It should be product model, not user model, and also right here in the controller, so should be product model. Okay, it's corrected now. So in the model, let's add user model to js and now we will install PCrptJSNBMI PCrypt JS and atender. It is installed now. First, we will start with Import. OGs package, then import. B crypt from B crypt JS. This library is used for secular hashing password. Hashing, make sure we store plain password, which is a key security practice. So let's build old schema. So user schema equal Mongoose Schema, and the first field will be for the name of the user, and type will be string required set it to be true. The second field will be email type string required, set it to true. And we have also another configuration which is unique. It should be also true, so the email should not be duplicated by multiple users. Okay? Next, we will implement password, type string, and required True. Also as admin and this admin will be type of fullan either true or false and required, also true, and also the default value of it, it will be false. And here we will add time stamps, sit it to true. Okay. Now, next to here, we will add user schema, dot methods. Match password. Equal async function with entered password. And this is a custom method added to our user schema. It allows us easily to compare the Entered password with our hashed password in the database. So we will return now at B crypt dot compare method for Entered password, and for this dot password. Okay, Bcrypt dot compare, we'll take the plain text password and has the password and securely check every match, and it return through all force. Okay. Then we will add user schema dot p and add save with ASN function. Next and right here, we will add if statement, if not this is modified for password add here next. This is a pre save middleware, meaning it runs before a user document is saved to the database. We use it to hash the password before it is stored. It is for security. Okay? Then we will generate a salt here, so const, SALT, equal Ot, B crypt, dot, has, and the number with ten. Then this dot password equal OTP crypt dot hash, this password, and the second argument will be SALT. Asalt is a random data added to the password before hashing, making the hash unique, even for identical passwords. And tin is for complexity. The more of it, the more security. Okay? And this T password, we will hash the user plain text password using generate Salt. This will create a secure one way encrypted version of the assor lastly, we will create our user schema, so user equal Mongos dot model, and the name of it will be user and second argument will be user schema, then will be export default user. 11. Secure User Sessions with JWTs - Generating Our Authentication Token: In this lecture, we are diving into how we will manage user session securely. We will learn about JSOUtken which is a modern way to authenticate users and keep them logged in. We will install the necessary package, which is JSOOTken and then write a pagin that creates and send the secure token to user browser or app storage. This is a crucial step for authenticated user in our Ecommerce app. So first, let's open our terminal, make sure you are in the back end and hit MPM DSO. Web took in should be JSON like this. Hit Enter. All right. And we will create another folder with name of Utils and inside it, generate. Token Gs. Let's first board JWT son webTken then we will create function, so const generate token equal s and user ID. This function creates a JO b token, JWT, and it as an HTV only Cookie, RS is the express response object used to send the cookie back to the client, and the user ID is the D for the user who want to create the token. Okay? So first, let's add token equal JWT dot sign with user ID. And also process dot Env dot JWT. Underscore secret. And this secret is a secret key from our environment variable to make the took in hard to attack. So let's go to Search Engine and search for password generator. Let's select this website and make it longer, copy. And let's open now environment. At first, let's copy variable name and put it right here and paste the secret key. Okay. So wt dot SIN will create the actual DWT. And the user ID is the payload data we want to store in the token. Here, just use user ID, and it must use to sign the took in ensuring it is integrity and making it impossible to tamper with. So we must create a strong secret key in order to prevent attacks. Okay. Then we will add another argument here, which is expire in add string and 30 day. So it will expire in 30 day. Okay. Then right here, we will add s dot cookie. The name of it will be WT and token and TTB only, set it to true and same Same side, true or strict, sorry, should be strict and max it will be 30, multiply by 24 by 60 by 60 by 1,000. And this is 30 day and millisecond. So the s dot cookie will send the generated JWT back to the client as a cookie. And here is our JWT name or our cookie. The token is the value of the cookie, which is our JWT, and here is options for the cookie. HTTP only through will make the cookie accessible by only the web server, that client site, JavaScript. And same site strict. That will help to prevent cross site request attacks. And the max edge, it will be stored for 30 day. Okay. And next, we will explore default, generate took should be No. Like this. 12. Managing Users Controller Authentication, Registration, and Profiles Part 1: Now we will build the heart of user management system, which is the user controller. This will handle everything from user sign in and registration and to manage their profiles and even for special admins, task like viewing or deleting and update user details. We will also integrate the validator library for robust input chicking. So first, let's install validator. And in the controllers, we will create a new controller with userctroller dot js. And first thing we're going to do is import ASN Candler from me the lawyer sing Candler dot JS. Then we will import generate Token from UTLs and Generate token dot JS. And now we'll import radiator. From validator package. This validator library, which help us to check if input like email and password are valid. So the first controller will be for login, so C oath, user equal ASN candor with ASN and request response open calibract and like I said, this function will handle user login to check the provided email and password correctly. First of all, we will get the email and the password from the request body by the user itself. Cost, email and password, equal request dot body. Then we will check if the user was found, and if he provided the password match, the stored hash password by using user dot Match password that we implemented in user model, if you remember, right here. Match password. So now, add a statement if there is a user and wait, wait, sorry. A wet user dot. Let's copy match password from here and paste it for given password. We will generate token for response and user dot underscore ID. If credentials are valid, we will generate a JWT and set it as HTDBOly C then we will send it like JSON data. So it is JSON with email ID, sorry, user dot underscore ID, name, user dot name, email. It will be user dot email and is admin user is admin s right here. If the user not found or password doesn't match, we will send four oh one for unauthorized status and throw a new error message. So s dot status of four oh one and throw a new error with message wrong email or password. And here we don't want to specify whether it's wrong email or password for security. The second function will be for register user. So this will handle the new user registration. So cost register, user equal ASN handler with ASINRquest and response. First of all, we will get the name, email and password from the request body. So C email and password and also the name from request body. Then we will validate to check if the provided password meets strength requirement using validator. Dot is strong password. So if not validator, dot is strong password with given password from the body and here we will add Kelly bracket and let's close F statement. And right here, we will add minimum length of our password will be eight and lower Ks equal one, minimum upper Ks also minimum number, also one and minimum symbol one as well. So the length of our password should be at least eight containing all of these specification. Okay? If the password is not string enough, we will send bad request with an error. So is that status with 400, throw a new error with message minimum eight cards for characters for password which include upper, lower and number and symbol. And also, we will check if the provided email is already exist because the email, if you remember, should be unique right here. So cost user. Exist equal Await from user schema dot find one. Sony. For giving email from request Buddy. And now we will check if the user exists. So if user exist, we will return an error with bad request 400. So is that sin status of 400 and throw a new error with message of user already exist. Okay. Then if nothing of these if statements happen, we will create a new user database with provided details. So here, cost, user equal await user schema dot create with this data, which is name, email and password. And if the user is successfully created, we will generate a took in for newly registered user and sits as Cookie. So we will generate took in and response with user dot underscore ID. Then we will address dot status with two oh one dot JSON with this data, which is underscore ID equal user underscore ID, the name will be user nmemil user email and is admin, from user dot is admin and else we will return the status of 400 and throw new error with this message, which is invalid user data. We will continue in the next lecture. 13. Managing Users Controller Authentication, Registration, and Profiles Part 2: The third function handler, it will be Cost Logout. User equal request and response. This function will handle user Logout by clearing the JWT cookie. So s dot clear CO with the name of JWT because we assigned its name like this. So clear the JWT cookie from the client browser. This effectively logs the user out. Then we will send a 200 Okay status with a success message. So is status of 200 dot Json with message logged out successfully. And the other controller will be G, first of all, Cost, G user profile, equal ASN handler with ASIC request and response. Let's close it a brocketT function will allow an authenticated user to view their profile. So if the user doesn't log in, he will not see his profile that. Okay? So first of all, he will find the user by their RD ID, which is attached to request to Tuser by authentication Middleware. So cost user equal await user. Dot find by ID method. For q dot user dot underscore ID. So if the user is found, we will send their profile data if statement, I user. Then we will return JSON data with underscore ID, which is usernderscore ID, the name user dot name, email, which is sardit email and I admin user dot is admin. Okay, else, if there is no user, for some reason isn't found, we will send back RS dot status with four oh four and throw a new error with message user not found. Okay. And the next controller will be to update user profile. This function will allow the authenticated user to update their own profile details. Cost, update user profile, equal ASN handler. And first, we will find the user by their ID from authenticated request. Cost user equal At user dot find by ID. With from request dot user dot underscore ID. And if the user is found, we will proceed with updates. So if user we will check first for validation for the updates if it is valid or not. So if request body dot email and Not validator email or rect body dot email, we will retain dot status of 400 and throw a new error with message of invalid email. And also, right here, we will check if the new password is provided validate strength using is strong password. So if request body dot password and not validator dot is strong password for request dot buddy Password. Let's add here. Closing and right here, we will add a specification, same as minimum lingth and minimum symbol. So let's copy it right here. Okay. If it is not strong, we will retain RIS status of 400 and throw a new error with message of the same as implemented. So let's copy it, which is right here. And paste it instead of this line like this. Then we will update the user name if provided in the request body. Otherwise, we will keep the current name if it is not updated. So user dot name equal request dot buddy dot name or olduser dot Name and also for the email, if he update his email, it will update it after checking, and if it is not updated, it will return to old one. And for the password, if request body dot password, User dot password, equal request dot body dot password. If a new password was provided, we will update it. Our user model, pre save hook will hash tag it in the user model here in the presave. Okay? Because it is modified. Then we will save the updated user document to database. So const, updated. User equal await user dot save and we will send back the updated user information as AJCNRsponse. So JSON with this subscription ID from updated user dot underscore ID and name from updated user dot name and email updated user dot email and is admin from updated user dot is admin, and here in the s for the first F statement. If there is no user at all, we will return rest status of four oh four and throw a new error with message of user not found. Okay. And we will continue in the next lecture for other controllers. 14. Managing Users Controller Authentication, Registration, and Profiles Part 3: Now it is time to implement user controller that belong only for Admin. So only admin user can get to these controllers. So Cost get users to get all users that in our database with Async and request response. We will find and return all user documents from the database. So cost users equal Await user dot find WHOD like this. Then we will return JSON to return all users, and here should be users like this. The next one it's also for only Admin user, which is delete user, so delete User equal async handler with request and response, and it's open calibracetF, we will find the user to be deleted by their ID from the URL parameters. So cost, user equal At user ID from request dot params dot ID. And if the user exists, so we'll add a statement. We will first check if he is an admin because admin user couldn't be deleted. So if user dot is admin, we will return dot status of 400 and throw a new error with cannot delete admin user. And if he is a user exist and not admin, we can delete it by using await user Schema delete one and from underscore ID, user dot underscore ID, and return rest so with message that contain user removed successfully. Okay, else, if the user don't exist, we will return s dot status of four oh four and throw a new error with message of user not found. Okay, then we will implement another admin controller, which is cost get user by ID. But Okay, here should be small. Equal AN handler request and response. And first of all, you will find the user by ID and use dot select password to exclude the password field from the result, so the admin cannot see the apasord. Okay, Const, user equal Await user dot fine BID, request dot params dot ID, dot select password. Do not retain password value. And here, if there is a user already is found, we will return this user with its data and else if the user not found, is that status of four oh four and throw a new error with User not fun. Okay. And the latest controller will be also for admin user to update user details. Cost, update, user equal async with async handler and request and response. First of all, like before, we will find the user by ID. Cost user equal Await user Dfind by ID. And then if the user is found, there is a user, and if the user email provided we want to validate it. So if request dot buddy dot email, And here also, we want to add and not validator is email forgiving Rick dot body dot email, retail is dot status of 400 and throw a new error with message of invalid email address. H. Okay. Then if the email is valid, next to this if statement, we will update the user name and email. And if it is not provided by the user himself, we will keep the old values. So user dot name equal q dot body dot name or user dot name and user dot email equal request dot body dot email or user dot email and the user dot is Admin. It will be the value of Pollan like we implement and ik dot body is admin because the admin user for this controller can change the status of normal user to be an admin user. And then we will save the updated user document. So cost updated. User equal await user dots. Okay. Then we will send the data information as JSON data with ID, which is from updated user dot underscore ID and email from updated user dot email and the name updated useremailname, sorry, and I admin, it will be updated user dot is admin. And in this statement, we will add se also here. If the user is not found, we will return RTT status of four or four and throw a new error with message user not found. And finally, we will export all these controller in order to use them in the user route next. Okay? So export them as as user, register user, LogoerPfle and update user profile, get users, delete users and get user by ID, and finally update user. Updated here. Let's tick. Okay, here should be Update user for clarification because we use updated user right here. Okay? So update user like this. 15. Connecting Users to Our API - User Routes: All right. Welcome back. In this lecture, we will build the ABI routes for our users. Just like we did for products, we will set up specific URLs that our app will use to handle user login, registration, profile management, and for Admin actions. For now, we will keep these routes open and later, we will add security to them. Okay? So in the routes, let's add user routes to S and first, we will import Express. From Express, then we will import user controller that we implemented earlier from user controller dot JS. And here, it should be our Okay. And first controller will be us user, register, user Logout, user, get User Profile and update user profile, get users get user by ID, and update user. And then we will create an instance of our Express Router. This router will help us to organize our routes and to a separate manageable files. Cost Router equal Express dot router, and our first router will be Router, Route, and the path will be slash dot post to register a user and to get all users, so get users. So the path will be slash API slash users slash. If the method is post, it will be for registering. And if it is Git, it will get all users. Then outer Route, and the path will be Logout, and the method will be Logout to user, then router dot post. And the path will be slash OS with OS user. And the next router will be outer dot out with path of slash profile, and dot G to get user profile, and to put or update, update user profile. And the latest Router will be outer route the path will be with ID and delete to delete a user. And to get user BID and to put update user like this. And finally, we will export default router. And now let's go to server in order to import User route from Route User Route to Js right here, we will use Aptitues for user routes, and the path will be API users. 16. Implementing Authentication Middleware - Protecting Our Routes: In this lecture, we will implement auth middleware. This is a crucial one for security of our application. We are going to create authentication middleware. Middleware function are like gatekeepers that run before our main route function. Here, they will check if a user is logged in using their GWT, and if they have admin privilege. This will ensure that only authorized user can access certain parts of our API. So it will be two part of token, one for normal user, and the second one will be for admin user. So in the middleware, let's add a new file with both middleware dot js. First, we will import JWT from Tison webtok then import also ASN Candler from Asncandler dot js, make sure you add dogs and import user model from user model dogs. And the first middleware will be named protect. This function will check if the user is sndicated or in the meanwhile logged in. So CST protect equal async handler, async with request, response, and next. So first, let's define our variable, which is token. This variable will store the JWT. Then token here Should B Token. And here token equal k CokitJWT. So the token is expected to be in the cookie named JWT. And also, we will check if there is a token exist in the cookies. We will add tryCatch error. First, if a token exist, we will verify it using JWT secret. And also, we will use JWT Verify decodes the token and check its signature and expiration. Cost decoded equal JWT dot Verify this token with process Env dot, let's go to EMV to make sure it is same, and copy it and put it right here. And then rect user equal Awight User dot find by ID decoded user ID, dot select password. So if the Token is valid, we will find the user in the database using the user ID from Token'sPylod. And dot select password. It would ensure that we don't retain the user's password. Okay. Then we will call. Next, to pass control to the next middleware or to the route handler. This means the user is authenticated and their data is attached to req dot user. And if the token is invalid or expired, we will send four oh one unauthorized status. So it is dot status of four oh one and throw a new error. With message not authorized No. And here, let's add se. If no token is found in the cookies, we will send also four oh one, not authorized with status. Is status of four oh one and throw new error with message of not authorized. Okay. This protect middleware is for normal users, and for Admin, we will implement const admin equal ASN handler with ASN and request with response. So this function will check if authenticated user is an admin. So we'll start with the statement if request dot user, and request dot user dot is Admin. If it is true, we will pass to next middleware or route handler, else, right here, we will returns the status of four oh one, and here should be RIS and throw new error with message of not authorized as an ad. And finally, we will export these two middlewares, so export, protect and also the ad. 17. Securing Our API - Applying Authentication and Admin Middleware: No? We have built our authentication middleware, protect and admin, it is time to get them to work. In this lecture, we will apply this middleware function to our product and user routes. This is how to ensure that only logged end user can access certain features like creating reviews or updating their profile and that only admins can perform sensitive actions like add, delete product or update user details. First of all, let's go to product routes and we will import both Protect and admin, and make sure it is dot js. Then we will check our route if need to be protected. So right here to get products, it is public route. No need to protect it. But for create product, only Admin. So we will add Admin and also protect. Like this. This route now with post request is protected by Admin and protect token or middleware, right? And the second route here, it is get product by ID. It is public because unregistered user can see product screen or single product. But for update product, only admin. So we'll add admin and protect before update product and for delete product, only Admin can delete product. So let's put also Admin and protect. But here for the ad review, the registered user just can create a review. Let's go now to user Routes to implement Middleware. So Import also protect and admin middlewares. So let's take our first route to register in order to register, you don't have to be already logged in, so it is public. But for all users, it's only for an admin, so let's add protect and admin middleware. For Logout, it is public also. And for both user or login, it is public here in the Get user profile. It is for registered user. And to update profile also with register user. But here, in order to delete user or get user by ID or update a user, you have to be an admin. So let's add admin and also protect before these controllers. And here, also add Protect and admin. So like this, both user routes and product routes are protected by Wath Middleware. Let's go now to user Routes to implement Middleware. So Import also protect and admin middlewares. So let's take our first route to register in order to register, you don't have to be already logged in, so it is public. But for all users, it's only for an admin, so let's add protect and admin middleware. For Logout, it is public also. And for both user or login, it is public here in the Get user profile, it is for registered user. And to update profile also with register user. But here, in order to delete user or get user by ID or update a user, you have to be an admin. So let's add admin and also protect before these controllers. And here, also add Protect and Admin. So like this, both user routes and product routes are protected by Ath middleware. I 18. Enhancing Our Backend - CORS, Cookie Parsing: Okay, then, we are going to add some crucial middleware to our Express application to make it more robust and secure. We will implement course to allow request from our axtive app, and also cookie parser to easily handle authentication, token, and other middlewares. So MBM and the terminal at BMI course and cook parser, head Enter. Then right here, let's import, cookie parser from cookie parser, package and import CRs from CORS. Okay. Then right here, we will add tus course. We will enable course, which is cross origin resource sharing for all routes. This will allow requests from different origin like our reactive app running on a different port. To access our backend API, you might configure it more specifically in production. But for now, we are not in production, so let's make it like this. Also, to Tue express dot JSO this middleware is used to parse JSON in the request body for post and post request. This will allow us to read the data sent as JSON from the client. Also, we Express dot, URL encoded with extended to be true. This middleware will parse URL encoded data in the request body and sent to be true will allow rich objects and array to be encoded into the URL encoded format. And lastly, let's use cookie parser. This middleware will parse the cookies attached to the request. This will allow us easily to access cookies like our JWT aundication token via request dot Cookies. 19. Seeding Our Database - Importing Sample Data: Now we will take now, we will implement database seeding. This is a super helpful process for populating our MongoDB database with initial sample data like users and products. It is especially useful during development, so we have data to work with without manually creating everything. So first, you will see in the lecture resources data file you can unsibt and best it in the back and file or folder. Then we will create Cedar file right here. Cedar dot Gs. Let's first start with import. Import Mongos ram Mongoose. Then we will import also ENBtENVPackage. Also, we will import users from data slash users dot JS. It is like this. It has two only account. The first one is an admin with I admin. Is it true? And the second one is normal user, and I admin is false. Also, a set of products with all description and fields that we implemented in product model. So also, we will import products from data slash ducts dots and Import user schema from usermodelGS and Import product schema from productmodel dot s and Import connect db from config folder and dbGS first, we will load environment variables from dot EMV, so dot EMV dot Config, and we will connect to the MongoDB database, so connect DV. Then we will create this function, which is for import data, equal ASN, function. This is a synchronous function to import our sample data into the database. So first of all, we will add tryCatch, and the first thing we're going to do is clear out any existing data in product end user collection. So I wait product dot delete Many and await user dot delete Many. Then we will insert our sample user data. This will retain array of created user documents. So cost created. Users equal Await user dot insert. Many should we insert money and for users, then we will get the D of the first user created because our first user, like I show you, is an admin. So right here, we'll add cost admin user equal created users with first one underscore ID. Then for each product in our sample data, we will add the admin user ID to the user field. This will link each product to the admin user. So Const sample Products equal products dot MAP for each product. And here we will return product. Here it should be destructuring and user, it will be admin user. Then we will insert our product data into the database. So right here, let's await product dot insert money for sample products, and also we will log a success message to the console. So console log and here data imported successfully. And finally, we will exit the process clearly. So process dot exit zero. And if there is an error during the import process, we log it in the console. So right here, so log with ctek and error as a variable, then we will exit the process with error code. So process dot exit, and here is one. This is for import data, and the second one will be for destroy data. So cost destroy data equal ASN function. First, we will add try cach error, and first, we will clear out all existing data in the product and user collection, same as this. So let's copy it and paste it right here. Then we will log a success message. So console log data Destroyed successfully. And process dot exit one. Okay, or sorry, here should be empty. And if there is an error with clearing the data, we will look console with Black tick and error and process dot exit one. And finally, let's add here if statement with process g with value two, equal D destroy data s we will import the data. This function or if statement will determine whether import or destroy data based on command line argument. If the third argument passed to the script ad, we will destroy the data. Otherwise, we will import it. Now let's go to backup JSOFle in order to add two scripts right here. The first one will be data import, and node, space, dot dash, Cedar, dot gs. And the second one will be Deta destroy. Here, we should add a coma. And here at nods docidartJs space D, like this. So let's import the data now in the terminal, make sure you are in the back end at MPM run data. Import All right, we have a problem here in the user model. Match password is not defined. So let's go to user Model, and ser Schema methods. Yes, right here, it should be dot match password, and we should remove this bracket and also the closing bracket, and now hopefully it work. So let's run it again. As you see it data in boarded successfully. So let's hit to Atlas Mou DIB and current project, go to clusters and Plow collection. As you see the data imported successfully, here is our products. And for the user, here is two users. The first one is an admin, and the second one is normal user. So let's try now to destroy our data. So instead of import, let's destroy Enter, and it look data destroyed successfully, let's check it. Again, refresh the page. And it is removed successfully. But now, let's import it again in order to use it next. 20. Fix Bugs: Hi, everyone. In this lecture, I will fix some bugs that happens when I implement the code. So in the user model, password field, it should be required, not required. And to this line, which is SALT, we have to generate SALT by gen SALT, and it will has in the next line like this. Okay. And now let's move to user routes. And for the lookout, it should be router dot post because the method is post and we don't have more than one route for this path. And also, we will rearrange these middlewares to be like this. And also right here, cut it down and paste it like this to protect, then admin then get users and also for other controllers let's move now to user controller, and right here in the OS user. Controller, we should have user Lou scstUser equal Await user to find one by giving email because we want to prevent undefine and in the register user controller, if the user provide details, and if it is true, it will retain JSON data. And right here, if there is an error, we should add s and next, we will update or correct update user profile. Right here, when updated user saved, we should take ID from updated user, not update user. And in Git Users controller, it should be Rs right here, and let's fix this message. Let's move to user routes and for the lookout, it should be router dot post because the method is post and we don't have more than one route for this path. And also, we will rearrange these middlewares to be like this. And also right here, cut it down and paste it like this to protect, then admin then get users and also for other controllers. Let's move now to user controller, and right here in the OSuser Controller, we should have user Lou scsUser equal await user to find one by giving email because we want to prevent undefine and in the register user controller, if the user provide his details, and if it is true, it will retail JSON data. And right here, if there is an error, we should add s next, we will update or correct update user profile. Right here, when updated user saved, we should take ID from updated user, not update user. Let's check what else all done now for user controller. And let's move towards middleware. And here in the project, we should take or add Rs not resize. So let's add Rs and for the token, it should be request dot cookies dot JWT. And for the Add men Middleware, we don't want acing handler with a, so let's remove it and remove the pickets and add here also as. And for the product controller, let's see what miss. And the GT product by ID. Here if there is a product already, we should return response json data. And for creative product, here we want to add user field to know who user is add this product. So request user dot underscore ID. And now for update product here, we will rename it to be updated product, and return updated DissonPduct and also for create product review, it should be create product review, and let's change it in the export object. And finally, in the product route, let's rename create product review right here and right here and rearrange also these oath medal ware. And also right here. And for the lead product, and all is done right for now. 21. Install Expo App And Run It: Eight. It is time to switch gears back end to front end. In this lecture, we are going to start building our react native app using Expo. So right here in our app folder, let's open it with VS code. And open the terminal, make sure you are in this directory, not in the back end. So run the command in BX, create Expo, up at latest latest version, template, and space blank. This will install Ac Native app and GSO JavaScript formula, not typescript, head Enter, and the name of our app will be front end this will need some time, so I will pause the video and tag again. Okay, the project is ready now. You can run it easily. If you have Android smartphone, you can search on Epogo in your Playstore and install Expogo. Also, for IOS, you can install it from the store of Apple easily. And then here in this directory, let's navigate to front end and run the command NPM start you will see now QR code. If you open your application Ex Bogo, you can scan this QR code or manually type this URL. It will open the application. Okay. But in my case, I have to install Studio, solt Android Studio. Download and let's select here Download and navigate down. You will see you can download now for different platforms can choose that's with you. And then after I install it, you will see this main page of Android Studio. And here in the device manager, you can click on it, and here in the plus icon, add new device, create virtual device. And you will see now different smartphone with different it and width. So let's trick to one of them and type on next and finish. And right here, you can press on this triangle as you see it is running now. And to run our app inside, this emulator, you can we here, press on A, to open it in Android. It will install Epogo on the small phone. All right. It is run now successfully. So let's close this. And if you go right here in the app, you can change it and you'll see it re render again. So let's remove this text, Tai Ballo word. As you see, it is refreshed now. In the next lecture, we will start to set up our front end in bitter way. 22. Expo App Setup - Root Layout And Tab Layout: All right. Now we will set up the basic project structure and implement Expo Router to handle navigation within our app. This will the groundwork for smooth user experience as they move between different screens like homepage orders and profile. Here, we would implement three tab navigation. The first one would be for home, the second one order, and the third one will be for profile screen. Okay? But first of all, let's go here in app Jason and add here scheme with front end like this in the package JSON, we will change the main from index Gs to be Expo Router, T like this because we will delete a file and index file and install or add a folder inside front end. And inside it, we will create our first file with name of underscore. Layout JSX. And this layout JSX we will implement stack navigation component. This will allow us to create a stack of screens, similar to how screens are pushed and popped in web browser history. So let's first open a new terminal, make sure you change the directory to front end, then run the command PMI xb Router. And wait for it to be installed because right here, we will import stack from Ebo Router. And also, let's create our function, which is root layout equal function, and we will retain now stack component. The stack component is our main navigator. Anything render inside stack D screen will be part of this navigation stack. So here in the stack attributes, let's add screen options, add another Klipracket and header, Shawn, set it to be force because we don't want to have here header, we will implement better control over the UR. Okay? And our first stack screen stack dot screen. It is self closed like this and with name of tabs like this and tabs is our first folder that we will implement right now, and also we will add option of header shown to be also false. Let's create our tabs folder here in the app. Let's add a new folder implemented like this with brackets and inside it, another underscore layout the GSX. This file will handle our tabs, which is, by the way, three. The first one is home, the second one orders, and the last one is for profile screen. So we will import tabs so import tabs from Expo Author and tabs, which is the component for creating tab based navigation. And also, we will install another package, this package for installing icons for Expo. So it MBMI at Expo Victor icons like this. And impart icons from at Expo, Victor icon on icons. Because our ablviation it will be Victor icons like home screen or profile. And also, we will have another folder with name of constants right here. Inside front end folder, and it will have our Utils file which contain color palette of our application. I will attach it in lecture resources. You will find it. And let's import from it colors from constant and Utils file, then we will export default our function, which is tab layout. And we will return now the tabs component in our tab navigator. So the tabs like this with screen options also to be sure that he are shown is false. As well, and inside it, we will add tabdoot screen. It will define each individual tab. So for the homepage, it will have taboo screen and for the order, another taboo screen and for the profile. So tabs screen and its self close, this will have name, and it is name of our file. We will implement it now and then with options of like this, title. The title will be empty string, and also tab bar icon. It will be as function with focused. And here we will add our on icons with on icons with size of 27 and the name of it will specify whether if it is focused or not. So it's a F statement. If it is focused, it will be home and if it is not home outline like this. And also, we will have color of this icon, and also it depends on if it is focused. If it is focused, it will be colors dot primary, else, if it is not, it will be colors dot secondary color. And now let's create our file, which is inside tabs with name of index JSX. It should be the same name of index GSX like this. And let's create simple index JSX. Function with our snippet, which is RN FEC ors. You can use this snippet by installing react native extension from here. This extension will allow you to use this snippet like this. So now we refresh our app. I should look our first tab navigation icon. So let's add here R for iod app. As you see, after reloading the app, it show here the tab and index as text. So let's create another tab screen, and this will be for Orders screen. So let's copy this and paste it and name rename the name to be orders. It should be orders. And here on focused, it should be bag checks. Right here, bags, check, outline, and same as focused, it will be color with primary, and if it is not, it will be secondary. Let's create our orders. File. Like this and add RN FE as our snippet. As you see right here, show now. So this is the focus. When we click on homepage, it is focused. I will be home. And if we click here to orders, it will be focused now and this will be outline. As you see right here with color of secondary, and if it is so focused, it will have primary color. So let's implement the last tab, which will be for profile and here the name will be profile. And if it is focused, it will be person icon, and if it is not person outline, so let's also add here. Profile to JSX like this with RN FES, it should be here. Profile, and let's fix this function. Like this, as you see, here's our profile screen. 23. Start With Redux Toolkit - Base API Slice: Now it is time to introduce a powerful tool for managing our applications data, which is redox toolkit. Especially, we will use RTK query, which is a data fetching and caching library built on top of redux toolkit. This will make it incredibly easy for our Ragnative app to get the product data from our packet ABI and keep it in sync. But first of all, we have to fix here and layout JSX we forgot to export default rout layout and also set here the header shown to be false. And now let's open the terminal and run the command MBMI at redox slash toolkit. Like this and space react, redux, and hit inter. Then we will create another file inside our constant folder with name of URL to handle our PS URL and product URL. So first of all, we will implement export COST pays underscore ULL, which is our pecendEI in this case. So at TTB, slash slash and instead of using local host for some reason, if you use local host, it will look network error, so to avoid this case, we have to go here in the wireless and in the details of our properties, click on your connected Wi Fi and here for IP four address, copy it and paste it right here instead of local host as a string and add also two points with 90 90. And this is our port, if you remember, server GS, we put 90 90 as a value of our port. Then we will export another URL, and this will be for product underscore URL, equal API products like this because also here in the back end, our route will be APIs products for product routes. All right? And for now, these two URLs and next we will add more for users and orders and so on. Then we will create our slice folder inside front end adhere, slices like this and inside it, API slice dotGs and we will impart from at redox Toolkit query, slash react two packages. The first one is FIC Ps query and Create API. The FIC Base query is utility that creates a preconfigured pay query function for use with RTK Query. I handle basic HTTBRquest and for createApI it is the core function from RTK query to define an API service. Then we will import our BSURL should be underscore URL from constant and URLs file like this. Then we will define a base query here using Which phase query. Query equal fit base query. Then we will set the Base URL for all our API request. So base URL to be base URL, and then we will create our main API slice using create API. So export const API slice equal, create API with Base query from Base query, Base query specify the function that will handle the actual HTTBRquest as you. Remember, then we will add also tag types. For now, let's add here. Square brackets and for now, we'll use just product. Tag types are strings that are used to tag checked data. When a mutation like create a product occurs, we can invalidate these tags. So tell RTK query to refresh the data related to the tag and keeping our UI refresh. Okay? And then we will specify our endpoint, so add endpoint or Builder and make it empty for now, and the endpoint is where we define our API operations like query for g, mutation for post, pot, and delete. For now, it is empty as well inject specific endpoints in other files. Okay, we will continue in the next lecture to implement products API slice. 24. Redux Toolkit - Products API Slice And Store Configuration: All right then, let's start now implement products ABI slice. So in the slices, let's add a new file with products ABI slice dot Gs. First, let's import Product URL and import API slice from ABI slice and then we will export const products API slice equal api slide dot inject points like this, we use bit inject endpoint to add new ABI endpoints to our base ABI slice. This will keep our API definition modular. All right. And then we will define our endpoint with Builder And our first query will be G product and builder dot query. So the query will take keyword and page number. If you remember, we implement them in the product controller in the back end and the URL will be product URL and Params it will be keyword and page number. So this query will take an object with keyword and page number for search and pagination. And the URL here is our base product, URL and the keyword and page number, the query parameters for search and pagination, and we will use query if the method get. So here we will get all products, so we will use get, but for pot or create or delete, we will use mutation. Or then right here, I will add keep and use data for five. So this will catch the data for 5 seconds, even if no component is using it. And also, we will provide tags. It will be square brackets and product provide tag when data from this query is fished, it's tagged as product. This means if any mutation invalidates the product tag, this query will refitch this. And right next to here, we will implement another query which is Git product details. And also it is builder dot query because the method is go right here and the query will take product ID because we will get a single product and the URL will be adhere Batech to use variable and Product URL and Product ID. So to construct URL with product ID, and right here, we will keep used data for b and also provide tags with product should be square brackets. So let's add them like this. Okay. And now let's export these two query. So right here, export const use get products query and also use product Details should be here. Small query. This is a name convention for our products API slice. If the method is query, we will use use get product query to add use and query. But if it is mutation, if the method is put and delete or high, we will use mutation, use Get product mutation, for example. All right. Then we will start to configure our store. So right here in the front end, let's add store dots like this. And first of all, we will import from a redux toolkit, configuration or configured store. This configured store is a function from dex toolkit that set up a redex store with good defaults. Then we will import API slice from the latest lecture. Import API slice from slices, API slice. It is reducer will handle the catching data for pitching state. And for now, we'll add here store, store, equal, configure, store, and reducer, like this ABI slice dot reducer path. And right here, API slides to the reducer. So the reducer field specify the root reducer for our store because RTK query reducer path and reducer are added here to manage the cached API data. And right here, we will add middleware and this middleware will default get default Middleware. And get default middleware dot Concat for this API slice Middleware and the Dev tools, set it to be true, and then we will export default store. So the middleware is where we add custom middleware. The default middleware, it will include the reduct toolkits, belt and middleware. So we will concatenate the ABI slice tooth middleware, which is required for RTK query. And then we export default this. All right. And then we will go now to Layout and import right here, Import Provider. From react redox and also import store from store. And then right here, we will surround these stacks with our redux provider like this and store equal store like this to make the data passes through all these screens and stack. 25. Build Our First React Native Component - Rating: Now let's start to build some UI, and we will start with some components. So the components are the building blocks of our user interface. Allow us to create modular, maintainable and efficient code. We will create for now rating component to display star rating, and let's start here, the front end, add a new folder with name of constant, sorry components and inside it, rating dot JSX, with help of our Snipet let's now import Font Awesome from at Expo, Victor icons Font Awesome. Then we will import also. Colors from our constant folder in the utils. All right. This rating component will take or accept two values, which is value and text like 12 review as a value. The number is 12 and the text, it will be review. So let's remove this text. And here in the view tag, let's add style equal styles dot rating container. And now we will use a ray map to render five stars dynamically. So let's add your Kali bracket inside square brackets and the numbers 1-5 dot Map for each I now each star will wrap in a view for styling. View let's close it right here, it will take style equal styles dot star and here we will conditionally render for star icons with respect of each value. So if the value greater or equal, I here from the BAF statement, we will return font Osom of solid icon. So the name would be star and the size of 15 and the color from colors dot star Color equal. Here should be colors like this. So let's try now, star gold and else right here, if the value greater or equal I -0.5, then we have to put outline or half star outline. Like this and the name will be star O and the size of 15 and the color, we will take it from colors dot star GOD. All right. And finally, let's put these inside. Racket, like this. And otherwise, we will render empty outline star. So font awesome. Let's close it. And right here, let's add the name. The name will be star O for outline star and size equal 15 and color from colors dot star Gold. Okay. And also, we will conditionally render the text if it is provided. So right here, let's add if there is a text, and we will render text tag like this with style of sides dot Rating text like this and here we will add the text that provided. Finally, let's type our component. Right here for the rating container, we will add flex direction of raw and align items center, and margin top of four, like this and here we will add star with Margin, right of two. And finally, rating. Text will take font size of 13 and the color from colors secondary text Color and Margin left of eight. 26. Message Component: Second component, which is message component. This message component, it will show success, error or information alert throughout our app. So right here in the components, let's add a new file with name of message dot Jax and start with our snippets RNFS. Then we will import colors from constant full door, and the message, functional component receive variant type of message, and children the actual message content as props. So it will take variant. As default, it would be error and also children like this. So the default variant will be error if it is not provided. Then we will define styles for different message variant. So we will have three variants. The first one is success. Second one is error and the third one is info. So const variant. Styles equal success. The background color will be from colors success Light. Sorry, should be light. And the color will be colors dot success. And finally, the border color will be from colors dot Sxs border. And the second variant will be for error, and it will take back a ground color of colors dot error and the color will be from colors dot text, red, and the border color will be from colors error order. And finally, the info variant will take background color. From colors dot. Inflight and the color will be from colors dot info, and finally, the border color from colors dot info Border. And if you go back to here, you will see here is our error text and error light error border and info border, and all implemented in Utils file. All right. Then we will select the style object based on the variant prop. If it is unknown, it is bast and it is default will be error style. Okay? So right here, you will add const selected style equal variant styles with variant or variant styles dot error. Okay. Then we will retain right here, a view tag with style equal Let's add here square brackets, styles, container like this. And the second will be another curly bracket with background color of selected style background color and also border left color. It will be selected style dot border color. Okay. And in the view, we will add text with style equal styles dot. Also, it will be inside square brackets, so styles dot text, and the second style will be color, so it will be selected style dot color like this. And inside it, this will be our content passed as children. And for the styles, right here, let's add container, and this will have bedding of 12 border left width with four, and right here, border radius of four also, and marginal, vertical of eight, and the width set to be 100%, and align items to be center, and here for the text. It will have font size of 14 and line eight of 20. And finally, the font weight will be 500 like this. 27. Building the Product Component Part 1: Now that we have our dex store set up and are able to fitch product data, it is time to implement or build the visual presentation of single product. In this lecture, we will create the product component, which will serve as reusable card to display essential information about each product like name, image, price, stock status, and rating. This component will be used in our home screen. So in the components, let's add a new file with product dot JSX and inside it, our snippets. And right here from import react native, we will import image, and also we will import touch a Bell. Obesity in order to use buttons, and let's import link from Explore Ouor. Let's close it and also import rating component from rating. Then let's import colors from constant UTLs and import the base underscore URL from our constant folder and URLs. So this product component will receive a product object as props. So let's add here product like this. And we will use helper function to ensure that image URL are complete. So right here, we will add cost Gimage URL equal image Bath. And we will start with if statement. We will handle the cases where image path is null or undivided. So if there is no image path return null, and if it is already a fold URL, we will return it as it. So if image path starts with if it starts with TTB, we will return image path as itself. Otherwise, const, URL equal, let's add back to here with pase, URL, and right here, image birth, like this and re fall URL, like this. Then right here in the retir we will rete link component. From Expo router in order to navigate when the component is pressed. So the first attribute, it is a tif, which is specified a destination path, and any parameters like product ID. So right here, we will add another calibracket, so we'll use pathname, and if it is pressed, it will navigate to product screen that we will implement it later, and the params will be product ID it will be from project dot underscore ID like this. And this link will take as child attribute and inside this link, we will have now touchable opacity, so it will make the entire product card is presb. So touch opacity with activity, active opacity with 0.5 to provide visual feedback when it is pressed. So the value will be 0.8, and the style equal styles dot container. Like this. Okay? And now you will up for the product image inside view tag with style equal styles dot Image robber. And inside it, we will have image tag with style of styles dot image. And also, we will have the source that take an object with URI property, which is the image URL. So source open another calibracket and the URI, we will take it from Get Image URL, which is the helper function for each product image like this. Okay. And also this image will have precise mood of content in order to ensure that the whole image fits within the bones. Contain should be like this and also we will have an error, callb if there is any error, equal. If there is any error, we will return console log with product image load error. If there is error, et native event dot error, and another console log for product or should be a string product failed URL. And here, we will get image URL for product dot image like this. Next to this closing view, we will add another view, and this view will be container for product information like name, price availability, and rating. So the style equal styles dot info area. All of these styles, we will add them here later. And we will start with text with style equal styles dot product name. And we will add here attribute of number of lines, so we make sure that number line of each product is one, so it will not mess with style and also lip size mood. If if the product name is too long, we will add.dot.in order to make it short. And here, we'll add product dot name like this. And after this closing text, we will add view let's close it, and this will be with style equal. This will be for price and availability. So style equal styles dot pricing. Like this. And inside it, we will add text with style equal. Styles dot Cart Price. And here we will add product price. Okay. And then we will add availability badge, so we will conditionally style based on stock. But we will continue in the next lecture for other 28. Building the Product Component Part 2: All right. In the last lecture, we read the pricing and availability view container. So right here next to this text, we will add now the availability pdge. We will conditionally style based on stock. So right here, let's add view tag with style equal, we will make it conditionally. So let's add here, square brackets and styles dot availability. Like this. And second one will be styles dot count and stuck like this. If it is greater than zero, we will add styles available like this. So it will be green if it is any stock. If it is unavailable, so we will add another style for unavailable and all will be implemented in the style sheet. Okay. And inside this review, we will add here another text with styles equal styles dot availability. Text style, and right here, we will add Kelly Bracket product count in Stock. If it is greater than zero, we will add text here in stock and else if it is not available, so it will be sold out. And right next to the closing view, let's add here. Now, the rating component that will display the stars and review count. So let's add view with style equal styles rating, and it will take round rating component that we implemented earlier with value equal product, rating and also the text props, add here, backtick and inside it, variable with product dot Num reviews as we implemented in Product controller here as a text, let's add reviews, we will pass review count as text. Okay. And finally, we will start to implement the styles for product component. So right here, we have container and this container will have a width of 45% and background color of colors dot white and border radius of 16 padding of 16 and also margin, vertical of eight, and margin. Horizontal of 2%. And also, we will add shadow color of colors dot dark, gray foreshadowing, and shadow Offset, it will be the width zero and the height of two. Okay. And also, we will add shadow, opacity of 0.8 like this and shadow radius of eight and elevation of two this is for Androi Cho and Border with one and Border color we'll take it from colors, dot, light gray like this. Okay. So the second style will be for image rubber and the background color will be color white border radius of 12 and overflow heading. Margin, bottom of eight and align items of center and justify contents of center also. The height of it will be 140, and the bedding will be eight like this and border width of one and border color from colors, dot, light, gray like this. And for the image, here, image. And the width will be 100%, and also the head 100%. Then for info area, it will have padding horizontal of four like this and product name will take style of font size of 15, font weight of 600 and also the color. From colors text Color and margin bottom, it will be ten and the head will be 36 like this and line height of 20. Okay. And next will be for pricing. So let's add here, pricing and flex direction of fro and justify content will be space between and align items of center and margin, bottom of ten. Then for current price will have font size of 14. And font weight of 700 and the color. It will be colors dot primary color. And next one for availability, if the product is available, we'll have padding horizontal with v of thin and padding or just make it padding of thin. Like this and the border radius of 20, like this. And also availability text. I will take font size of ten and font weight of 500, but as string. And the color will be from colors dot white. Also for available it will be with background color of colors in stock and for unavailable I will have background color of colors dot sold out. And finally, for the rating row, we will have margin top of six like this. Let's make sure the product is exported now. All right, it is exported, and we will continue in the next lecture for other implementation. 29. Crafting the Dynamic Header Component Part 1: Hello, everyone. In this lecture, we are going to build a dynamic header component for our Rag native application. This header won't just display a logo. It will integrate a crucial functionalities like search bar, a card icon with a badge, and later on, we will show how much number of items that added to Card then we will add a welcome message for logged end users, which is user experience and serve as main navigation hub on our home screen. But this will be later on for authentication and card functionalities. But for now, we will implement aesthetic bar of Card badge. So right here in the components, let's at header dot GSX with our Snivets we will start here in the style sheet, we will import also image and touchable Obacity and also text should be text input for search and also right here from react, we will import, use State and use callback Ho then we will import on icons from at Expo, Victor icons on icons. It should be like this. So let's remove this Cor and make it small and also import colors from our constant UTLsFle and also we have to install react Navigation package. So right here in the terminal, let's navigate or change directory to front end and hit the command PMI at React Navigation NTR like this and tener because we're going to import use navigation at react Navigation Native. Also, we will import use Router from from Explore Router and also use local search prams for search and pagination functionality. So first of all, let's make a state for search input field circus search text and set, search text, equal, use state with empty string. And now we will handle the navigation hooks. So const Navigationqu, navigate navigation, sorry. And const router equal use router. So for imperative integration, we will use navigation and for declarative navigation and sitting the URL params. Then we will get the current keyword from the URL search parameters, which is used for search filtering. So right here, it's at const keyword, and by default, it will be empty string equal, use local search prams. But once the user adds some keywords, it will change its value. And then we will handle search callback function to handle search submission. I use callback to prevent unnecessary renders. Okay? So cost handle search equal use callback function. And we will only perform search if text is plus two characters or empty to clear the search. So if search text dot Trim, dot length is greater or equal than two or search text dot trim. Dot Length is equal zero. We will update the URL parameters with the search keyword and reset the page two, one. So Router dot set params to B with keyword. The keyword will be search text Trim, sorry. Do Trim and the page number will be one like this. And here we will add dependences for use callback. The first one is search text and the second one, the router, which is updated continuously. And then we will implement function to clear the search input and reset the search filter. So const, clear, search equal function, we will set the search text back to be empty string. We will create clear the input wield and router that set params to be the keyword to empty string, and page number will be one. So we will reset the page number and the keyword and there you are and also we will implement a function to show all products and clear the search. So cost show all products equal set the search text to be empty string and router dot set forams. Right here, we will make the keyword also empty string and the default page number of one. And in the next lecture, we will start to implement the return inside it. 30. Crafting the Dynamic Header Component Part 2 - Made with Clipchamp: Let's now start to implement the entire header. So first of all, let's remove this text and add style here into the view, styles dot header container. And inside it, we will have Turow This will have logo and card icon. So first, let's add here review with the style equal styles Tub row and inside it, we will have image with source equal, require from our assets image slash logo dot PNG. And for the image folder, I will attach it in this lecture resources. So it contains the logo and also the PNG that we will implement later in profile Bd. Okay. And next to this image, we will have touchable opacity. With on press attribute, and we will make it empty for now, but later on, we will implement it once we go to card functionality, and also it will have style equal styles that card icon container. Like this and inside it, we will have on icons with name equal cart, the size of 35 and color equal colors primary color like this. And also right here, there will be functionality, but we will leave it as for the on press for card functionality. Okay. And next to this closing view, we will add now the search row for search input and search button. So view with style equal styles dot search row and inside it another view with style equal styles dot search container. And inside it, you will have on icons with name of search and the size of 20 and color equal colors dot primary and also the style equal styles dot SER icon like this. And next to this icon, there will be text input, and this text input will have style equal styles dot SER input and the placeholder equal search products. Like this, and it will have value equal Sarge text, and change. Text, we will have set search text function and placeholder text color will be equal colors dot gray or lighter gray. And we will have return key type. It will be for search and submit editing it will have handle search function that we implement above. This will trigger the search when search key is pressed, and the key type, it's the keyboard, return key to search. Okay? And right here, we will add clear search button functionality. It is only visible if there is text inside the input. So here, let's add search text if there is search text. If it is true, there will be touchable city with on press equal clear search, and the style equal styles dot Clear button. And inside it, there will be on icon with name equal close circle and with the size of 20, and the color equal colors primary like this and s right here, we will add se null if there is no sarge text. At all. And now next to this closing view tag, we will now add search button only visible if there is text inside the input. So here, let's add search text dot length greater than zero, and we will have searchable opacity with style equal styles dot Search button. And on press equal handle handle search function, and inside it, there will be text with style equal styles dot Search button text, and inside it, search as a text. Okay. And on the next here in this closing view, we will have now to active the search filter indicator only shown when a search keyword is active. So right here, we will add also calibracket if there is a keyword, and we will add here view, is close it. And this view will have style equal styles active filter and inside it, we'll have text with style equal styles dot filter text like this. And we will add text here showing result for keyword. Right here, when a CR keyword is active, it will run this code, and it will show us text right here. For example, showing result for iPhone SmartP. Okay? And next to this text, we'll have another touchable Obacity with style equal styles dot show O button. And on press handler, it will be show all products. And inside it also, you'll have text of style equal styles that show all button text. And inside it, it will be show all products. So here if the active keyword is work, and you can press also in this button to show all products and remove the filter to activate this function. Okay, this function. In the next lecture, we will continue. 31. Crafting the Dynamic Header Component Part 3: Finally, right here, we will implement bottom row. This four will come registered or logged in users, but we will keep it static. So for now, just add view with style equal styles dot bottom row. Like this and inside it, text with the style equal styles dot will come. Text and keep it empty for now. We will back to it later. And for the style for our component, we will start to implement it right now. So header container, the flex direction will be column like this and padding horizontal of 15 and padding vertical of tin and the background color of colors of white and padding bottom of ten as well. So then right here, we'll add tube row with flex direction of row and justify content. It will be space between and align items with center and margin bottom often. Also, right here, we will add now the search row. So search Row. I will have margin. Bottom of thin flex direction of raw and align align items of center. And the gap of ten. And for the logo, we'll have width of 100 head of 16 and resize mode of content. Then right here, we will add search container, and this will have flex of one and flex direction of then align items Cinter and pecky ground color of color to white, order, radius of 20 and padding horizontal of ten. Let's remove this comma and the height of 40 and border width of one and of colors prime. Then next will be for search button. So search button with background color with colors primary padding personal of 15 and padding vertical of eight and pour the radius of 20, and the height will be 40 and justify content center. And Okay. Then we will implement Search button text with color of colors white and font weight of 600 and it should be inside string and also font size of 40. Then for the search icon, it will be with margin right of five and the search and put it will have flex of one, font size 14 and color. It will be colors black and the height will be 100%. Then for clear bottom, it will have budding of five. Then for the bottom. It will have flex direction of raw and justify content to be flex start and align items center, then for card icon container, it will be with position of relative because this needed for positioning the bit. And then we will implement the cart B like this with position of absolute and top will be minus five, right, will be minus five and also the back ground. Color will be colors dot text, red, and border radius of 20. Now the card badge. Please note that some of these styles is not implemented in the JSX, but we will implement SX later. So position absolute of minus five and right minus five as well, and also the background. Color will be colors dot text red, then border radius of 20 and also the width will be 20 and the height of 20 and next justify content to be center and align items to be center as well. Then right here, we'll add card badge text, and this will have color from colors dot white and font size of 12, then the font weight will be bold. Then we will welcome text with font size of 16 and font weight of bold then the color will be from colors to primary for active filter, row, we will has flex direction of row and align items to be center and justify content to be center then or space between here. And margin bottom. Of ten and adding horizontal of five. Then right here, we'll add also filter text style with color of colors primary and the font size will be 14 and the font style will be italic, like this. And for show all button style, we'll add background color of primary and padding horizontal of 12, padding, vertical of six and border radius of 15. And finally, show all button text will have style of color white and font size. Of 12 and font weight of 600. So the header component is now ready. 32. Implementing the Home Screen Part 1: Welcome to this lecture. This is a pivotal moment in our development as we bring together everything that we have built so far to create our applications home screen. This screen will be responsible for fitting and displaying a dynamic list of products from our Back end ABI. We will integrate our header component for search functionality, our product component to render a list item and implement pagination for efficiently display large datasets. But before that, we have to go right here in the header component to fix some bugs. Here, let's remove this use and also for the return here, it should be styles dot top row like this because we implement its style already, and also the image of logo should have style. So styles dot logo, and also it's already implemented in the stylesheet. And that's it for the header component, let's go now to product component and see what we should fix. All right, right here in the availability and counting stock. Here it should be product with counting stock, not styles. So bleed at product dot count stock. If it is greater than zero, it will run available style, else, it will run unavailable stock. And for the rating component, the text will come from product dot num Reviews. So bleed as add here like this. And finally, for the rating here, when we map through these values of rating, it will retain a view, but each view should have a unique key, so we have to add key attribute right here, equal I like this. And also we will reduce the size of each icon to be 12 not 15. Okay. Let's move now to index GSX, and first of all, we will change the name to index and export it as well and start to import here flat list, this will optimize the component for rendering long list of data and touchable opacity for buttons and activity indicator for showing loading state, and also platform for apply platform specific style and safe area view. Okay. Then from react, we will import use effect and also from Export Router, we will import use local search forms and use Router. And now let's import product from component and import message from message component and the header. From header component. Also, let's import colors from constant file. And from slices, we will import UGT product query. From products API slide, get Products query. And first of all, we will extract keyword and page number for the URL parameter. So const keyword. And the default value of it will be empty string and page number, and its default value equal one as a string use local search params, like this. And we will get the router instance for navigation. So C router equal. Use Router. And then we will use RTK Query hook to fetch products. So Cs data is loading and and also error and repetch equal use git product, query, and inside it, we will pass both keyword and page number. So keyword, and for the page number, we will convert it to be a number. Like this number and for this page number value, then we would use effect to refetch data whenever the keyword or page number change from search or pagination. So this will ensure that the data displayed is always up to date with URL parameters. So use effect. And here we will add repetch and for the dependencies, we will add keyword because it will change continuously and page number and also refetch. Okay. And then we will implement function to render pagination buttons, so cost, render pagination. Buttons equal function so we will start with if statement. If not, data dot or question mark pages or data pages, less than or equal one. We will return null. Here, we will render pagination if there is no data, or only we have one page. Okay? So for the DSX, we will implement it in the next lecture. 33. Implementing the Home Screen Part 2: Now let's continue with render pagination. Buttons. So right here, we will return for now to add functionality. So first of all, view, and this view will have style equal styles dot Pagination container. Like this, and then we will create an array from one to data dot pages to map over for each page button. So array from and the lngth will be from data to pages like this and second argument will be underscore, I and return I plus one, and all these will map it through it for page and this will return touchable opacity. And this touchable opacity, we will add unique key, and this key will be page. And then for the style, we will have two styles to let's add square brackets. The first one will be styles, page button, and second one page equal data page and styles dot Active Page button. So this second style will apply active styling if the current page matches the button's page number. Okay. And next to here, we will have one press handler, and we will run function like this. And now we'll update the URL parameter to change the current page. So Router set params to be with page number and this page number page dot to string like this because page number must be a string for set params. Okay? And also right here, dot dot dot keyword, if there is a keyword, if statement, we will return this keyword, else, it will be empty Key bracket. So right here, we will conditionally include keyword if it is present. So the search willter will persist. All right. And inside this touchable opacity, there will be a text like this, and this text will have style equal to styles. So let's add square bracket also styles dot page button text. And the second one page if it is equal data page and styles dot Active page button text for this. Okay. And inside it, we will add page variable as well. Okay. Then we will implement now another component, and this component will render at the top of the flas list our header and array any error message. Const list, header equal function. And let's add fragment here. We will have our header component. With search and card, and we will display error message if the query result an error. So here, if there is any error, we will display a message, so message component with variant equal error and with sorry, equal styles dot error message. And inside it, we will have, if there is error dot message or error dot error. Else, we can display this message which is failed to fetch product. Okay. And also, we will have component to render at the bottom of the flat list, which will be our pagination buttons, so cs List Footer, equal function, and this will render agination buttons like this. Let's now start to implement the RTN for our homepage. So let's remove this and add safe area view with style equal styles dot safe area and the safe area view will ensure that the content is not obscured by device, notches, system bars. And then we will conditionally render based on loading state. So if it is loading, if statement, we will return a view, and this view will have style equal styles dot Center and inside it, we will run activity indicator with size of large and the color will be from colors primary if it is rodding. Else, we will return flat list. So once the data is loaded, we will render the flat list of products. So right here, it will have data attribute from data dot Products, this array of products from our API response and the K extractor equal item, and it will be item dot underscore ID. So this is unique key for each item because each item should have unique ID and render item, it will be items like this and now we will render each product using our product component. So return product, and inside here, we will pass our rob product equal item like this. Then add here content container style. Equal styles dot list, and the number of columns equal two, and column rapper, style, equal styles column rapper, this style for the rapper of each row of columns. And then we will add also show vertical scroll indicator equal falls so we will hide the scroll bar and list header component equal list header that we implement above, and list footer component equal list, footer. And we will add list empty component. We will display a message if no product are found and if there is an error. Right here, if it is not error, and we will add message with variant of info and the style equal styles dot emt Message. And inside it as a text, no products available. Okay. Like this. And we will continue for the styles in the next lecture. 34. Implementing the Home Screen Style: Right then, let's now start with our styles. So right here at safe area. I will have lex direction or flex of one and that ground. Color from colors of white. And then we will have bedding top. But this is from platform OS if it is equal. Android, it will have padding top of 25. Otherwise, it will be zero, and you can adjust it as you will. Okay. And right here, let's add center. It will have flex of one, justify content, center and align items center for the error, it will have our error message will have margin horizontal. Of ten and margin bottom of ten also. Let's go right here for empty message. It will have margin top of 20 and align of center for the list we have padding bottom of 20 and padding horizontal of ten. And for the column, rubber justify content should be space between, not center. Sorry, between. And margin but of 15, like this. And for the pagination, container will have flex direction of row and justify content to be center. Align items also center and padding vertical 20 and flex rap will be rap and with gap of ten like this. And for the pad button, I will have padding horizontal of 12 and padding vertical. Of eight and border radius of 20 background colors, the white and border width of one and border color from colors the primary and the minimum width will be 40 and align items to be center. And for active button, et's add it here and with tacky ground color from Colors dot primary and page button text. The color of it will be from Colors dot primary and font weight 600. And finally, for active page button text. I will have a color of colors dot white like this. And now let's open our terminal in order to run both back end and front end. So let's first change the directory to back end and NPM run server. And our server is running, and also Mongo DB is connected, and add here another terminal as well and change the directory to front end, then hit the command PM and start. Let's wait for it. Okay. And right here, like I said before, if you have Expo app installed in your device, mobile phone, you can scan this QR code or manually type this in the Inter URL manually. But if you have Android studio installed, you can just type A, and it will open it for Android, as you see right here. All right. Now let's show our home screen, as you see, you can navigate down. And here seems to be we forget to add this style. Let's see what's wrong. Here the selected page button have styles of active pad button. Okay, I see that we don't add it in the style. It should be active Bad button here. Yes, as you see right here. And let's test now our pagination. So click on this pagination as you see it navigate to next page. Let's back again, and it works very well. Let's now test our search. So let's try to search for Ivon and click on search. Okay, as you see, show the result of iPhone. Let's click now on how all products and we back again to old filter I will display all results. Let's see what's wrong. Here the selected page button have styles of active page button. Okay. I see that we don't add it in the style. It should be active pad button here. Yes, as you see right here. And let's test now our pagination. So click on this pagination as you see it navigate to next page. Let's back again, and it works very well. Let's now test our search. So let's try to search for Ivon and click on search Okay, as you see, show the result of iPhone. Let's click now on how all products and we back again to old filter. I will display all results. 35. Building the Product Details Screen Part 1: After setting up our product listing on the home screen, it's time to build the product details screen. This screen will provide a comprehensive view of a single product, including its image, details, information, and rating. This is for now and later on, we will implement the options for selecting the quantity and add to cart functionality. But first of all, let's go right here in the layout root layout, and we will add a new Sack screen. Let's copy this and paste it and add here another folder name, and this will be with name of screens. So let's go here to app and add this folder. Like this because we will implement other pages inside this folder. So right here, we will add now product screen GSX. Then we will start with our snippet and install now or import from react native scrollview for scrollable content and touchable opacity and activity indicator, and also platform as well. And we will import from react, use state, and use effect. And also from React Native, we will import safe area view and now we will install another package, and this package is react Native message. This will help us to show or log some messages in our application. So let's change the directory to the front end after add a new terminal and hit the command PMI reacts Native, toast, dash message, and hit Tinter and now let's import it. Import toast from React Native. Toast message, and import use navigation and use Route. But this from navigation. So from a react navigation Native and import from slices and products ABI slice, we will import use G product details query for single product, and also import on icons from react expo icon. But here, let's say move this cali bracket and copy this and add here, slash and paste it like this. And import colors from Utils folder. Also import message component from component message. And in order to make toast work, we have to go back to root layout. And right here, let's add it. And it's imported in order to make it work in all our application. All right. Let's go back to product screen. And for now, let's start with use Route Hook. So right here, Route equal. Use Route So we can access the route parameters like product ID. Then we will use navigation, H const navigation equal use navigation in order to implement imperative navigation. And then we will extract product ID from route parameters. So Cs Product ID equal route params. This product ID comes from the actu param and the product component. Then we will add here state Cost, QTI for quantity and set QTI equal user state, and the default value or the first value will be one. Then we will implement use effect. And this use effect is used to handle cases where product ID might be missing or invalid. So right here, we will add a statement. If there is no product ID, we will show an error, toast message if product ID is not found. So toast dotho and it's add here open. Clearly bracket, the type will be error and text one. Will be error. And right here, text two will be product ID, not found. Please try again and or select a product from the list. Okay. And the position of this message will be top on top screen and visibility time. We will add 7,000, so it will be 7 seconds. And then right here, we will add Navigation dot. Go Back. In order to go back to the previous screen and in our case, it is home screen. We add here the dependencies, which is product ID and navigation, like this. These dependencies will ensure this run when product ID or navigation affected by any changes. Now we will fetch product details based on the product ID by using redux toolkit, cost data, and let's rename it to be product and is loading for loading state and refich and error equal use get product details. Query for this product ID. Okay. And we will continue in the next lecture. 36. Building the Product Details Screen Part 2: Now we will conditionally rendering for loading, error and no product data. So if there is loading state, we will display a spinner while data is being witched. So right here, let's add statement, if it is loading, we will return view with style equal, styles dot center, and inside it will show activity indicator with size of large and coleu colors primary like this for error state right here, you will add if there is error, let's return first, let's construct a user friendly error message. So error message equal error, if there is error dott dot message. Error should be small or error dot error. Okay. Then we will return view with style equal style styles dot center, same as activity indicator or loading. And in between, we will have message component with variant of error and inside error dot Then we will add also touchable opacity with press handler. Let's add a function and right here, navigation gob. All right. And here, let's add style equal styles dot error back button inside it, you will add a text. With style equal styles dot error back button text inside it, I'd go back as a text. Also, if there is no product, we will display a message. If there is no product, we will return view with style equal styles center as well, and inside it message component with variant of info. And here we will add in between no product data available. Like this. And also, we will add same as this button, so let's copy it and paste it right here. Now we will start to implement main product screen content once the data is available. So if you click on this product for now, you will see a product screen with this text. So let's start to implement the content. Let's remove this view and now a safe area view with style equal styles dot safe area and inside it, we will have scroll view with content container style equal styles dot container. Like this and inside it, we will have a button which is touchable obacity with on press equal function with navigation Go Back in order to allow the user to go back to home screen and style equal styles back button. And inside it, we will have on icon with name equal arrow, B, circle like this. Let's go back to this screen, as you see here is our arrow. And let's make the size equal 40 and the color equal colors dot primary like this. And if you click now this button, you will back to home screen. All right. Now we will start to implement the styles because the rest of our DSX will be in separate component and we will import it in this main product screen. So let's start with our styles and this screen. So safe area. It will have flex of one and also a ground color from colors of white and padding top and here we'll specify if the operating system is equal. Android if statement, it will be 25 s, it will be zero. So as you see it fixed now, and then we will implement center style with flick of one and justify content of center and align items of center and background color of also Colors dot of white and padding, sorry, should be padding of 20 like this. And we will have now error back button with background color of colors. Primary and padding vertical of 12 and padding horizontal of 25 and border radius of ten, and margin top 20, and the shadow color will be black and also shadow offset the width is zero and the height is two. And shadow opacity will be 0.2 and shadow radius of three and elevation of two. All right. Then we will have error back button with color from colors dot white and font tout of 600 and font size of 16 like this. And we will have container style with padding of 18 and bedding, bottom of 30. And finally, for back bottom, we will have margin vertical of ten and line of flex start like this. In the next lecture, we will start to implement the product card image and product details. 37. Building the Product Details Screen Part 3 - Image Card Component: All right then, let's now start to an product image card component. But first of all, let's fix this style to be merging to like this and go to components, a new file with name of product image. Card to JSX. Then let's now use our Snippet. And right here from the Ac Native, we'll import image. And that's it for now. Let's also import colors from Util'sFle and also we will import pays underscore URL from constant URL, and we will receive URL as probe. Let's add here image URL, and we will start with helper function to ensure that we have for URL similar to product component, so get URL equal MID Perth and we will start with if statement. If there is no image path, we will return null if Image path starts with if it starts with at TTB, we will return. Sorry. Return emit bath. Like this. Okay. And right here, add const, fall, URL equal let's add back tick to add variable base URL, and also image path like this. Then we will return for URL. Let's for now go here and import the product image card component. So next to this closing touchable opacity, let's add product image card. And let's see if it is imported successfully. Yes, it is here. And now we would pass image URL equal product dot image. Then we will back to Image card and remove this text. And this view will have style equal styles dot Image. Card, and inside it, we will have our image with source and another ali Bracket with URI will be get Image URL with image URL, like this. And we will add style for this image. So style equal styles closet dot product image. And we will use resize mood contain to ensure that the whole image fits the screen, then we will add on error if there is any error. Here let's add calibracket and inside it, console log and product image card. A error. And the second argument will be e dot native event error. And also here on loads here also, Console Log with text image loaded successfully. Like this. All right. Let's now start with our styles. So the image car will have background color of colors to white, and order radius of 12, padding of 15 and margin. Bottom of 20 and also align items to be center. And justify content center and shadow color. Let's add black shadow, and also shadow offset. The width will be zero, and the height will be five, then shadow opacity will be 0.8 and shadow radius of ten, and finally, the elevation it will be two for Android Shadow. And now for the product image, let's add the width of 100% and the height also and order radius of ten. All right. At this card should we have higher height. So let's check here in the image card style. Okay, there is no height at all. So let's add here, height of 300 and save it. Okay, let's work now very well. So in the next lecture, we will start with product details information. 38. Building the Product Details Screen Part 4 - Product Details Card Component: All right. Now let's create another component. This component will handle the product details card. So the components add a new file to Jax and add our Snippet. We will import first touchable Obacity and now we will install package called Picker. We will use it in order to select the quantity that we want. So let's navigate first to front end and MPM install at React Native Picker Picker. Hettinger, and let's import it. Import picker, react native picker. And we will import on icons from from a expo Victor icons on icons. Like this. Import rating component from it should be slash rating, and finally import colors from constant folder. And this product details car, we will pass through it, multiple props. The first one is product and quantity QTI and set QTY this for now. And we will return here. First, if the product data is not provided, we will prevent the error. So if not product return null, and we will return now here. Let's remove this text and add style equal styles dot details. Card. And first, it will be text. This will be product name. So here style equal styles dot product name. And here as the product name like this. Okay, let's now navigate to product screen and import the product details card and this screen in order to see the result. So product details card, and we will pass product equal product. And also, let's see what we implement the quantity and set quantity. So QI equal QTY and set QIqual set QTY. As you see, now the name of our product is shown. So let's add here another view with style equal styles dot rating Price. Row. And inside it, you will have a text for the price. Style equal style price value. And here, let's add $1 sign in order to make it a value should be dot price like this and also we will have a rating component and the value will be equal product dot rating. And we will have also text equal, add Blac ticks and dollar sign Kelly Bracket in order to add variables. So here, Num reviews like this. And it is shown now successfully. And after this closing view, let's add here another view. And this view will be the separator. Let's add style equal styles dot divider. And inside it or let's make it Sylvi closing like this. And let's now implement the product description. So let's add here text. This text will have style equal styles like this, and we will pass the product dot description. Let's see if it does work, yes. And another view right here. And this view will set the status, the quantity and add to card section style equal styles status, quantity, cart and inside it, you will implement first the stock status, so view and add style equal styles status container. And inside it, we will have a text with style equal styles dot label inside this label will be status or text as status like this. Then we will add another text and this will have styles equal two values, so let's add square bracket. The first one styles dot status text, and the second one will be depend on if it is in stock or out of stock. So let's make it product dot count in stock if it is greater than zero, if statement, it will be styles in stock s, it will be styles out of stock. Okay. And inside this text, we will add product count any stock. If it is greater than zero, add if statement, it will have a text of any stock like this sell be out of stock. And for this product, it is in stock. Let's try another one out of stock. I remember I bought one with out of stock. Yes, this one. So as you see right here, it is out of stock. All right. And we will continue in the next lecture for rest of ASC. 39. Building the Product Details Screen Part 5 - Image Card Component: Welcome to the lictor. Last thing, we implement in the previous picture that the status of our product if it is in stock or out of stock. Now we will continue with product card details component. So in this closing, view, we will add here. Clearly bracket with product dot count of stock and stock. Sorry. If it is greater than zero, double and we will add here view. Let's close it. And inside it, add style equal styles dot quantity. Container. And with text equal the styles equal styles dot Label. And here we will have quantity as a text. And we will add next to this text, another view with style equal styles dot Picker rapper. Like this. Let's close this view and inside it. We will add PIR component. So picker and let's close it. And here, we'll add some attributes with selected value equal quantity and on value change. It will run a function, and here add item value. And here we will set the quantity to be item value. So right here, selected value is the currently selected quantity, and this on value change will update the stare of change. Then the style equal styles dot PICA. Like this and item style equal styles per item. This is a style for individual picker item or IOS only. Okay? And then we will dynamically create Picker item from one to product dot count in stock. So if we have ten quantity, it will be 1-10. If we have 20, it will be 1-20. So let's add here. Square bracket and dot, dot, dot, array for product count in stock dot keys and right here, we'll add dot map to map through X. And let's add here normal bracket and inside it, pickert item, and it is self closed like this. And here we will have key of X plus one. And label. And let's make it. Variable. So here, X plus one, and here to string to convert it to string, and the value will be X plus one and the color equal color colors dot dark gray. All right. So let's save it and see right here. If you click on this picker, you will see the count of stock for this product. It is 25. And let's try another one to see what I mean. So right here, it is 18, as you see right here. Okay? And now let's implement a to card button. So right here in this closing bracket, add touchable opacity. And with style equal, it will have two styles. So we will add styles AD to card button. And the second one, we will leave it empty for now because we have to implement a to card functionality. So let's keep it like this. And inside this touchable obacity we will have on icons with name of card outline and the size of 20 and a color equal colors primary like this. And it's show here, but we will style it later. So let's add here text with style equal styles dot add to card text. And right here, we'll add Add to Cart. Okay. That's it for the SX. In the next lecture, you'll start to implement the style in order to make it better, appealing. 40. Building the Product Details Screen Part 6 - Image Card Component Styles: Okay, let's start with styles. So right here, add details, card, and this will have background color of color white border radius of 12 and padding of 20 margin, bottom of 20 also, and shadow color will be black. And shadow offset will be with width of zero and height of five and shadow opacity 0.08 and shadow radius of ten and elevation will be two like this. Then for product name, I will have font size of 26 and font weight, 700 and margin bottom of 12. And also text align will be Center. Next will be for ditingPs row, style with flex direction of row and justify content space between and align items center and margin bottom of 18. And for the price value style, we will have font size of 18 and font weight bold. And the color will be from colors dot primary like this. And now we will have divider style. So the height will be 1.5, and the background color from colors that light gray and margin vertical it will be 15, like this. Then for the description, the font size will be 16, and the line eight will be 24 and margin bottom of 20 like this. And for the status quantity card, it will have padding top of 15 and order, top width of one, and border to color from colors that light gray like this. All right. And for the status container, we'll have flex direction of row, then align items, center, and margin. Bottom of 15 justify content will be space between. Like this. And now for the label, it will have font size of 16 and font weight of 600. Then for the status, text. Ill have font size 16 and font weight of 600. Then for any stock, it will have color from colors dot success like this. And for out of stock style, it will have color from colors danger it will have red color and for quantity container, I will have flex direction of raw. Then align items will be center margin, bottom of 20, and justify content space between like this. Allright? And for the bicker rubber, it will have border width of one and border color from colors do light gray and border radius. Often and overflow, will be hidden. And background color, it will be from colors. Dot white. And the width will be 50% like this and for the picker, to have height of 60 and as for now, this and then for the picker item to have font size of 16. And for a to cart button should here a comma and flex direction. It will be raw and background color will be colors primary and border radius of thin. And padding vertical of 15 and justify content. It will be center and align items. Also center and the gap will be ten and shadow color will be black and shadow offset. It will be width of zero and height of three and shadow opacity of 0.25, then the shadow radius of five and elevation of two. Okay. And for a two cart text, have color from colors dot white, and the font weight will be bold. Sorry. And font size, it will be 16 like this. So that's it for the styles that I notice here should be card icon. So let's make sure it is imported. Yes, it is right here, but the color will be the same, so it's hidden. So let's make it white in order to make it visible like this. And that's it for our component, and we will see you in the next lecture. But 41. Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 1: Hello, everyone. In this lecture, we are going to dive deep into managing our applications shopping cart state. This is not just about adding and revolving items. It's about calculating the total prices for items, shipping tags, prices, all of it. And most importantly, we will persist the card to stay locally using async storage so that a user card is remembered even if they closed and re open the app. We will achieve this by creating a dedicated redux toolkit slice and utility file for card calculations. So first of all, let's open the terminal and change the directory to front end, then hit the command NPM install at React Native Async dash storage. Acing storage like this. And in the constants, let's add a new file with card utils dot ds. And first of all, it's import acing storage from react react native basing story. Then we will export const add decimals, equal. It will accept a number, and we will return math, round the number, multiply by 100/100, dot two fixed by two. T helper function to format the numbers of two decimals or two decimal places. This is crucial for currency values to avoid floating point and accuracies. Then we will create our main utility function to update the card state with calculated prices and persist. So export, cost, update, cart equal state, and first of all, we will calculate the items price. So cost items price equal state card items dot reduce method, and it will accept accumulator and item and return accumulator plus item price multiply by 100 and multiply by item QTI, which is quantity and divided by 100 and the second argument will be zero. We will multiply by 100 and then divided by 100 to handle potential floating point percussions issues in JavaScript, and we will use reduced method to achieve this. Okay. Then we will format the result to two decimal places. State items price equal, add decimals for this item price. Then we will calculate the shipping price. So const dipping Price equal if items, price greater than 100 if statement, it will be zero. Otherwise, it will be thin. Then state shipping price, add decimals for shipping price. So here, it will be free shipping. If items price is over $100, otherwise it will be thin. Okay. Then we will calculate the tax price. So cost tax price equal 0.15 multiply by items price. Then state the tax price equal Addisimals for tax price. And here, each product will have tax of 15% on items price. Then we will calculate the total price. So cost, total price equal. We will make sure all of them is number, so it's a number, State dot items, price plus number of stat shipping price, plus number, stat dot tax price. Like this. Okay. And finally, we will convert them to decimals. So stay total price equal. Add decimals for total price. Like this. Then we will persist the updated card state to async storage. So right here, async storage, dot set item, and the name of it will be Card and second argument will be JSON dot stringify, this state, and then we will return our state. So because ASNC storage is only stores string, we have to convert the Sess object to Adjacen string. And in the next lecture, we will start to implement card slice and the slices. 42. Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 2: Right there, let's now move to slices in order to implement cart slice. So right here, let's slice the JS, and first of all, we will import create slice from three ducks DS Culkit like this. And import also ASN storage, and we will import our utility function. So let's import update. Should be inside curly packet, update card from constant folder. Then we will define the initial state for the card slice, so const initial State equal. First of all, the card items will be empty square bracket, then the shipping address will be empty curly Blacket and the payment method. Will be paper. Should be small. Make sure it is like this. And the items. Price will be 0.00. And then the shipping price will be also zero tax price. Zero and the total price, zero as well. So this is a placeholder. The actual state will be loaded from a zinc storage. Okay? Then we will define the cart slice. So card slice equal, create slice. And right here, the name will be cart with initial state for this slice, and then for the reducers, let's start to implement them. So set cart from storage. It will be with State and action. And we will return action dot Palo. So right here, the action to explicitly set the card to state from ASNc storage, ****'s action is typically dispatched during the app startup to hydrate the state. And right here, we will replace the entire current state with payload, the loaded data that imported from ASC storage. Then right here, we'll add add to cart with state and action Let's return now or destructure the items for the payload. So Cost. Let's add here coma first. So const, user and rating and NAM reviews. With reviews and also item equal action payload. Here, we will structure the item for the payload in order to implement the add to card function, and we will explicitly exclude user and rating and number views and their views as they are not needed in the card item. So this is not important, so we want to exclude then we will check if the item already exists in the card. So const exist item equal State dot card items dot find method. And with X return, underscore ID, equal item dot underscore ID. Now we will add if exist item. Then we will update the quantity and other properties. So State dot card items equal State card items dot MAP method with X. Sorry, and return Xt underscore ID if it is equal, exist item dot underscore ID, if statement, we will return item, otherwise, we will return X, the different one. So we will replace the existing item with the updated one. And right here, we will add s. If the item is new, we will add it to the card item R. So state card items equal State dot card items with this new item like this. Okay. And next to here, we will update the card calculations and persist to a sync storage via update card utility. So we will return update card from utility for this state. And because update card modifies and returns the state directly and create slice user, we can assign the result. Like this. Then next to here, we will add now action for remove an item from the card. So remove card with state should be inside rockets. And action, and we will return. Now, we will filter out the items with matching underscore ID from card items. State card items equal State card items dot filter with X and FX ID is not equal or just two equal sign is not equal action dot payload. Like this, we will return update card with the State. Okay, then we will implement action to save the shipping address. So right here, it's a save shipping address with State and action. And now we will make stat shipping address equal action dot payload. Then we will persist the entire CAP state as shipping address is part of it. So a storage dot set item with CAD and DSO dot stringify our state like this. Okay. Then we will implement action to save the payment method. So right here, add save payment method. With state and action. And we will return State payment means equal action payload. Then also, we will psis the entire Card state. In storage dot set item with card and we will stringify our state like this. And then we will implement action to clear all items from the card. So clear card items. With state. And then we will return. We will set the card items to be empty square brackets like this. State card items equals empty square brackets. And then we will per set the empty card as well. So ASN storage set item with card and also JSON dot stringify our State. Then we will implement action to completely reset the card state and clear it from the icing storage. So right here, reset card with State. And then we will return we will reset the state into its initial empty state form. So we will make it cost new state, equal initial state like this, and we will remove it from an storage, so ing storage dot remove item with name of card. Then we will return the new state. Okay. And finally, we will export the action creators generated by create slice. So right here, export them like this. So the first one set card from storage, then add to card and remove from card and save payment method and save shipping address, let's adhere A Coma and clear cart items and reset the card equal card slice dot actions like this. And here I showed the cost. Okay. And finally, we will export the reducer for including in redux store. Export default card slice reducer like this. Let's go now to store file and import the card slice reducer, right here, import card slice reducer. Slices and cart slice like this. And right here, we will add cart with cart slice reducer like this in order to use it. 43. Integrating Cart Functionality into Header and Product Details: Welcome back. In our previous lectures, we set up the core card ujik with a redexTolkit slice, and with help of ASN storage persistence, now it is time to bring that functionality to life within our UI. In this lecture, we will integrate the card into the header component to display a number of items and into product screen and with the component of product details card to enable adding products to the card. So first of all, let's start with header component. And right here, we will import use selector from react dash, redux like this. And first of all, Let's add here const card items equal use selector with State, and we will return stat dot card. So we will get the card items from the redux card state. This will automatically re render the component when the card items change. All right. And right here in the handle search, it should be page number and as well here, and here as well. Let's now move back here in this touchable opacity and we'll have on presnder. So let's remove this bracket and add navigation dot Navigate to navigate to our card path. So we will add screens and Card the card file is not implemented yet, but let's make it now, create it faster then add snippet and back again to our card. Then right next to this icon, we will display the card badge only if there are items in the card. So add curly packet and card items lingth if it is greater than zero, and we will show here our code. So start with view with a style equal. Styles dot card Badge. If you remember, we implemented in the header component licture then right here, we will calculate the total quantity of items inside our card. So text with style equal styles dot card badge, text style, and inside it, we will use reduced method in order to calculate the total quantity. So card items do reduce, and to accept accumulator and item. Then return accumulator plus item dot QTI. And the second argument will be zero like this. That's it for the header component. Let's go now to product details, card and let's first of all, we will pass handle to card function and also disable add card like this, we will pass them as props from product screen because we will implement it there. And now let's scroll down right here in the touchable opacity with these styles, now we will add another style, and this style will be disabled, add to cart if it is disabled, and we will add styles dot disable, add to card style. Then in this touchable opacity, we will add one press handler, and this will be handle add to card and for the disabled equal disabled, add to card like this. And for this style, we will copy it in order to implement it inside our style. So right here, let's add it should be like this. And for the style, it will have background color of colors dot, light gray, and opacity of points of it. Let's move now finally to product screen. And we will start by import react, reduct, use selector and use dispatch to dispatch the state, then import add to cart from our slices and cart slice Then right here, we will add use dispatch hook. So const, dispatch equal dispatch, and then we will implement add to cart handler function. So let's go right here and add Cost handle, Add to Cart, equal function First of all, we will ensure that the product exist already. So if there is a product, then we will dispatch the add to cart action with product details and selected quantity. So dispatch, add to cart and for product and selected quantity, the card slice will handle the adding to card items and saving it to a sinc storage. Then we will navigate to card screen, so navigation Navigate to screens and CART. This is a path of it. Then here we will add s statement. If there is an error, addTstt show, and we will show that type will be error and text one error and text two will be product data not loaded yet cannot add the cart the position will be dp and visibility time, we will make it 7,000, it is seven second. And right here, we will implement now disable to card, so const, disable, add to card and make sure the name is the theme of product details card. So right here we'll add if there is a product dot count in stock if it is equal zero, like this, then we will pass these handlers in our product details card. So right here, we'll add handle, add to card, equal, handle, add to card, and also add to card will be equal D add to card like this. And that's it for this lecture, and we will continue in the next one in order to implement the card screen. 44. Building the Cart Screen Part 1: In this lecture, we will implement the dedicated card screen. This screen will allow users to view their added items, adjust quantities, remove items, and see SRI of their order for now because we will implement another functionality later on. We will leverage the card slice action that we have already defined to manage the card state effectively. So let's go to Card GSX and import from RagnativeTuch a city. Also image and flat list and safe area view as well. Then we will import also use Router from Expo Router and import redux use selector and use dispatch and also import from. Let's add here on icons. At Expo Victor icons on icons, and we will import Picker from React Native Pickers Picker. Also import message component. But from components and message and import from slices. Card slice will import both to card and also remove from card and finally import colors from our constant folder. And right here, first, we will start with use Router, so router. Equal. Use router hook. And also use dispatch, so constant dispatch equal, use dispatch. Then we will select card items from the redex store card slice. So cost card items equal use selector state, and we will return stat card. Then we will calculate the total number of items inside this card, so total items equal card items REDUCE Method. And it will have accumulator and item, then return accumulator plus item dot QTI and second argument zero. Then we will calculate the total price of items in the card formatted to two dismal places as well. So C total price equal card items reduce for accumulator, sorry. And we will return accumulator plus item quantity, and the second argument will be zero and all of them dot two fixed like this. Okay. Then we will implement a function to update the quantity of an item in the item in the card. Cost update. Quantity equal product and quantity. And then we will dispatch add to card for this product and quantity. So we will dispatch add to cart action if the item is already in the card. It will update its quantity. Otherwise, it will add it as we implemented earlier, and also we will have function to remove an item from the card. So cost delete item equal with ID then we will dispatch remove from card for this specific ID like this. For now, we will start to implement or render function for each item in the flat list. But before that, let's start first with our main content right here. So this will be safe area view with style styles safe area. And inside it, you will have a view with style equal styles dot container. Inside it, there will be a text with a style equal styles dot ADR. And this will have shopping card like this. Then we will check if there is items inside our card. So if card items Link equal zero, if statement, we will return message with variant of info. And the style equals styles empty message. And this message will be your card is empty. And then we will add a link to go back to previous screen, which is home screen. So let's add here also text with style equal styles dot Link. And this will have also press handler. And we will hire a function with our outer, go back or back just back like this. As a text, we'll go back like this. And else. Let's see where is closing right here. Else, if our card items not equal zero, we will render a view. Let's close it and inside it, it will have style equal styles dot content. Like this and inside it, there will be a flat list, and it is self closing, and inside this flat list will have data from card items and K extractor so that each item have a unique key. Add item and return item dot underscore ID because the ID is unique. And then we will add render item equal render item. But for now we didn't implement it, we will implement it. Next, and content container style equal styles dot list. And show vertical scroll down indicator. We will hide it. So let's make this value to be false. Okay? And we will continue in the next lecture in order to complete the card screen. 45. Building the Shopping Cart Screen Part 2: All right. Right here in our application, if you click on this card icon, it will show a message of your card is empty. Go back and you can go back because our card items dot link equals zero. But if it is greater than zero, it will run this view with flat list. So let's now start to implement this render item function. So let's copy it. And right here, it's a Ts render on item equal. And let's pass the item, and we will return the view like this. So right here, if you click on this product in order to add it to card, if you click on this, you will run a two card handler, and it will navigate you to this card, but we have to implement the JSX now. So first of all, add style equal styles dot IM Container. And inside this item container, we will have image with source equal URI, and we will get it from item dot image. And the style will style dot item image. Like this. Okay. And if you see now, the icon has a badge of one and it said that we have one item or quantity in our card. So let's try to add here, for example, six, and we have already one. So let's add it to card. It is empty now, but if you go back to homescreen and you will see now it is seven overall. All right. Then we will add next to this image, we will have another view, and this view equal style with styles dot item details. And inside it, we will make the item name, click able to navigate to product details. So add touch opacity and distance opacity will have on Press hander. So let's hire a handler. The first one, or it will be router dot push and the bath name will be screens. And product screen. And also, we will add a route. So next to this string, we will add PRMs in order to add our ID, so it will be product ID from item dot underscore ID like this. And inside this teachable ovocity we will have text, and this text will have style equal styles dot item. Nam. And also next to this or next to this touchable opacity, we will have text of style equal stylemce inside it, we will have item price like this. So if we now add a product to card, let's try one and select the value or quantity of five and add it to card. You will see right here it look the price. So let's continue with render item function. And next to this view, we will have now another view with style equal styles dot IM Action. And inside it, we will have quantity picker for each item. So let's add picker component, and this picker will have selected value. It will be item dot QTY and on value change Let's run value and return update quantity with item, and we will make sure the value is a number. So let's add number and inside it, a value like this. And it's not shown anything now. Let's add style equal styles dot QTY BCR, like this. And this picker should be not self closing, so let's add here. A picker like this. And inside it, we will generate picker items based on products count in stock. So let's add here. Curly bracket inside it. Square bracket and dot dot dot array for each item count in stock like this, dot keys. And we will map through this array for each X and return PiR. And this is self closing now. And here should be part IM and with key equal X plus one and the label. Let's make it pecti string inside Kelly placket like this. And we will have variable now. So let's at dollar sign with Kelly placket and X plus one. And finally here, the value will equal X plus one as well. Let's go right here. If you see now, here is the badge become five, and if you try to add this, for example, another five, the overall will be ten.'s back to home screen in order to see it, like we see now, and if you select a value now, like this, it is render. Let's stay here. And then we will implement another button in order to remove item. So it will be next to this picker, we will have touch a Opacity, and this will be with style equal styles dot remove icon and press, we will fire a function of delete item for item dot underscore ID like this. And inside it, we will have on icon and this with name of Trash. And the size 20 and also the color equal colors textrid like this. So if you try now to delete this product, it will delete it and this one also, and it will go back to old empty message to check if it is work or not. I like this. And we will continue in the next lecture for implementing the main card DSX because we have another list of code right here and for the styles as well. 46. Building the Shopping Cart Screen Part 3: Last time, we render item function to see all our items, implementation. And now we will continue with main JSX for the card screen. So right here next to this flat list, we will add view, and this view will be for order section. So it will have style equal styles. Summary, and inside it, we'll have text with style equal styles Summary, title, and inside it, order summary as text. Then we will have another view right here. With a style equal styles dot amaryo And inside it, we will have two text components. And the first one would have style equal styles label, and inside it will be total. And the second one will have style equal styles total. And inside it, total should be small. Total price like this. It seems to be that there is an error here, so I took it out. Okay, we have two fixed here. Let's see a ball. Yes, right here, it should be dot to fixed by two decimals. But the output seems to be the quantity not the price. So Yes, right here, should be item Quanz multiply by item PRC like this. All right. So let's now is another number. Yes, it is work now, very well. All right. So let's continue. Next, we will implement a button for checkout. For now, it will be static, but then we will back to it in order to add its functionality. So let's add touchable opacity with a style equal. For now, it will have just one style. So check out. Button like this and inside it, you will have text with the style equal styles dot checkout text. And we will add proceed to checkout. Like this as a text. And now let's move to styles in order to implement the style of whole screen. So first of all, safe area. At this area not safe area view to have flex of one and day ground color of colors of white. And then for the container, it will have padding of 20 and just like that. Then for the header style, we will have font size of 28 and font weight of bold, and the color would be from colors primary and Margin bottom. Should be margin bottom of 20 as well. Next, we would implement for empty message style. I will have margin top of 20 and bedding of 20 as well and the background color from colors.in for border. And border width will be one and border radius eight and align items center then we'll have that link style. This will have color of colors primary and text decoration line will be under line and font with to be like this. And also for the list, it will have padding bottom of 20 and item, container, it will have flex direction of raw, then align items to be center and like a ground color colors do white and bedding of 15 and margin bottom of 15 as well, and border radius of tin and border with one and border color will be color dot, light gray. And shadow color will be black, then shadow offset. I will have width of zero and height of two, like this and shadow opacity of 0.1, then shadow radius of three and the elevation will be two like this. Then for the item image, style it will have width of 18 and height of 18, and the resize mode will be contained in order to make it fit to this width and height and border radius. Let's make it eight and margin write 15, like this. And for the rest of styles, we will implement it in the next lecture. 47. Building the Shopping Cart Screen Part 4: Come again. Let's continue now for our styles. So we reach this item image style, and let's add now item details. And this will have justify content of center and item name. Here, we will have font size of 18 and font weight of 600 and the color will be from colors dot text color and Marge bottom of five. Okay. And then for the item price, we will have font size of 16, and the color will be from colors to secondary text color. And for the item, actions, we will have flex direction of raw, then align items to be center. And for the QTY picker, we will have a height of 40 and the width of 18, and the color will be from colors dot text color like this. Then for remove icon. It will have margin lift of ten, and adding ten as well. Then we will have SamariT samari will have background color from colors dot white, then padding of 20 and fer, radius of ten. And border color from colors dot, light, gray, and border with off one and margin top, it will be tin and the shadow color will be black. Then the shadow offset, the width will be zero and the height will be two and shadow opacity 0.1 shadow radius of three should be like this and the elevation two, like this. Now for the summary title, we will have font size of 20 and font weight of pull and the color from colors dark gray and textile center, and margin bottom should be bottom 15. And the next style will be for summary row. This will have flex direction of row, then justify content should be space between like this and the margin bottom, it will be thin. And for the label, let's add font size 16 and the color from colors to secondary text color and the value I will have font size of 16 and of 600 and the color will be from colors dark gray like this for the total, we'll have font size and font weight of 16 and here it will be bold then the color from colors dot text Color. And for the checkout button, we will have right here should be with background color from colors primary. Then the border radius of eight and padding vertical 15, align items, center, and justify content center and margin top 15 like this. And then we will add check out text with color. It will be colors dot white and font size of 16 and font weight of bold like this. It seems that we miss to add item name right here. So let's go back above in the Inder item function. And right here, it should be item name like this. But the problem now is that the item name is too huge, so that Rush icon and the dropdown is gone. So we will fix this by Adhet split Method to split it, and then slice to take only first two words, and we will join them back again and make sure there's space between the quotation. And also, we will add here plus item dot N dot split, and we will add also quotation, and then we will add a statement if this length greater than two and add it will be like three dots, else, it will be empty string. So if the product name is greater than two words, it will take only the first two words and then we'll add three dots. Otherwise, if it is two words or less, it will be empty string, so the will be the same. Okay. But it seems like the thrash icon also go extreme right. So let's make it this to be 14. And also reduce the item price to be 14. So it is done now. Also, we miss to add here. In this order summary, we should have items. So let's copy this review and paste it below order summary and change it to be items and the style for it, it will be value. And also this will take value style. And then right here, we will add total items. Let's close this curly placket to be that we have only one. If we take now, for example, eight, it will be updated to eight like this. Also, this box should be at the bottom of the screen. In order to fix this issue, we will go back right here in this container and add flex of one and also Right here, we should have border color to be colors dot info border. And then we will add also style of content. And this will have flick of one. And let's add here a comma. As you see, it is fixed and become last or at the bottom of this screen. Also for the item details, you will add here flick of one. All is good now for this lecture, and we'll see you in the next one. 48. Setting Up User Authentication (Auth Slice and API Endpoints): Hello everyone in this lecture, we will implement the foundational pieces of user authentication in our application. This involves creating a widexTolkit slice for authentication state, which is slice, and defining the necessary API endpoints, which is API slice for user login registration and look out using React toolkit query. So let's start with user API slice. So right here, the slices, let's add a new file, user API, slice do Js and first of all, we will import the base ABI slice, so import ABI slice from slice like this, then import users underscore URL equal or from constant URLs. And first, we would inject the endpoints into the base ABI slice. So const or before that export const user API slice equal API slide inject endpoints. This will allow us to define the specific ABI interaction related to the users. So right here, the endpoints will be with Builder and the builder is an object that provides method to define different types of endpoints. So first of all, we will define a login mutation end point, login and it will be builder dot mutation. And if you remember in the product ABI slice, the mutation means that the method is post. But if it is a query, it will be Git and mutation also for the boot and delete. So first of all, we'll add here query. With data, and then we will return like this, and the query function will retain an object describing the request. So the URL will be from, let's add Dc tex and URL OS because we implemented in the user routes in the back end like this and the method will be post request and the body will be the data. Like this. Data, it is for credentials like email and password and so on. And right here, we will define a register mutation in point. Register, and it will be builder dot mutation as well. Add here coma and the query will be data and return now the URLs acti with users underscore URL, just like that. And the method will be post as well, and the body also data like this. And we will define a lookout mutation end point right here. And it's also Builder dot mutation and add query. And then without data, we will return should be like this Brackets inside it, Key bracket and the URL. Also Bac tech ad users underscore, URL slash Lookout, and the method also post. Now we will export the hoc that generated by react or reduced toolkit, query for each defined endpoint. So export const it will be equal user API slice, and here we will add use in mutation, use Lou mutation and use register mutation like this. So these hooks automatically handle loading states, error handling, and data fitting or mutation. Okay. Let's now implement another slice right here, the slices add slice, the Js like this, and we will import create slice from redux G as toolkit and also import a zinc storage at react Native a zinc storage. And here should be at C. Then we will define the initial state for authentication slice. Const initial state equal user info, it will be first null. So user info will hold the logged in user data with token, name, email, and so on, and it is initialized to null because we will try to load the data asynchronously from ASNC storage. Then we will create the authentication slice using create slice. So right here, const Os, slice equal, create slice with name. It will be OS and with initial state. So this is the name of the slice. We will use it in reduct for action types, and the initial state right here, it is defined above. Then we will add next right here, reducers, and the reducers are the functions that define how the state changes and responds to actions. So set credentials should be E like this with state and action. And we will return State user info, will be action payload. So we will update the redox state with user info. Then we will add async storage dot set item, and we will name it user info. Like this and we will stringify action dot Pload. So JSON dot stringify action dot Pload like this. So we will persist the user info to ISC storage, so it is remained logged and even after a restart. Then right here, we will add reducer or logging out a user. Log out with state and action. And we will return now State dot user info equal null and ASN should be here async storage dot clear like this. So we will clear the user info from redux State and clear or data from async storage to look out the user completely. All right. Then right here, we will implement another function. So export const load user info, equal Async function and we will return. This is helper function to load user info from ASN storage when the app starts. So try catch error. And first of all, we will retrieve the data from ASN storage, so const user info equal await async storage dot get item with user info. And then we will parse the store JSO string back into JavaScript object. So return user info if it is exist to JSO dot parse user info. Otherwise, if it does not exist, it will be null. And if there is an error, we will const load this with message error loading user info from async storage. Like this and second argument will be the error itself, then return null, like this. Up next, we will export the creators generated by creat Slice. So right here, export const set credentials and look out from Slit Actions and export default authsl dot reducer. And we will continue in the next licture in order to update ABI Slice file and also the store file. 49. Persisting Our Redux Store - Integrating Redux-Persist for Auth and Cart: Welcome to this lecture. Up until now, our redux store holds the data only while the app is running. If the user closes the app, their card items and login status would be lost. In this crucial lecture, we will implement redux persist to save parts of our redux state, especially user authentication and information and chopping card to async storage. This means that when a user reopen the app, session will be maintained and their card will be still there. So for example, right now, we have a quantity of this product. So if we refresh the app now, as you see, it is disappear. And if you click, you will see empty message. So let's implement it right now before we go to store File. Let's add here in the ABI slides, the tag types, let's add also for the user like this, and now we will go to store JSFle. Let's first install redux persist, open the terminal, and train the director to be in front end and hit the command and Mi redox persist, like this, Headiner. Now from redux toolkit, we will import also combine reducers, then from redox persist we will import it close it first. And right here, we will add persist store and also persist reducer. Then we will import ain storage from black native zinc storage. And also, we will import our oath reducer. From slices and slice. First of all, we will configure our persist, reduce, so const, persist, config, equal name of root. This is the K under which the state will be stored in our ask storage, and Root is the common name. Then we will specify the storage engine to use, and in our ques, it will be a zinc storage. Should be small right here like this. And then we will add white list and this with oath and our card. And a white list is an array of reducer name whose state we want to persist, Oath persist the user login information, and card persist the shopping cart items and calculated total and that's it for our config. Then we will combine our individual reducers into a single root reducer, so cast root reducer, equal combined reducers. And first of all, let's add ail dot reducer path api, slice dot reducer. And then we will add our authentication reducer, so oath oath, reducer and card from card, slice, reducer like this. And then we'll create a persistent reducer by rbping the root reducer with persist reducer. So right here, let's add persisted reducer. Like this equal persist reducer with persist config and root reducer like this. And then we will configure the redux store. So for here from configure store, we will change this to be reducer will be persist. Or this is. So let's copy it and paste it right here like this. And for the middleware will be same as default middleware. But inside this, let's remove this and middleware add for get default. Sorry. Middleware and return get default Middleware. So cereal. Sabel check. I will be we will add ignore actions. And right here, we will ignore persists persist capital and also persist. Let's copy it and paste it right here, slash rehydrate. Like this capital, and finally, persist register like this. So now we will till a serial check to ignore these specific actions. The first one is action dispatched when the stores start persisting and the second one dispatched when the state is loaded from the storage, and the third one is the action dispatched after reducer registration. Okay. Then right here, we will add dot concat for Abi slice dot middleware. So we will concat the Dulcet query ABI middleware. And then right here, we will make def tools to be true. And then we will create a per sister object or a store right here. Let's add export const per sister. Equal persist store with our store like this and export default store, as well as keep it like this. Then we will go to Root Layout, and we will import now from the store at here persist sore, and we will import also persist, gate from reduct, persist, integration react. Then next to this provider, we will add persist Gate. I'm going to close it and make it next to this toast like this, right here, we will pass loading equal null and per sister, we will pass per sister like this. All right. Let's now try it out in our application. So right now, we have eight quantities for two products. So let's embed the terminal and reload our application and as you see right here, the card details still the same, so it has worked very well. 50. Implementing the User Login Screen Part 1: In this lecture, we will build the complete login screen for our application. This screen will allow existing users to securely sign in using their email and password. We will integrate the redox toolkit query, use login mutation that we implement in the slices to handle the API calls for authentication and update the redox state with user credentials, using set credentials, and manage navigation based on the user login status and any redirect parameters. But first of all, if you run the back end, you may see this issue, which couldn't connect to any server in your MongoDB Atlas cluster. And if you go to MongoDB, you will see this message with A IB address not added, you will not be able to connect to database from this address. Either you can click on this to add current IB address, or also you can go right here to Network Access and edit this one and select allow access from anywhere like this and confirm let's try now after the status changed. This will be new IB address, and it is open. So if you go now for the back end and run the server again, you will see the Mongo to be connected successfully. So let's now open our app And first of all, we will go right here to profile screen, and we will add a link. So right here in the profile, first of all, we will import use Router from it is from Expo Router. And then right here, we will add Concouter equal. Use Router, but without Kelly brackets like this, and we will implement handle Login Pres. So let's add handle Login, press equal function. This will push our route to Login screen. And let's create it. Now, this screen in the screens, Login screen dot Sx and add our Snippets now. Then let's add right here text and add Login. And press handler, add handle, L in press. And let's make some styles right here with margin, margin 15. And if you click on this button now, you will be redirected to Login screen in order to see it. It is temporary for now. So let's go now to Login screen and start to Import, first of all, text input. And touchable, obesity, and touchable without feedback to dismiss keyboard on top outside and also keyboard should be at coma, keyboard, and image like this for displaying a logo. Then from react, we will import use state and use effect. Then we will import from Exporuor link use reducer use Router, sorry, and use local search BAMs. Then we will add our redux box, which is use Selector and use dispatch. Use Selector from react dash redux and also use dispatch and also import use login. Oh let's make it for now use login and import from slices Users ABI slice. Use login mutation and import set credentials slices OS slice. And it's completed now credentials like this and import font awesome. Font Awesome six at Expo Victor icons slash Let's Copy it and put it right here and impart Toast from the Act Native toast message and import form container. We didn't implement this component now, but we'll implement it after we reach this. Import also the colors from from our constant folder, nuts component, the constant slash utils. And in order to solve this error, let's just create form container and components the JSX and add our snippets. And here we would add form container bass. All right. Then let's start with set variables for email and password input fields. So const, email and set email, equal use state of empty string and const password and set password, use state of empty string also and Cost const of show password. And sit, show password equal, use state of force. So this is the token password visibility in the put field. And also, we will implement use dispatch and use outer hooks, const, dispatch equal use dispatch and C outer equal use outer like this. And that's it for this lecture, and we will continue in the next one. Oh 51. Implementing the User Login Screen And Form Container Component Part 2: All right. Let's continue with our login screen. So now we will start to implement redux Tkt query mutation for login. So cons login and also is loading equal use login, mutation. And then we will select user info from the redux oath State to check if a user is already logged in. So constfo equal use selector with the state. And we will return stat dot. Okay? Then we will hook to get Local Search PAMs. So first, local search Rams equal use local search params. For example, we will use redirect URL to be passed from other screens, and this will have implementations in some screen like in the card or in shipping and so on. And then we will determine the URL redirect if redirect Params exist. We will use it. Otherwise, the default will be the homepage. Const redirect equal local search prams redirect, or it will be homepage like this. Okay. And now we will use use Effect. So we will effect Hook to handle redirection after successful in or I already looked in user. So if there is user info, then we will add router that replace and redirect, and the dependencies will be user info and redirect and also Router. Like this. Then we will implement handler for login for submission. So runs submit handler equal Async. And then right here, first of all, we will dismiss our keyboard in order. If the submit button is brisk, then try cache error. First of all, we will call the log in mutation with email and password. So C is equal await login with email and password. Dot wrap because we will use wrap with redux toolkit query to unwrap the promise and easily catch errors if it is exist. Then if login is successful, we will dispatch the sit credentials action to save user info to redux State and async storage. So right here, we will dispatch set credentials for our response, so dot response, and then router dot repress if we have redirect. Okay. And for the errors, if we have error, it's at toast dot show with right here, we will have type of error and text one will be og in failed and then text two, we will display errors. So right here, if there is error dot data dot message, because we have in our back end some error implementation or error error. And otherwise, we will add an expected error occured like this and the position will be tub and visibility time will make it 7 seconds like this. And right here, we will add function to toggle the visibility of password and the input field, so const, toggle password. Visibility. Let's see what's error equal function, and then we will set show password to be not show password like this. And now let's move on to this form container in order to implement it. And the form container is a component that have some styles. We will use it because we will have more than one form implementation in our app, so we'll wrap it this component and implement it on each form if it is needed because we have register screen and login and update profile and so on. All right. So right here, we'll add dimension. And keyboard, avoid view and platform, and also scroll view. All right. Then we will add right here, const with equal dimensions dot get for window. So we will get the screen width for responsive sizing. And this form container function will accept or have children. And for the return, let's remove this and add keyboard, avoiding view, and inside it, we will have behavior. Attribute with platform dot operating system. If it is equal IOs, it will be bedding, and otherwise, it will be height like this. Then the style equal styles keyboard avoiding give you, and this would be small like this and the keyboard vertical offset. It will be dependent of the platform, so platform operating system. If it is equal, IOS, will be zero. Otherwise, it will be 20, like this. And inside this keyboard, we will have scrolllyVew, and this ScrodlyVew will have content container style equal styles scroll container. And also keyboard should persist tabs. It's equal handled and also show vertical scroll indicator. We will make it falls. Like this. And inside this scroll view, we will pass a view with a style equal styles dot container inside it, you will have another view, and this review will have style equal styles dot inner container. Like this and it will have children like this. So in the next lecture, we will implement the style sheet for our form container component and back again to in screen. 52. Implementing the User Login Screen Part 3: All right. Let's now start with our styles in the front form container component. So keyboard avoiding view, it will have flex of one right here, scroll view or scroll container like this. I will have flex grow of one and justify content to be center. Then for the container, we would have flex of one, then justify content. Center and align items should be items, center and padding horizontal 20 and the background color would be from colors dot white, like this. And also the inner container style will have width of 100% and max width of 400 and padding horizontal to be 16, like this. Okay. That's it for Form container component. Now let's go back to Login screen. So here in our main DSX, let's return now to apen without feedback and inside it. Let's add on press handler, equal keyboard dot DSMs. Then inside it, we will add our Form container wrapper. So let's go to login screen now and inside it, we will have the logo and slog and section. So let's add a view. And this view will have style equal styles container. And inside the view will have image container or tag, then source equal require dot, dot, dot slash and from assets Images logo dot Bn G, like this. And the style, it will have styles, equal styles dot Logo. Let's close it. And also we will have right here, text or our slogan. So let's add style equals styles dot slogan and inside it, one login and endless choices. Then after this view, we will have now Login screen title, so text and add sign N and inside it, we will have style equal styles dot title like this. Then we will have now another view, and this will handle the input el style equal styles dot form group and inside it, we'll have text with email address with style equal styles dot Label And we will have now text input, so text input, and it is self closing. And inside it, style equal styles dot input. And place order will be Enter, email, and keyboard type will be email address, then auto capitalize will be none. So we will prevent autocapitalization for email because it is not approved or we don't want it. So the value will be email as variable here. At cli brocet instead of quotations and unchanged we will add set email, so we will update the email state on the text change. Then we to this view, we will have password input field with dogle visibility. View and style equal styles dot password input. And right here, we will have text with style equal styles dot label, and here we have Asword and view and inside it, we'll have style equal Styles password, input, container. And inside this review, we will have now text input, so text input, and it is also silvic closing. Then we will have style equal styles password input, and the placeholder enter password. And secure text entry, it will become Not show. Password. So we will hide the text if the show password is false. Then value will equal password as variable and unchanged text will have set password, like this. Then right next to this text input, we will have touchable opacity. And right here, you'll have press handler equal password visibility, and the style equal styles dot password Toggle like this. Then as a text right here, we will add Kelly Brackett because we'll add some variables. So if it is show password, it is true, we will add icon from Font Osam and the name equal I, and the size equal 20 inside curly brackets and also the color will be equal colors primary Ng. Next for the s, we will have here s and we will add brackets. So if the show I equal when password is hidden, so let's add another form sum right here, and this will have name equal I and the size equal 20 and finally for the color equal colors primary as well. That's it for this lecture. We will continue in the next one. 53. Implementing the User Login Screen Part 4: All right. Last time, we reach here in the TgilPassword visibility. So let's continue now with our login screen. So in this or after this view tag, let's add touchable opacity and this button will be for sign in. So touchable opacity and we will add the style equal styles button. And there will be two styles. So let's add square Blacket. And also, if it is loading, and we will add style button, Dis like this. All right. Also, we will add on press handler, and we will call submit handler that we implemented earlier and for disabled equal if it is loading. So if its loading is true, this button will be disabled. And inside it, we will have here. Also, if it is loading, we will show activity indicator. With color equal colors primary. Else, we will show a text with style equal styles button text. And inside it, we will sign in as text. All right. Then right after here, we will add a link to register user if they didn't have an account. So view with the style equal styles dot Register container. And right here, we'll have a text with a style equal styles dot register text, right here, we will add new user as text, and then we will have link and this link we will have right here a chif attribute equal path name, and the path name will be slash register screen like this. And also, it will have params. So we will add redirect if it is not equal s redirect s. It will be empty brackets like this. And here I should have question mark because it is AI statement. All right. And this link will have style equal styles register Link. And right here we'll have register. So we are done now from SX. Let's implement now our styles. All right. So right here, we'll have Logo container. And this will be align items to be center and margin bottom. It will be 30 like this. And we will have logo width of 150 and the height as well and resize mode, it will be contained and margin bottom with thin like this. And we'll have here slogan with font size of 24 and font weight of bold or sorry, it should have shouldn't have font weight. I'll have color. From colors dot secondary Text Color and text align it will be center like this. And right here, we will add title with font size of 24 and font weight of bold y. And margin bottom of 16 and text the line to be center, and colors will be from colors Text Color, like this. This logo should be in the center. So let's see what have This a view. Okay, here should be logo container. Sorry. And let's remove this. Okay, like this. And let's continue now. So for group, it will have margin bottom of 16. Then for the label, we'll have fun side of 14 and font weight of 500 and for the color, you'll have from colors dot text color and margin bottom of eight. All right. Then for the input, we will have width of 100% and budding vertical of ten, and budding horizontal of 12 and width one border color will be like this and border radius, and background color from colors dot white. And the color will be from colors text color like this. All right, that's it for this picture. We will continue to implement other styles in the next. Oh 54. Implementing the User Login Screen Part 5: Right. Before we continue, just reduce this slogan and title font size because it seems to be very huge. So let's make this 18 and this to be 22. And let's continue now. So right here, we will have password in butt container with flex direction of row and then align items to be center and border with one and border color will be same as above with this color and border radius, eight, and the color or background color, same as this solid coopt and paste it right here like this. And now we will have right here, last word input with flex of one and padding vertical, will be ten and padding horizontal 12, and the color will be colors dot text color like this. Then right here, we'll have password togil with padding of thin and position absolute, and right, will be five, so to shift it to lift, and also right here, button style will be width of 100% background color. From colors primary and padding vertical of 12. It's cops and padding horizontal to B or sorry, here should be vertical. And also, you'll have padding horizontal to be eight and order radius of eight align items to be center, justify content also center and margin tub to be 16. Here it should be margin tube right. And also, we will have button disabled style with opacity of 0.7 and button text, it will have color Okay from colors dot white and font size, it will be 16 and font to of bold, like this. Then right here, we'll have also register container for register link, so padding vertical, 12 and align items to be center and margin to also ten. And for the register text, we will have font size of 14 and the color from colors do secondary text color like this. And right here, we'll have register link. This will have color of colors primary to make this register text have primary color and the font weight, it will be bold text decoration line. It will be under line. It seems to be some box right here in our code. So let's go up and fix it. So first of all, we will go here in this textmp for email and for auto capitalize, we will set it to be none like this. And here we will make this unchanged text. And also for the password right here, we will make this to be form a group, it is fixed and here, it should be styles dot level. Let's see what else. All right. Then for activity indicator, in order to make it visible, we will make its color to be white. Let's reduce or keep it like this. And let's see if there is anything else by here and password input. Let's move up. Yes, all is good now. So let's go to header component. In order to see when we register or sign in, we will go redirect it to the homepage, and right here we will have welcome text and the Welcome text, it will be Welcome and the name of the user. So let's go right here in the header and then selector hook. Right here cost user info, equal U selector with state and it will return stat dots like this. And let's scroll down right here in this review, if you remember, we implement it as a style, but we keep it empty. So let's now add here if there is user info, and we will add backticks with Wilco And here we'll add user info dot name, and we will only take the first name. So let's add or should be right here dot split, add empty string with space and dot or just square bracket and the first name. And also, let's add here mog. So we have mood you like this. And let's go now the URLs in order to export const users underscore URL equal API URS. And in the store JS, right here, please make sure it is ignored action, not ignore. Let's go now right here and try to log in. So if you remember, in our back end, we add admin user with this password. So let's add it admin at gmal.com, and the password a plussmall in 125 and like this, so let's now try to sign in. All right, as you see right here, text of welcome Admin and log in implemented successfully. And if you try to press in this login because we are already login, it will navigate us or redirect us to login screen. All right. So let's make another test right here. So let's close our Expo app and go right here in the sittings. And apps in order to delete expo go data and try to log in with wrong details such as email or password. So let's search for storage, and let's clear the storage and also the cache. And let's open it again. And right here, let's Android with A. Okay. Now we are not logged in, so let's try to log in again. For example, let's make the Admin email is correct, but the password is not. So it's like this. The login is failed, as you see right now in this message. But here in the text too, it does not show our message that we implemented in the user controller in case of wrong email or password. So in the next lecture, we will implement another middleware, which is for error middleware. Okay? 55. Centralized Error Handling Middleware: Hello, everyone. In this lecture, we will implement a centralized error handling middleware for our Express GS packet. This middleware will catch errors thrown during request processing and send a centralized user friendly error response. This is crucial for maintaining a robust ABI and preventing sensitive error details from being exposed in production environments. So right here like this in this login screen, if you sign in and withdrawing credentials, you will see this error. It is not understandable, so we will make it much better. So first of all, we will remove this error and go back in the middlewares, add a new file with name of error handler dias. So first of all, let's at our function, error handler, equal error and request response, and also next. So first of all, we will determine the status code for our response. And if the response status code is still 200, which is okay, it is mean error occur. Okay, so cost status code equal s dot status code, equal 200 if statement, it will be 500, else, it will be rest status code like this, but no specific status was set yet, so we default it to be 500, which is internal serval error. Otherwise, we would use the status code that might have been set earlier in our request chain. Then we will set the HTTB status code of the response. So rest status, with our status code like this, then we will send a JSO response with the error message and stack trace if not in production. So res dot JSON and right here, we will add or define message. It will be error message like this. So this message will be visible to the client. And in the development, including the stack trace for debugging purpose, and in production, set the stack tunnel to prevent sensitive internal details from being exposed. So right here, let's add a comma. Then the stack right here. Process, sorry, process, ENV node underscore E and V equal if it is equal production. It will be null. Otherwise, error dot stack like this. So let's now add node environment right here. And equal make it production like this. And's back again right here. Then we will export our function, so export default error handler. And right now, we will go to serve our file in order to implement it and use it. So import first error handler from our middleware. Then right above this ab to listen, we will add ab to us error handler like this. And this is very important. Error handling middleware must be blessed after all route and other middleware. So Express will automatically route error to this middleware if they are passed with next error. Okay? So then let's go to back end because we add data here in the environment, we should restart our back end code, so let's run it again and refresh our front end. All right. Let's try again to Log in failed message. So for now, let's make email is correct and password incorrect. As you see right here, it is wrong, email or password because we set this message to be in the user controller, which is right here. Okay. So if we add the correct password and make the email is wrong. It will look the same message. So now let's login with our correct credentials. And as you see, it and redirect us to homepage with this will come text for Log users. 56. Building the User Registration Screen Part 1: In this lecture, we will create the user registration screen to enable new user to sign up for our application. We will capture their name, email, password, and including account firm password fear for validation. This screen will utilize redux to get the query, user registration, mutation hook to communicate with our registration API endpoint, and upon successful registration, it will update the redux authentication state and redirect to user. So just like our login screen. First of all, let's go the sittings in order to remove Epogo storage because if you remember, we cannot register if there is already a user signed in. So let's go right here and search for Storage and cache. Let's clear the storage and the cache as well. And then we will back. And right here, let's open Android. Emulator. And go to profile screen right here, we will add a new text also, but this will register, and we'll have handleterPress, in order to navigate us to register screen. Make this. And now let's create our register screen and the screens. So past it to Sx and add our snippets for now. So let's try now. And here we should handle register, press and try it again. As you see, we are navigated to register screen. Let's close it this profile and keep open login screen because we would use some code inside it. So first of all, all these are to be their size from this, use selector above, let's copy it and paste it right here. Then for this. Let's paste it, but we will import use register mutation in this case, and also copy the others as well without any difference. Okay. Let's now set our variables. So we will have these three. So let's copy them and paste it right here. And also, we will have cost confirm password and set, confirm password, equal use state of empty string like this. And also, we will have Show, confirm password. So right here, show, confirm password, and set, show, confirm password, equal, use state of empty string as well. Okay. And right here, we will have cons name and set name equal use state of empty string. And for router and dispatch, we will copy them both, like this. And then for these, let's copy them right here at here instead of login, it will be register. Like this and form use register mutation and for local search prams, and for the redirect, it will be same as them and also for the Ue Effect Hook, is spaced it. And for the submit handler, we will have now let's implement it circus, submit handler. Equal async function. And first of all, we will use this keyboard dot dismiss. Then we will check if password match before attempting registration. So if password, not equal confirm password, here it should be a small. And let's fix this right here. Then we will add toast message, toast to cho, and we will have type will be error and text one error and text two password do not match, and the position will be to and visibility time. We will set it to be 7 seconds like this. Then right here, we will have return this retire will stop the submission if passwords do not match. So right after this curly bracket, we will add dry catch error. And in the dry, we will have const response equal At and then register with name, email and password, and it will equal or dot rap like our Login, like this. So if the registration successful, right here, we will dispatch set credentials with our response like this. Then router dot replace if we have redirect. Otherwise, it will redirect to home page. So if there is an error right here, let's copy this. And paste it right here. I be error, registration. Failed like this and text two, it will be a message or error tit error and for a position, top and also visibility time as well. And also, we will have this to visibility and paste it right here, and we will continue in the next lecture to start with our main GS. 57. Building the User Registration Screen Part 2: All right. Before we start with GSX implementation, we have right here also another Toge function, so CTGer confirm password visibility. Qual function, and then we will return set, show, confirm password to be not show, confirm password, like this. Then for the JSX, let's of Login and close it for now and put it right here. And let's start to add also, if we have any addition. So for the log container, it will be the same. For the sgan, let's add another one. Like this. And for the title, we will have register. And first of all, let's copy this text and text input and put it above right here. And right here we'll have name, and here, enter name and the keyboard type, let's remove and also for the auto Capiz we don't need this and for the value, it will be name and changed text, it will be set name like this. Okay. Then for the email address, it will be the same. And for the password, also the same but for the confirmed password, let's see what we have to do. So right here, this is for password. Then after this, we will have a view with style equal styles dot form a group as well. And inside it, we will have from this text into the touchable Obacity, let's copy it and paste it right here. Let's see if there is an error. All right. Let's close it like this. And now we will add here, confirm password, and for the place order, it will be confirm password. And right here, secure text entry, to be nut show confirm password. The value would be confirm password, and changed it will be set, show, confirm password or sorry, it would be set, confirm password like this. And for the styles of this touchable bust it will be the same and also for the right here. But here we should show, confirm password like this. And right now, we will have our styles or before that, for this we will have right here, if it is loading, we will add register like this. And also, instead of new user, let's add already have an account. Then we will make a link with login screen, and also for the Brams if there is any redirect like this, right here, we will have login like this. All right. Let's reopen the login screen again and we will take from it all styles. Then paste it right here like this. And let's see what should we edit or add in the style. Let's just go up because we have to fix this issue. So in the name input field and text right here, we have to copy this and paste it up here and close it with a view tag, and we will remove this to fix the margin like this. Because each text and input field will be in separate form a group style. Also, we have to fix this togal because it seems like we didn't add the corresponding on press handler. So right here in this touched password, it will be tagger confirm password visibility. So let's see it. Now, if it is worked or not, yes, like this. And this it's on press render. For the styles, I think you can keep it like this because there is no issue with the styles. Let's now try register screen functionality. So first of all, add a name and email then we will add a short password like this and also for the password confirm, let's try to register to see what's L. Okay, registration fail, minimum eight characters for password, upper, lower number, and symbol. And for now, let's add long password that different values. Like this. So let's try to register. Password do not match to retain an error. And if we add correct password value, let's now try, as you see, it work very well, and that's it for our register screen implementation and see you in the next lecture. 58. Integrating Product Reviews Section Part 1: Lecture, we will enhance our product screen by integrating the protect review section. This component will display existing customer reviews for a product while we are setting up the foundation for adding new reviews, the actual art review model functionality, which depends on user authentication will be for later lecture. We will focus now on displaying reviews and preparing the necessary data for our redux store. So first of all, go right here and product ABI slice and right next to this slice we will have now create review with Builder dot mutation because the method is post, and right here, you'll have query with data and then return the URL, the URL will be Actix and right here, we'll add product underscore, URL data dot product ID, Reviews like this. And here we will have the method will be post request and the body from data. Then right here, we'll have invalidate tags with square bracket for product schema. Then we will go now in the component and create a new component right here, it will be product review section. Dot JSX, first of all, you will import touch ap pasity from react native, and also we will import message component messages, and also we'll import rating component from rating, and the colors as well. From constant file. Then right here in product review shack section, it will accept or pass props of reviews user info and on review press like this. Then we will return a view with the style equal styles dot review section. And let's remove this text and add text with style equal styles dot section title. And right here will be customer reviews. Then right here, we'll add curly brackets. If we have reviews that Linked is equal zero. So if we don't have any review, we will show message component with variant of info and right here, no reviews yet, else, if we have already reviews, we will show a view, tag. Let's close it. And right here, we will have or without any styles. But right here. We will map throw reviews, reviews, dot map method for each review, and we will return. Now, review with style equal styles dot Review Card. And let's close it. And the key because it should have a unique key to be review dot underscore ID. Okay. Then we will have a view, and let's close it. And right here it will have style equal styles dot review header, and inside it, you'll have text and with style equal styles dot Review N and right here we will have review review dot name like this. Then next to this text, we will have rating component and the value equal review rating. Make this. All right. And next to this closing view, we will have text. And right here, style equals styles dot Review. Date. And right here, we will have new date for review dot created that dot to local data date string like this. And next to this closing text as well, we will have text. And with the style equal styles dot review comment. And right here, you will have review dot comment to pass a comment out. Then right next to these closing brackets, you'll have User info. If there is a user info, we will show touchable opacity and this touchable opacity will have style equal styles dot ad review button like this and inside it. Also, we will pass inside this touchable opacity on Press handler. On a review press. Here it should be small E. Okay. Then this handler will implement it in the product screen. Okay? So right here, we'll have text and the text with a style equal styles dot add review button text and inside it, write review. Like this. Then right here, else, we'll add message with variant of info right here, please login to submit a review. Okay. Now, let's start with style of our component. So for review section, it will have a ground color of colors not white and or the radius of 12 padding of 20 and also shadow color will be black and shadow offset the wet zero and the height five and shadow opacity of 0.08, shadow radius of ten, and elevation will be two. Then for the section, title, font size of 20 and font weight of 600. And the color from colors dark gray and margin bottom. 15 and text align will be center. Then for the review card, it will have background color from colors of white. Then order radius ten, and padding of 15 margin bottom. It will be thin and border with one and border color from colors that light gray, and shadow color will be black with shadow offset with zero and height of one, and then the shadow opacity will be 0.05 and shadow radius of two and elevation for Android two. Then for review header, it will have flex direction row and justify content space between and align items center and margin bottom to be late. So we will continue in the next lecture 59. Integrating Product Reviews Section Part 2: Back, Let's continue with our styles in the protect review section. So right here in the review name, it will have fontut bold, and the color from colors dark gray, and the font size will be 16. Then review the with font size of 13 and the color from colors to dark gray. And for add a review button, a background color from colors primary and order radius ten, padding vertical 12 line item center, and margin to 20 align self center and padding horizontal of 13 and shadow color will be black, shadow offset with width of zero, and the height will be two. And also shadow opacity 0.2 shadow radius of four and the elevation two. Also for add a view button text, you'll have color from colors to white and font weight, bold and font size 16 like this. Now let's go product screen in order to implement it. So first of all, from product API slice, we will import use okay. But before that, we have to export the creative review. So use create review mutation and import it right here. Okay. Then we will import our component, so import product review section from components and also we will add user info or destructure it cost info, equal use selector, with state and return stat dot O. Okay. Also, we will assign for now just this state review model open, and set is review model open, you cal use state, and for first, it will be false. Zen. Or move to add our component, I see right here this error message is not provided right here, so please make sure it is provided, all right. And let's open our product screen. Then right next to this, we will have product review section with reviews equal reviews and user info, equal user info and on ad review press. We will make set as the review model to be true. Here, it should be product dot Reviews. Let's check it now. As you see right here, customer reviews. For now, this product do not have any review, and you can write a review because right here, we are registered. So let's try now to remove our user info from the storage clear it and clear the cache and back again to Expo, open the terminal and open Android Miltor so right now we are not registered. So let's see what we'll see right here. Yes. Here is no review yet because there's no review on this product, but also you will see right here, please login to submit a review. Okay. So only registered user can submit reviews for products. So in the next icture we will start to implement the review comp 60. Implementing the _Add Review_ Modal and Functionality Part 1: All right. In this lecture, we will start to implement product review functionality on product screen. So we will introduce and implement the ad review model component. This will include managing its visibility, handling user input forating and comment and connected it to our Bend ABI to submit new product review. So first, let's login now. And for the password. Okay. So the write review pattern shown now. So let's go to components and create a new file with name of add review. GSX, first of all, we will import Ta chap. Opacity and model, and also text input, and activity indicator. And from on icons, so import on icons from expo vector icons on icons and import colors from constant Utils file. And this ad review model will accept these props. So first one is visible and on clothes and rating and set rating, and comment. All of these will be like US State and also set comment. And on submit, this will be a handler in our product screen and also as loading, we will get it from us create Review. And first of all, right here, we will determine if the submit button should be disabled. So cost is submit disabled. Equal if there is no rating or rating equal zero or no comment dot TIM or is loading. So in these cases, our submit review will be disabled. Okay. And right here, we will return now model and right here that add visible if it is visible and transparent, equal true to make the background when the model is open to be transparent and animation type to be fade and on request close, it will be on close. And inside it, we will have view where the style equal styles dot model overlay. And inside it, you will have another review with style equal styles dot model content. And right inside it, we will have now closed button for the model. So touchable obacity with style equal Styles model close button. And on a press handler will be on close. And inside it, we will have on icons with name equal close circle and size of 28 and the color from colors primary like this. Okay. Then right after this, topple Obsity we will have now text with style equal styles dot model title. And inside it, we'll have text of add your review. And right below it, we will show a loading spinner if the review is being submitted. So right here, we'll have S loading and we will show activity indicator with size of small and color from colors dot primary. Okay. And right next to here, we will have now d rating selection section. So view with style equal styles dot Form group. And inside it, we will have text. This text will have style equal styles dot form label. And right here we'll have rating as text and right below it. There will be view with a style equal styles rating selection. This review, we will map over 1-5 to create star rating buttons. So right here, let's add Kel bracket and inside it, square bracket with numbers 1-5. And here we will map through these numbers with our value and return touchable opacity. And here, the key equal value because each button should have unique key because we will map through it. Also on press handler function, and right here, we will set rating with our value. So we will update the rating state, and it is style equal styles dot rating star. And inside this vertib opacity, we will have on icon for stars. So on icon. And here we will have the name. And in this time, the name will be inside variables. So if the rating greater or equal than the value, if statement, it will be star, else, it will be star outline. Okay. Then the size equal 24 and the color, it will be dependent for the value. So rating, if it is greater or equal value, it will have color dot primary. Otherwise, it will have colors dot light gray. Okay? Then right next to these two closing view, we will add now comment input section. So let's add a view with style equal styles dot form group, and inside it, you'll have text with a style equal styles dot form label and the text will be comment. And inside it, you'll have text Input, and it is self closing. Right here, we will have style equal. Comment style.com, input. And we will enable multiline. So the user can add as a need for text and number of lines we will set it to be four and the value will be equal comment and unchanged text, set comment, and placeholder will share your thoughts on this product. Okay. And placeholder text color will be from colors dot dark gray. Okay. And right next to this view tag, we will have now touch Bobcity let's close it with a style equal styles dot, or it will have two styles. The first one styles dot, submit Review button and also here is submit disabled, and it will have styles dot disabled. But. Okay? And finally, we will sit on submit on press to be on submit handle and also disabled if is submit disabled. Okay? 61. Implementing the Add Review Modal and Functionality Part 2: Okay, let's continue. Last time we reach this touchable opacity and inside it, we will have text with style equal styles dot. It will have two styles as well. So styles dot, submit Review button text, and also styles or here should be if it is submit disabled, and we will add styles dot disabled button text. Okay. And here, the text will be submit review. So let's start now with our styles. So right here, we will have model overlay style with flick of one and background color. We will use RG BA, zero, zero, zero and 0.6 and we will have deify content to be center and align items center as well. Then right here for model content, we will have background color from colors that white and also border radius of 15. And the bedding 25 width will be 90% and max width will be 450. Then a shadow color will be black and also shadow offset with width of zero, and the height will be six and shadow opacity with 0.15, shadow radius of 12 and elevation for Android with two. And also the next style will be model, close button. So it has aligned self with flex end and margin bottom of ten. Then for the model title, you will have font size of 22 and font weight of bold, the color from colors that dark gray and margin bottom 20 and text align to the center. Then for the form group to have margin bottom of tin and form label font size 16 and one to eight of 600 and the color from colors dark gray and margin bottom of eight but then for the rating selection style, it will have flex direction of row and justify content space between or around and padding vertical five and margin bottom with thin. And for the rating star, you'll have padding of eight and comment and pot with border width one, the color from colors but light gray and border radius ten, and padding 12 and text align vertical to be top and minimum height, 120 and font size, it will be 16 and the color from colors or I implement it already. So the background color from colors dot of white. And for the submit review button, it will have background color of colors primary and border radius of ten bedding vertical 15 and align items center, margin top of 20 and shadow color. It will be black. And shadow offset with width of zero and here height three, shadow opacity 0.25 shadow radius, five, and the elevation two. And for submit review button text, it will have color from colors to white. Font weight will be bold and font size 18, or let's make it 16 and disabled button now. With background color from colors light gray and opacity 0.7. And finally, for the styles disabled button text, it will have color from colors dot light gray. That's it for this lecture. So in the next one, we will go back to protect screen in order to complete implementation, so see you there. 62. Implementing the Add Review Modal and Functionality Part 3: Welcome back. Finally, let's move back to our product screen in order to implement add review model component and its functionality. First of all, make sure you import use creative review mutation from product ABI slice. Then we will import add review model component from components AD review model like this. And for states right here, let's add now cost rating and set rating, use state with false or zero as default value. Also comment and set equal use state of empty string. Let's see what else we have to implement. Okay. Right here, we will initialize the mutation hook for creating review, along with it loading state. So C create review and also is loading. And because we have loading value, we will rename it to be loading product review. Equal use create review mutation. Me this. Then we'll implement function to handle the submission of new review. So cost submit review handler, equal ASN and we will first try catch error. First of all, we will make sure that the rating is not equal zero or there is no rating at all. So if there is no rating or rating equal zero, we will return, toast the chow with type of error text one to be error text two, you'll add, please select a rating before submit. And the position of this will be above or top visibility time we will set it to be 7 seconds. Let's make it 4 seconds like this. And right here, we will add return in order to stop the submission. Then right next to this closing bracket. We will now make sure that we have comment. So if there is no comment dot Trim and then we will add also toast the chow with Let's copy this and paste it right here. And right here, please write a comment before submit. And also, we will add here in order to stop submission. And if everything is okay and we have value of rating and comment, then we will create a review. So await, create review with product ID, rating, comment like this and these dot and rub to throw an error F mutation fail. Okay? And then we will add refetch to refetch product details to update the reviews list on the screen. Okay? So let's make sure we add this refresh. Yes, it is right here from UGT product details. So everything is okay. And also, we will add for success toast dot show the type of this will be now success and text one success and Tik two will be review created successfully. Take this and also position top and visibility time. Let's make it 7 seconds. Then right next to this, we will set the rating back to be zero in order for next rating for other products. So set rating be zero and also set command to be empty string and set is the review model open to be false again because once the user click on this, write a review, and after he submit a review, the model will be closed. And right here in the catch if there is an error, we'll extract it. So like this const error message, equal error, if there is error, the data message or error dot error, just like this. Okay. Then we will add a statement and if error message dot to lower case dot includes. So if the error message that happen, that includes this already reviewed we will add or set a review model open to be false, as well. And also, we will add here toast dot show. With type of error and text one to be error, takes two to be error message because the user can only submit a single review for single product. So for this product, for example, you can only add one review. No two, no three, anything else will return an error with message of already reviewed. Okay, and also visibility time, you'll set it to be 5 seconds. And now let's add a Add review model next to this closing scroll review, the review model, and it will have as visible equal as review model open because we will pass them and add review model component and close, it will fire a function with set as review model open to be false. So this is a function to close the model and rating equal rating and sit rating to be set rating and comment equal comment, set comment to be set comment. Unsubmit equal Unsubmit or submit handler. Submit review handler and is loading to be loading product review like this. So now let's tiest our review. I think I know this error. Let's go up here. So first of all, let's rearrange our code. So cut this and paste them up here and also in this, we will not add a hook conditionally. So let's remove navigation to go Back. I think now it should work without any problem. Okay. So let's now try to add a review. First of all, this text seems very odd. So let's go to the view model and go to disabled. But in text, let's make it secondary text color. Okay, now it's better. So as you see, this is disabled now because we don't add any rating or comment, so let's add a rating, and it is also disabled. So let's go here. And also for this, should we visible. So let's go for the comment. Input. Okay. Let's make it secondary text collar. Yes. Seems. Okay, this is good. So let's try now. Okay, review created successfully, and here it is. So let's try now to add another review. Select, for example, sharing of five, rating, and add any text as you see, product already reviewed. Let's try now another product. All right, a review and add some comment. Okay. And let's go back. You see now this product has one review now with four rating and this with five rating. So everything is well now. 63. Implementing the Shipping Screen Part 1: Hello, everyone. In this lecture, we will build the shipping screen, which is a crucial step in our checkout process. Users will enter and confirm their delivery details such as address, city, postal code, and country. We will save this information to our redex store using Card slice, and then if all is good, we will navigate the user to the next page, which is payment screen. But first of all, we have to go back to CRT screen in order to implement checkout andler. So first of all, this should be total items. Let's search for it, right here. Let's add S and back again right here and add S because we implement it in the cart slice like this. Okay. Then we will get user info from dux both slice to check Logan status for checkout, so CsUser info equal. Use selector with the state, then return Sates like this. And then we will add or implement handle, checkout. Right here, let's add it const handle checkout equal function. The first thing we're going to do to check if the user logged in, we will navigate directly to shipping screen. Otherwise, if he not logged in, we will navigate to Login screen and pass shipping as redirect perhaps. So if there is user info, we will navigate him or by router dot push to this path, which is screens slash shipping screen like this. And else if there is no user logged in, we will add Router Dot push and right here we'll add Bath name. It will be screens login screen, and params. If there is redirect here, we will set it to be it should be small. And we will add screens slash Shipping screen. So if the user logged in already, we will never get him directly to Shipping Screen. And if he didn't log in yet, we'll never get him first to Login screen. And then after he logged in, we will redirect him to shipping screen in order to complete his process. Okay? Then let's add handle checkout in our checkout button. So first of all, let's add this product to card. So this button, we will have handler. It's okay, right here. So this touchable osity will have on press handler, equal handle, checkout like this and this equal card items. Dot length equal zero. Okay. And also, we will have right here, second style, which is styles dot tick out disabled. Like this. But this style will fire only when card items Linked equal zero. And we will add this style like this, and let's add it now in the style, so copy it. And right here, let's add this with background color to be colors dark gray like this. Alright. So in order to check this, so right now we are logged in with this user. But first of all, let's create shipping screen in order to check if this functionality works or not. So let's add here, shipping screen dot JSX, like this. And let's add for now our snippets. So if you click on this should navigate us to shipping screen. Yes, as you see right here, it navigates us. But, for example, let's check another thing, which is to delete user details. So right here in the sittings, storage cache, and let's clear the storage with cache also and go back. Let's clear it all and reopen our Epog Alright. Let's open now. For Android. Yes, right now, we don't have an account. So let's try to add this to card now. Yes. And the other thing, if we press on proceed to checkout, it should navigate us first to Login screen because we don't have an account and then redirect us to shipping screen. So let's right now. Yes, as you see right here. So let's add Admin account with password and sign in, now it should redirect us to shipping screen. Yes, as you see right here, it redirects us to the shipping screen. So all is good for now. Let's now move on to the shipping screen. So the first thing we're going to do is to import text input and touch up obacity and keyboard, avoid view and platform, and also keyboard and scroll the view like this and also safe area view. Okay. Then next right here, we'll import from redux. Both use selector and use dispatch. Then we will import use Router, import use Router Router and import toast react Native toast message, and also import from slices and card slice, we will import save shipping address slice. And we will import also colors from our constant folder like this. Let's add here from Utils file and reload the app. All right. All is good now. So we will continue in the next lecture to implement the rest of our functionality. 64. Implementing the Shipping Screen Part 2: Let's continue now in our shipping screen implementation. So first of all, you will select the card. So const card equal selector with the state and return state to card. Then we will destructure shipping address from the CRT state to pre fill form fields if data exists. So CST shipping address equal card like this. Then we will state variables for each shipping address field and initiali with existing data from redux if available. Otherwise, it will be empty string. So const address and set address to be equal. Use the state for shipping address dot Address. Or if it does not exist, it will be empty string like this. Then Cost City and set City equal shipping address to shipping at, sorry, or empty string like this, then const code and set postal code. Use the postal code or empty string. Okay. Then for the country country and set country equal, use for shipping address country or empty string. Here should be shipping address, not set. Okay. Then we will dispatch redux Hook. Const dispatch equal use dispatch and explore outer for navigation. Cuter equal use router. Then we will implement handler for form submission. Const submit handler equal function, first of all, we will dismiss a keyboard when buttle is pressed. So keyboard dismiss. Then we will implement basic validation to check if all fields are filled. So if statement, if there is no address or no city or no postal code or no country, you will show an error, so toast dot show with type of error. And next one will be missing information. Okay. And text two will be please fill in all shipping details continue. And the position will be top and visibility time 7 seconds like this. And right here, we will add return in order to stop the function if validation fails. Then right next to this curly bracket, we will dispatch save shipping address with collected form data if everything is okay. Dispatch save shipping address with address, city, poster code, and country, then router dot push to navigate to the next screen. Which is payment screen. Like this. All right. So let's start with JSX. So right here, let's remove it and add safe area view with the style equal styles dot safe area. And inside this set area, we will have keyboard avoiding view. So keyboard avoiding view to adjust the height or moves the content to avoid being obscured by the keyboard. So style, let's add the style right here. So flex of one and also behavior. Let's add bracket and it's a platform. Operating system is equal. IOS it will be padding, else, it will be height. Okay. And also, right here, we will have now keyboard vertical offset. So if the platform that operating system equal IOS it will be 60, otherwise zero. Then we will add scroll view to allow the content to be scrollable if it is overflowed due to keyboard or screen size. So right here, let's add scroll view, sorry. Okay. And right here, we'll have style equal styles, container, and content container style equal style dot scroll content and also we will add keyboard, should persist tabs equal handle like this. So we will ensure that touchable opacity press work even if keyboard is open. Then right here, we will add now for the screen title, let's add text with style equal styles dot title and inside it, chipping as text, then we will have container for the actual form input to apply consist styling. So view and inside it, styletle actual form container and inside it, we will have a view of style equal styles dot input container. And right here, we will have first text with the style equal styles dot label. And right here we'll have address and right below it, text input, and it is self closing. Then we will have style equal style of input, placeholder, be Enter address, then the value equal address and unchanged text be set address. Okay. Also, let's copy now. This or all view like this and add it right here. Okay, it should be this, like this. Okay. In order to see our content, let's just remove this style for now in order to see it, and then we will continue in the next lecture to implement the other input fields and containers. 65. Implementing the Shipping Screen Part 3: Now continue with our input container. So let's copy this container and paste it right here. And here we will have postal code like this. And here, we'll add postal code. The value will be postal code and set postal code on age text. And also, we will have keyboard type of numeric. Let's make sure it is numeric like this. And also, we will have for secundry. So let's copy this. And paste it right here. Here it should be country and inter country and for the value country and unchanged text set country. Okay. And finally, we'll implement Continue button. So right after this, you'll have touchable opacity with style equal styles dot button. And on press handler, we will have submit handler function that we implemented earlier and inside it. We'll have text with style equal styles dot button text. And here we will continue as a text. All right. So let's start now with our styles. So right here, first of all, we will have safe area. This will have flex of one, and background color from colors, dot of foid and also adding top. But here we will have with respect to platform. So if the platform, that operating system equal Android, it will be 20 s zero, like this. And here for the container, it will have flicks of one and scroll content to have styles of flix grow one and justify content center. Let's now move up to add flix to keyboard avoid right here to show the content again. So let's add style equal flix and make sure it is two Calibackets. So it is shown right now. Let's continue. With actual form container, and inside it, you will have background color from colors dot white and margin of 16 and the bedding also 16 and border radius 12 and shadow color will be from colors that dark, gray, and shadow offset for the width, it will be zero, but for the height, two, and shadow opacity of 0.1 and shadow radius, four, and the elevation for Android will be two. Okay. Then for the title, we will have font size of 22 and font of bold. And the color will be from colors primary and text Align. Start. And padding of 20 like this. Okay. Now for the input, container will have font size 14 and font weight, 500 and the color will be from colors dot text Color and margin bottom of it. Okay. Next, for the input, you'll have a ground color from colors to white. Then border with one and border color from colors dot light gray. For the radius, it will be eight and padding of 12 and font size 16 and color from colors dot text color like this. Then for the button, we will have background color. Colors rimary and padding of 16, then border radius Here it should be. Okay. Or the radius. Let's set it eight, and then align items center and merge into eight as well. Okay. Then for the button text, you will have color from colors to white and font size 16 and font weight. Of 600 Nags. This content should be styled inside this box, like address and its input. So let's see what's wrong. So let's see this. This is for city. Let's cut it and put it right here. Okay. Let's move postal code, container, and also the country from here and put it next to this closing review, writing like this. All right. And also for the touchable opacity, let's cut it and we here, move it. Okay? This is correct. And also here in their router dot push, it should be screens, not screen. So now let's create this payment screen in order to test our page. So right here, the screens, let's create it with R and FES snippets. So right now, once we registered, we should navigate it to shipping. So first of all, let's continue without filling anything to see what's. All right, missing information, please fill on shipping details. So let's add here some text and also here. Here it should be a number. And right here, let's keep it empty for now to see, same error. So let's add it and press on continue. Yes, as you see right here, we are navigated to payment screen. So that's it for shipping screen, and we'll start in the next lecture or with payment screen code. 66. Selecting the Payment Method Screen Part 1: In this lecture, we will build the payment method selection screen. This is where users choose how they want to pay for their order. Typically, offering options like paypal or credit card, we will ensure that users have already provided a shipping address before reaching the stage. And once a payment method is selected, we will save it to our redex store and proceed with final place order screen. So first of all, let's import touchable oocity and also style sheet, or it is imported already and safe area view. And that's it. Also from react, we will import, use effect and use the state. Then we will import use Router, from Expo Router and import use Dispatch and use selector from react index like this, then we will import from slices CRT slice, Save payment method. And also, we will import form container from components for container and import material icon. At Expo, Vctor icons Material icons, should be icons, not icon. Right here. Then we will initialize the router for navigation focused Router equal. Use Router and also dispatch for sending redux actions. And we will select the entire card state from the Idec store. And you will return stated card like this, and also we will structure the shipping address from the card state to check if it is set. So const shipping address equal cart. All right. And then we will create a state to hold the currently selected payment method, and default will be paper. So cost payment method and set payment method equal use state and the default value will be paper like this. And then we will use Effect Hook to check for shipping address and redirect if it is missing. Okay, so use effect. This ensures that the user follow the correct checkout flow, shipping, then pay. Okay? So if there is no shipping address or shipping address dot Address, we will add router dot replace two screens shipping screen like this for the dv dependencies, we will add shipping address and also the route. Okay. Also, we will add handler for when the continuo button is pressed, so con submit handler equal function. And if there is no payment method, we will return alert dot Alert. And here, we'll add error. And also, right here, please select payment Method. Then we will add right here, return to stop the function if no method is selected. Then right here, we will dispatch save payment method with our payment method. Then navigate to the place order screen for final order confirmation. Router dot posh two screens Place Order screen like this. And now for the return of GSX, let's remove this and add safe area view. But the style equal styles dot save area. And we will have form container to wrap the content for constant padding and Backgroud. So first of all, we will have here view with style equal styles dot form group, and inside it, we will have text with the style equal styles at label, and inside it, we will have select method as text. Then we will have view with style equal styles dot dio group and right here we will have touch a pen opacity with style equal styles dot Rdio button. And on press handler, we will have to set payment method. And right here, we'll have paypal like this. So inside this button, we'll have material icon, and it is self enclosing the name equal. We'll have variable, so let's add li bracket. So if the payment method equal. PayPal if statement, it will be radio dash, button, dash, checked, else, it will be radio, dash button, dash, checked. All right. And also for the size, it will be 24 and the color equal colors Primary. Let's see. Okay, it seems that we don't import the colors. So let's import it from constant folder and back right here at colors dot primary. Okay. And right next to this, we'll have text with equal styles dot Radio. B and here, we'll add PayPal or credit card. And we will continue in the next lecture in order to complete our payment screen punctuality. 67. Selecting the Payment Method Part 2: All right. Let's continue now with payment screen, right after these two close view, it's a touchable opacity and this will have style equal styles dot button, and also on press handler. So on a press, it will have submit handler and inside it, we will have text with style equal styles button. Text. And right here, we'll continue as text. All right. So let's start now with styles. So first of all, safe area. I'll have flick one and background color of colors dot of white. Like this. Then for the form group style, you will have margin bottom of 20 like this. And then for the label, it will have font size 16 and font to it, 600 and also the color from cutters that text cutter and margin bottom of ten. And for the radio button, we'll have flex direction of fro and align items to be center, adding vertical, Tin, and margin bottom. Thin as well, and background colors dot white, padding horizontal thin and border radius, eight and border with one and border color from colors light gray. All right. Then for radio label, it will have font size 16 and color from colors dot text, color, then margin left of ten. Okay. Then for the button, it will have background color from colors primary and padding vertical of 15 and border radius eight and align items to be center, justify content center margin top of 20, and the width will be 100%. And finally, for the button text, it will have color from colors to white, the font size 16 and front to it bold, like this. All right. So let's now create our place order screen in order to check our functionality. So add it and add our slip it. Let's try now. All right. As you see right here, navigates us to place order screen, and that's it for payment screen. In the next section, we will move back to back end in order to implement the order model controllers and routes. 68. Designing the Order Model (Mongoose Schema): Come back to this new section. In this lecture, we will back again to our back end folder in order to implement and define the Mangusi schema for our order model. This schema is crucial for structuring how order data is stored in our Mangudib database. We will include the fields for user information, order items, shipping and payment details, pricing breakdowns such as items, tax, shipping, total, and stats flag for payment and delivery, along with timestamps for tracking the time. All right. So here in the model, let's add order, model to Gs and import. One goes from Mongo's package. Then we will define the order schema, so cons order, schema equal Mongoose dot schema and first of all, we will reference to the user who placed this order. This is required wheel and creates a relationship with the user model. So user, and the type will be gust schema types dot Object ID, and required through and reference will be from user schema like this. Then we will define array of objects, each represent an item within the order. So order items will equal array of objects. And here we will add the name of the product. So let's add name with type of string required True. Then the URL or path of the product image URL or sorry, image. The type string as well, and required set it to through then the price of single unit of the product. So price type number required, we will set it to true and the quantity, so QTI type also number, and required, we'll set it to be true. Okay. Then we will reference to the actual product document. This will ensure that the data integrity and allows population of product details. So right here, product then the type will be Mongoose dot schema types dot Object ID, and required to be true and reference product from product schema like this outside this array of object, we will have details of the shipping address for the order. So shipping address, and it will have address with type of string and required True. And then right here, we will have city with also type of string and required true and postal code. The type will be number and required we will set it to true as well. And finally, for the country the type string and required through. Okay. Then right here, we will add the payment method chosen by the user and our default. Like I said before, it is payer, so payment method, and the type will be also string and required through. And also, right here, we have payment result, we will add right here ID of type of string, and also right here status of type of string. And updated sorry, with type of string as well, and also email underscore address with type of string. So this is the payer email for payment gateway. So also right here, we'll have items price and with type of number required True, and the default value will be 0.0. Also for the calculated tax amount for the order. So a price with type of number required also true and calculating shipping cost for the order. So right here, shipping price with type of number and required true and default, zero, then total price is same as this. And also right here is paid if the user paid for this to have type of Bullion and required true, and the default value of this will be false. Okay? And also we will have here paid at, and the type will be date and is delivered to show if the orders delivered or not, the type also will be boolean and required true and the default value of it will be false. And right here, delivered at the type will be death as well. And here we will add type stamps. Like this and it is automatically, we'll add created at and updated at field. Then we will create Mongoose model for the schema. Cost order equal Mongoose model. The name of it will be order. And it is from order schema. Here it should be order like this. Then we will export default, all right. Right here, make sure it is type. All of it should be types, not type of like this, right? And for the shipping address, this calibracet should closed right here, so let's add it and add a Cuma and let's remove this one. So all is done now for this order model. Next lecture, we will start to implement order controller, and if there is any Utils that belong to it. 69. Order API Controllers & Price Calculation Utilities Part 1: This lecture, we will implement the BC end ABI in points for order management and a utility function for calculating order prices. We will cover creating new orders, pitching orders by user, and by ID, and updating the order status for paid and delivered order. The calculating price utility will ensure that accurate calculation happen or applied to item price and for shipping, tax and total price based on the items in the order. And then dynamically adjust shipping cost and applying the text. So first of all, let's go right here in the utils, create a new file with calc prices dot JS, and first of all, we'll add here function. Add Disim with number and return math the Trond for the number multiply by 100/100. And dot to fixed by two. Then we will calculate the prices, which is items shipping and tax and total for an array of order items. So shipping will be free if items prices is over 100, otherwise, it will be ten, and the tax, it is 15%. So let's now create our main handler, so export function calc prices. And with order items and then we'll calculate the total price of item in the order. So cost items price equal a decimals for order items dot Reduce Method. And we'll have accumulator and item. Then we will return accumulator plus item PRICE, multiply by item dot QTY, and the second argument will be zero for accumulator. Then, right here, we will calculate or add the total prices or the shipping price. So it is free, if items price is over 100, otherwise, it will be thin. Cost shipping price equal decimals. Item price. If it is greater than 100, if statement, it will be zero, otherwise, ten like this. Then we will calculate the taxi price. So cost tax price equal add decimals. And right here, we'll add number to make sure it is number then 0.15 multiply by items price, and here dot to fixed by two. Then we will calculate the total price by summation, items price, shipping price, and tax price, and convert to number before summing to avoid string concentration issues. Then format to two disman places. So right here, cost total price equal number for items, price plus number for shipping, price plus number to tax price, and all of these dot to fixed by two like this. Okay. Then right here, we will return items, price, shipping price, tax price, and also total price like this. So we are done now from the suitors file. Let's move now and go to controllers in order to add a new file for controller dot JS. First of all, we will import the ACN handler middleware for handling ACN errors. Import ACC handler from Middleware async handler and make sure it is dot js because we use Model, if you remember, and then import order Model from order Model, and import the product. Model from models Product Model to JS, and also we will import the Calk prices from our Utils file. 70. Order API Controllers Part 2: And the first controller to create a new order. This will be private as all of these controllers and for users. So private user. So here add order item equal async candor with async and request response then return right here. First of all, we will get the order items and shipping price and payment method from request dot body, like this. Then we will validate if the order items is exist. So if statement if is no order items or order items that link equal zero, we will returns status of 400 and throw new error with no order items like this. Okay. Then right next to this closing curly bracket, we will fetch the product prices from the database to prevent client side manipulation of prices. So cost items from DB equal Await product dot FID. Find method. And we will find the product whose ID are in the order items array, so underscore ID. And we will use this to find this order ID or product ID, ordems dot Map method. And X right here, we will return x dot underscore ID. Okay. Then right here, we will map the received order items to actual database, product prices, and structure for saving. So cost, DB order items equal order items Map right here a item, then we will return Cost DB item. Equal items from database dot find Method. And right here, we'll find the product, so p underscore ID dot toString is equal item dot underscore ID. So we will make sure that we have database item. So if no DB items, we will return a response status of four oh four and then throw a new error with product not found. And right here, we will add item dot underscore ID. Or here should be not coma. I like this. Let's see what's wrong. Okay, I should use right here, backticks, next normal string, yes. And let's remove this quotation. Okay. And right here, we return if everything is okay, return our item. So we will keep other properties like name, image, quantity from the client and for the product. This item dot underscore ID, and then the price from item dot price an underscore ID undefined. So we will remove the client generated ID from the listed item. Mongoose will create a new one, and we will use the price from database to ensure accuracy, and also we will set the product el to actual product ID. And like I said before here, we will keep other properties like name image quantity from the client. Okay. And right after these closing precket we will calculate the prices, which is items shipping, tax, total using utility function. So cost prices equal calc prices and DB order items like this. Then we will create a new order instance with all collected data. So right here, we will add cost, order, equal N order. And with these details, so order items, it will be DB order items and the user. So the user ID comes from authentication Middleware, which is requested Tuser so Rick user dot underscore ID, and also the shipping address and the payment method and prices like this. So we will spread the calctd prices into the order object. Then we will save the new order to the database. So cost created order equal await order. And respond with decorated order and two oh one for created status. So it is status two oh one dot JSO and created order like this. All right. The final thing that we're going to do in this lecture, here should be calc prices and fix it right here and also in the function. Okay. And also, right here, it should be shipping address, not shipping price because we will get it from request Body by the user himself. And here we will create a new order with this shipping address details. So that's it for this lecture, and we will continue for the rest of order controllers in the next lecture. 71. Order API Controllers Part 3: All right then, last time, we'll implement add order item. So the second controller to be get my orders in order to get your orders and see them. Cost, get my orders equal ASN handler with ASN quest and response. Then right here, we will find orders associated with logged end user. Cost Order equal await from order schema dot Find. You will find orders that belong to this user, so user equal request dot user dot underscore ID. Okay. Then we will return s also dot status of 200 JSON for this or here should be orders. Okay. And right here as well, like this. Also, we will get the single order IID. So cost. Get order by ID equal async handler with request and response. Then we will find and order by its ID and populate user details such as name and details or email. Cost Order, equal await order, find by ID for request dot params dot d dot populate user and also name should be side quotation, name and email like this. So right here, we will show that there is no order. If there is no order, we'll return an error. So if no order, then response dot status four oh four and throw a new error with message of order not found. Okay. And right here, if everything is well, we'll returns to status 230 son for this order. Okay? And right here, we'll implement now update order to pay it. So in order when the user plays his order and want to pay, we will create controller in order to make it pay. Okay, so con update order to paid equal AsnKda and then, first of all, we will find the order that wanted to be paid, so const order equal await order schema dot find BD or request dot bam, dotiD but right here, First of all, we will check if the order exists. So if there is no order, then we will return s dot status of four oh four and also the same this error. So let's paste it right here. And right next to this if statement, we will update the order status to be pad and sit paid at timestamp, okay? So order, dot paid or is paid, sorry, equal true. Then order, paid at equal date dot no. Neck. Okay? Then we will store the payment result details from the request body. So order payment result equal ID, and it will be q dot body dot payment ID or request dot body dot ID. So PayPal often returns ID. So we will name it like this. And the status right here, will be completed like this, then update, underscore time from request dot buddy dot update. Underscore time or new date dot two ISO string like this and the email address, underscore address. Okay, it will be request dot body email underscore address or let's add here Not dot provide at example.com. Okay. Then right here, we will iterate over order items to update product stock cuts. So for cost item of order order items, and right here, we'll add Cost product equal AwatPduct from product schema. Like this, find by ID for item dot product. Then we will make sure that the product is found. So if there is no product, adde throw a new error with tactic and product and we will set variable here, item dot product, not found. Okay. Then also, if product count in stock, this then item dot quantity. We will throw new error with pacte as well. Sorry. Yes. And sufficient stock for product. So if the user set quantity greater than our counting stock, it will retain this error. And then if everything is okay, we will decrease the stock by order quantity that ordered or set it by the user. So product dot count and stock equal minus item dot TY. Okay, then a weight, product dot save to save a product that has been updated. Okay. Then right next to this closing curtain bracket, we will save the updated order. So Cs updated. Order equal Await order DZ. Then we will return S D JSON our updated order. Until now, all these order controllers, that's for normal users, right? And in the next lecture, we will start to implement order controllers, but for only admin user. So the admin only can update order to be delivered, and also he can get or see all orders from all users in admin dashboard. Okay, so see you in the next lecture. 72. Order API Controller Part 4: No, let's implement update order to deliver controller. And like I said in previous lecture, that for on the admins can update order state from false to true. Okay? So const update order. To delivered equal ASN handler with ASN and request and response. Then, first of all, we will find the order ID that will be updated to delivered so const order equal await order defined by ID from request dot PAMs dot ID. And then we will ensure that we have already order. So if there is no order, then we will retain response status of 44 and throw a new error with message of order not found. Okay. But if we have already an order, then we will update the order status to be delivered and sit delivered at timestamp. So order dot is delivered. Equal true, and order. Dot, delivered at equal death death dot now, and then const updated order, equal await order. Dot save, you will save the updated order. Then we will return response dot status of 200 dot JSON with updated order like this. Let's save it. And the other order controller on the admin to get all orders so const, get orders equal ASN Canva. And then first of all, we fetch all orders and populate the user's ID and name. So cost orders equal a weight order dot fine. We will find all of them, then that populate with user and right here, ID space name like this. And also, we return rest JSON orders like this. And finally, we will export all of these controllers. Export add order item, then get my orders get order by ID, update, order to bed and update, order to deliver, and finally get all orders like this. They just go up here and update order to pay product count in stock minus equal, not equal miles. So this is critical fix and also the price here from add order item controller should be from DB item to price. So make sure you fix these bugs, and that's it for our order controller, and we will move now in the order routes and next lecture. 73. Order API Routes: After implementing order model and order controllers, it is time to set up API routes for managing orders in the back end application. These routes will define the endpoints through which our front end can interact with order data. We will implement routes for creating new order, pitching user specific order, retrieving single order by ID, and updating order status, incorporation authentications for protect and authorization admin middleware to secure our endpoints. So first of all, let's go right here in the routes. Add a new one with order routes to jazz. First, we would import Express from Express. Then we will import our order controllers. So import from controllers order controller. And right here, we will import add order item, get my orders, get order by ID, update order to pay it, and update order to deliver, and finally get orders for all users. Then we will import from middleware Oath middleware. If you remember, we implement to protect middlewares for the normal user, which is protect and for the admin user with name of Admin. So right here, add Admin and protect like this. So for now, we'll create an express router instance. So outer equal express the router. The first route for handling both creating orders and switching all orders. So Router dot route, the path will be slash and right here dot post. If the method is post, it will be a order item. But if you remember, we have to add protect right before it like this. And if the method is go, we will get all orders, so get orders. But here we have also to add protect before it and also admin because only Admin can get all orders for all users. Okay? Then we'll create route for switching orders belong to Logged end users. Okay? So Router Route, and the path will be slash Mint to get my orders. So get my orders and right before it, protect all orders routes will be protected. But here we will specify if it is for admin or just normal logged in user. Then we will implement route for fitting a specific order by its ID. So out route, the path will be ID dot GT. And here, we'll add protect and get order by ID. And also we will have Router for updating an order payment status. So router Route, the PAT will be IDP and the method will be PUT and right here we'll have protect and also update order to pay then we'll implement route for updating order for delivery status. So Router route, and the path will be ID Deliver and the method also will be put but here we will have Protect Middleware and also Admin Middleware and add also update order to deliver. Then finally, we will export default router in order to add it in main application server JS. So right now, let's go to server file. And first of all, we will importer route routes from our route slash order routes dot js. Okay. And right here, we'll add up dot s, and the path will be slash ABIs Orders. And the second argument will be order routes like this. So that's it for this lecture. 74. PayPal Client Configuration: In this lecture, we will set up the PayPal API client, which is essential for integrating PayPal payment functionality into our packet. This involves configuring the PayPal SDK with our client ID and secret, differentiating between sandbox development and live production environment and ensuring our environment variables are properly loading and validated. First of all, let's go here in the der routes and make sure you import Order controller and GS. And right here in the Osmddlew also do GS. Otherwise, the server will not run, okay? So let's go to Utils file and create PayPal. Client to JS. First of all, we will install PayPal out ServersDKT is for server side operations. Import, or first of all, let's install it. Make sure you are in the back end route and then hit the command BM install at PayPal Checkout server, SDK and header. Then let's import it. Import paper from that paper server as DK then we will import the EMV library. And we will configure it in order to load environments variable from our file. So dot EMV config like this. And now we will go to our browser in order to create our app inside PayPal. So search for developer PayPal, select the first link. And after you sign up or sign in, you can go right here into Developer Dashboard. And app and credentials, we will create a new app and the name will be iPhones. You can name it as you like. Create app. So this sandbook it is not enabled, so we will test it for nothing. It means that there is no real money that will transfer. But once you want to publish your app, you can press right here and upgrade now to PayPal Business in order to switch to live book. Okay? So from this app, we will copy this client ID. And also secret key. And let's go to environment. And right here, let's add paper, underscore client underscore ID equal. This one and paper underscore client underscore secret. And let's test our secret also. Then right here, we will validate the environment variables, so we will make sure both exist. So if there is no process dot E and V dot and for ensuring let's copy this right here or if there is no secret, so no process. D E and V dot and right here, pay creen secret, let's copy it and paste it right here. So if either one of them is missing, we will throw new error and the message will be missing. PayPal client or secret. Please check your Lot EMV file. Like this. Then we will determine the P Pad environment based on the node underscore EMV, cost environment equal process EV node EV. If it is equal production statement. It will be new. Paypal dot core dot Live Environment with our process TMV client ID. So let's copy this. And also with our secret at Acoma and copy this as well, right here, else, we will have but before that here, new TPL dot core dot Sand Book Environment with our client ID and our secret like this. So if it is in production, we will use the PayPal environment for real transaction, and we will use both client and secret ID. Else, if not in production like development, we will use PayPal Sandbok environment for testing. So for now, let's rename this to be development like this. And we will create a new HDTV client instead using the determined environment. So client equal new paypal.co pay client with our environment. And export default client. So this client is used to make API calls to PayPal, and we will export this client in order to use it in next file, which will be right here in the routes for PayPal routes. So see you in the next liture. 75. PayPal API Routes and Integration Part 1: Now we will start to implement the Bend ABI routes that necessary to interact with payer. This includes an endpoint to securely provide our font with PayPal client ID and two critical endpoints for handling payal transactions. The first one is to create an order with PayPal, and the second one is to capture the payment for that order. We will also cover essential error handling and data validation to ensure robust payment processing. Okay. But here we should rename this should be PayPal Okay. Now we will move to Routes. And right here, we will add paypal routes. Dogs. First of all, we will import Express to create and manage routes. And then import PayPal Client from Utils and paypal client dot gs, and also import PayPal at PayPer Checkout server and import EMV dot EMV. And we will create a new Express Router, so cursed outer equal express router. The first route will be to get papal client ID for front end integration. Okay? So Router dot G, and the path will be slash config. With request and response and we will return response with client ID, which is needed by front end payal SDK. As dot Send and we will send client ID. There should be or there's no need client ID. It will be from process EnVt Let's copy papal client ID. Not paper Clare underscore ID, and the second one to create an order. So right here, outer dot post with path of create order. And right here, we will add async with request and response. Then return Try and cart. So try cat. First of all, we will extract the amount from the request body. So const amount equal request to the body. And then we'll make sure that we have an amount. So if no amount is not a number for amount or amount less or equal zero, we will return return response lot status of 400 JSO with message with error, and invalid amount provided. Right here, if everything is okay, we will create a new papal order created request object, so const request equal new papal orders, orders. Create request like this. Then we will specify the er prefils to a full representation of the response. So request, dot, prefer with return equal or just one equal sign, representation. Like this. Then we will set the request body with payment intent, and persons unit details. So right here, request dot request body, and we will have intent with capture. Capture will specify the intent to capture the payment immediately. And then for the person's unit, we will add first object of amount, the amount will be currency underscore code, USD. So we set the currency to USD and the value to be amount dot to string method like this. And then we after this, we will exude the request using papal client to create the order. Cost response equal await papal client dot exude for our request. And the response will be with paper Order ID and status. So it is dot status. 200 dot JCO. So we will put right here the ID for created papal order. So ID from response result dot ID. And also the status of created order. So status it will be from response that result that status like this. And if we have an error, we will catch right here. So is that status of 500 the JSON and we will add error with failed to create paper order and the details from error dot message like this. So that's it for our create order. At the next lecture, we will start to implement the capture order with post request. 76. PayPal API Routes and Integration Part 2: Continue now and create a new router, so router dot post, and this will be for capture the order. So the path will be capture, dash, order. And right here, we will have async with request and response. Then we will add triangle error. First of all, we will extract the paper Order ID from request body. So cost order ID equal request dot PD and make this vital like this. Then we will ensure that we have order ID. So if there is no order ID, we will return response dot status of 400 to JSON, and the message would be error and no ID order provided. Then if everything is okay, right next to this closing F statement, we will create a request to get the details of the paper powder order. Request. Equal new paypal dot orders orders get request like this with our order ID, and then we will exude the request to fetch the order details. C order details equal await payal client exude to get the order request. Okay. And also, note that order details could be used for further validation, such as verifying amount before capturing. So then we will create a new papal order capture request object for the given order ID. So request equal new paypal dot orders orders capture. Request with our order ID. Then we will set an empty request body as pair PayPal's API for capturing. So request dot request body. Then we will exude the request to capture the payment for the order. So const response equal Await PayPal client dot exude with our request. And also we will initialize an object to store the libn, capture data from the response. Const capture data, equal ID, we will have response. Should be response result dot ID. This is the idea of captured transaction and also the status from response dot result dot status. So this is the status of the capture if it is completed or canceled. Okay. And right next to this, we will conditionally add per information to capture data if it does exist in the response. So if response, result dot payer we will have your capture data payer equal, we have email underscore address, and we will get it from payers email. So response dot result payer dot email underscore address and the player ID player underscore ID from response result payer, payer underscore ID. This is player Unique ID and also the name B from response dot result dot p dot name. Okay. And right here, we will make sure if it is exist. So if a statement, we will return, and also right here, else, it will be undefined. And right here in this bracket, we will add given name. Given underscore name will have response dot result dot per dot n GIIN underscore name, and also the SOR name equal response dot result dot per dot name and dot SOR name like this. Okay. So if these are not present, we will return undefined. And if it is a present, we will remain and give a name and Sorn. All right. This closing bracket for capture data to payer should be the latest one right here and remove this suma. Also this in order to make it. Correct. Then right here, we will conditionally add percus unit information to capture data if it exists. So if response dot result Persis, underscore units and response, dot result versus Units dot linked greater than zero, we will have here capture Data Persis. Underscore units equal response dot result dot PerssUersce unit dot Map. We will map through it. And right here we will have Unit and return will reference o. Underscore ID like this, it will be unit dot reference or underscore ID. So the reference ID for the purchase unit, and also we will have right here the amount. I will be from unit dot payment payments. If it is exist, Dot captures. If it is exist, we will take the first one, and if it exists also amount Okay, so we'll capture the amount from the first capture, and we will set the shipping details for the Perchas unit. So shipping it will be unit shipping like this. And right here, we will add response with the extractive capture data. So is that status of 200 to JSON with capture data. And right here, we will catch an error if it is exist. So is that status of 500 to JSON, and we will have error with failed to capture paper order. Okay. And also we will have details from error that message and debug underscore ID from error debug, underscore ID or set it to be undefined, and also links from error dot Links, or also undefined. Okay. And finally, we will export Sorry, export default, our router. 77. PayPal API Routes and Integration Part 3: And then we will go to server S in order to import it. So first of all, right here, we'll import APA route from out paper route dot JS then right here, we will have dot and the path will be API slash paper. And right here we'll have our paper route. Then we will additional client ID points in main server or client site setup convinces. Right here, we will add app dot git, and the path will be API slash Config slash paper. And right here, we'll have request and response. Then we will return cost client ID. Equal process dot Env dot paper. Let's copy it from EMV. And paste it right here. Then we will make sure if there is no client ID, we will return pons dot status of 500 dot JSON, and it will have error with message Papa client ID is not configured. Okay. Then right next to this, F Statement, we retain st JCO with our client ID right here and also in order to use the paper Sandbox, we have to add right here, paper underscore API underscore URL with this link, which is ttbsandbox.ppal.com. 78. Implementing Order API Slice with PayPal Integration Part 1: Welcome to this new section. This is where we go back again to front end folder in order to implement Orders API slice using redux toolkit query and include essential PayPal related API interactions. This will involve defining a new mutation for creating and capturing PayPal orders via our backing, as well as a query to fetch the PayPal client ID. These additions are crucial for enabling client site PayPal payment processing in our application. So first of all, let's go to our constant. And right here in the RL, we will add Export, const. Orders, underscore URL to equal API Orders and also export const APL, underscore APIsce URL, equal Let's add Pecti here and our underscore URL API PPA. H. A. And also, we will add specific oral for switching PayPal client ID from our back end. Export, const PayPal, underscore config, underscore URL, equal, also Bs underscore URL API config papal. Let's go now to our slices and add a new slice with name of orders API slice dot js. First of all, we will import API slice from API slice. Then we will import the URL constants that we implemented, import orders underscore URL. Let's complete it in order to make it ported. Post. So also pay underscore API, URL, and also PayPal underscore CFC. Okay. First, our first, we will export const order api slice equal api slice Inject Ind Points and endpoints with Builder and then return. The first one will be for create order. It will be builder dot mutation because the method is post, and let's query. Query will accept border, then return the URL will be orders URL, and the method will be post and podi with order like this. And next right here, we will implement Get order. Details, and it is builder dot query because the method is Git right here, we'll add query with specified ID, and then the URL will be at Batixs and orders URL ID variable. Then next to this, we will add keep and use data for 5 seconds. And next to this closing racket, we will have now pay order. So this mutation now will update the database order status after PayPal capture. Pay order builder dot mutation with query, and this will have order ID, PayPal order ID and payer ID, and also payment ID. Then we will return right here. The URL will be orders underscore URL order ID, pay, and the method will be put because it will update the state. And also, we will send details needed to mark the order as paid in the database. So the body will be PayPal order ID, payer ID, and payment 79. Implementing Order API Slice with PayPal Integration Part 2: The second one will be mutation to create PayPal order on the back end. This will call back end endpoint, which then interacts with the paypal api. Right here, create PayPal order with Builder dot mutation and right here, query with amount, then return URL from Ad Batext and PayPal API URL CRE order like this. The method will be post, and the body, we will send the total amount to our back end for the PayPal order. Buddy, and here is amount. Okay. The next one will be mutation to capture a PayPal order on the back end. This will call back end endpoints, which then completes the paypal payment. So right next to here, capture papal order. Okay. And it is builder that mutation and the query will be paper order ID then we will return first, the URL will be paper. Underscore API, underscore URL, then slash capture order. The method will be post and the body, we will send order ID. It should be capital because we implement it in the back end practice, and it is paper Order ID like this. We will send Payal Order ID to back end for capturing. The next one is a query to fetch the PayPal client ID from the back end. This client ID is used by front end PayPal SDK to initialize. Right here, let's add Kit PayPal client ID, and it is builder dot query. Then we will add query, and then we will use the dedicated PayPal URL to get the client ID. So URL, this PayPal config underscore URL. And right here, we will have keep and use data for 5 seconds. Then right next to here, we will get my order. So get my order or make it ler, then builder. Dot mutation and right here or query, sorry, because the sod is good. Okay. And right here, the URL or sorry, first of all, the query. Then right here we will add the URL with the path of Orders underscore URL MIE like this and also we'll keep news data. So let's copy it and best it right here. Then next, this end points will be for Admin user to get all orders from all users. So get orders builder dot query, and the query will be URL with Orders URL, and also right here, you'll have keep Muse data for 5 seconds. And also we right here, adds here to deliver order, and this is also for admin user, deliver order builder mutation Query with order ID, but this will be small letter and right here we will have URL. The URL will use variables, so it's a Batak and underscore URL Order ID, Deliver like this. The method is put because it will update. Finally, let's export these slices. So export equal order ABI slice. First one is, use create order mutation, use get order details. Query. And use pay order mutation, use create order, paper, mutation, and use capture order, mutation and use get payer client ID, query and use Get order orders query, and use deliver order, t. And finally, use G orders query. Let's fix this details and write about right here. So that's it for this lecture, CU and the next one. 80. Building the Place Order Screen Part 1: Okay, then in this lecture, we will build the Place Order screen, which serves as the final review step before confirming an order. This screen will have shipping details. It makes sure it is implemented, payment method, and summary of car items and total cost. Crucially, it handled the creation of a new order by dispatching data to our Back end API. We also implement client side navigation guards to ensure that users complete all necessary steps, which is shipping and payment before reaching this state. Okay? So let's add this product to CART and proceed. Then add some data here. Okay. Continue. And we are here in the place order. So first of all, we will import scroll view, touchable, obesity and activity indicator. Platform and safe area view. Also from react, you will import use effect and also make sure you are running both front end back end. So let's add here comma and use effect from react and import use navigation. From a react should be inside. React navigation native, and also import react redux, use dispatch and use selector. Also, let's import toast. Message from that or react Native toss message. Then we'll import from slices, Orders API slice, use create order mutation. So in order to create an order, then we will import the action to clear the card after order placement. Import clear Cart items slices cart slice. Okay. And finally, import colors from Utils. File. Like this. So first of all, we will add used navigation hook to access navigation object, so const navigation equal use navigation, and also we will select the entire card state from redux. So CST card will use selector with state and return state card. Then we would initialize the redux toolkit query mutation for creating an order along with it is loading and error state. So CST right here, create order and also is loading and error equal, use, create order, mutation. Then we will hook to dispatch redux action. So dispatch equal use dispatch. And also, we will use use effect hook to ensure the shipping address and payment method are set before rendering this screen. So let's add use effect, right here, we will add if there is no card shipping address, Dot address. We will navigation Navigate to shipping like this, LF, no, there is no card CardtPayment method. We will also navigation, navigate to payment screen. And right here, we will have dependencies, card dot payment method, and also card dot shipping address dot address and final navigation like this. And then we will implement handler function to place the order. So const place order, handler equal Async function. And then we will start with Try Catch Euro. First of all, we will cause the create order mutation with card details. So const response equal await, create order with these details, which is order items and it is card dot card items and shipping address from card shipping address, then payment method from card payment method, shipping price from card shipping price, we will have tax price. A and it is from cart dot text price and total price from cart to total price. All of these will be dot wrap like this to throw an error if the mutation fails. Then right here, we will dispatch to clear card items because these items become an order, so there is no need to store them in the cart anyway. And if everything is okay, we will navigation, navigate to the new screen, which is screens order or should be Cavital screen like this and also with order ID, and it is response underscore ID like this. And if there is an error, we will display the error as toast message if the order creation fails. So toast show we will show type of error text one, it will be error text two will be as variable. So if there is error data message or error dot error, like this, then we will set the position of this message to top and visibility time we will set it to 7 seconds. And now let's start with JSX, save a review with a style equal style dot container. And inside this container, we'll have scroll view there is no styles right here. So first of all, let's add a text with a style equal styles dot title. And right here we will have checkout or let's make it place order like this. Let's navigate to this screen. All right. Then next to this, there will be a view container with style equal styles dot GED Container and inside it, we will have another view with style equal styles, card. And right here, we'll have text. This text will have style equal styles dot card or card tight Okay. And the card title will be shipping details. Like this. And also, we will have another text. This text with a style equal style text. And inside it, another text with style equal styles, strong text like this. And we'll have address as a text. So that's it for this lecture, and we will continue in the next one. 81. Building the Place Order Screen Part 2: Welcome back. Let's now continue with our SF. We'll come back. Let's now continue with our JSX for place order screen. So right next to this address text, we will have card chipping address dot address and card chipping address dot City. And card the chipping address poster code, and card chipping address dot country. Okay. Let's see what we have output. All right. Then right next to this view, we will have now payment method card, so view with style equal styles dot card. And right here we'll have first text with style equal style dot card title. And right here, we'll have payment metal. Then we will have another text where the style equal styles strong text or text just text here. Okay. And right here, we have now styles, strong text like this. And inside it, we will have method, and right here, we will have card payment method. All right. Then we will have card for order items. So let's copy these two and right here, beat them. Then let's close our view. And right here, we'll have your order. Then we will conditionally render a message if the card is empty. So right here, card dot card items dot Link equal zero. Then we will show message and make sure the message component is imported and the variant equal info. Then right here, your card is empty as text. Else, if we have items in our card, we will run now view. Let's close it and right here, we'll have style equal. The lest or items container. And then we will map through card items to display each product. So add here card card items dot map with item and index. Then we will return view it's close it inside this view, it will have key equal index because the index is unique and style equals styles order item. Then inside it, we will have another view. This is for the image of the product. Close it and right here we'll have style equal styles dot image container. And inside this image container, we will have image. Make sure also image tag is imported. Then the source equal and we will put the URI to be item dot image. Okay. And the style equals styles product image. Then right after this closing give you, we will have another view. Is close it. And here, style, equal styles dot product. Details and inside it, we'll have a text where the style equal styles dot product. Name and right here, we will show item name. The name of our product order, then another text, this will have styles equal styles dot text inside it, we will show item QTI, which is quantity and multiply by item price. A and add here dollar sign to indicate that this is a price and right here, add equal. Then we will put another text right here to make the result to be strong text. So right here, add style equal styles, strong text. And here we will put the output. So let's add item QTI multiply by item price. And dot to fixed by two, like this. All right. Then right after these two closing view, we will have now another view with a style equal styles right column. And inside it, we will have order summary card. So view with the style equal styles dot card. And inside it, we'll have text. And this text will style equal styles card title, and inside it, order summary. Then we will put right here, row for item price, so view style equal styles marrow right here we will put item then next to it, we will put the card item price, text, and style equal styles price. Right here, we'll have card items price. Let's see our screen now. See what's wrong with text must be render within text dag. Yes, right here. So let's cut this and move this closing view right here. Then we'll have a text with items, and right here, we'll have style equal styles dot text. All right. Then right after this view, we will have now row there for shipping price. So let's add view style equD Stylest SamariowR here, we will have these two texts, so let's copy them and paste them. And here we will have shipping and card dot shipping price. Then also, we will have another row for tax price. So let's copy this. And right here, let's add it with text as text, then right here, tax price. Okay, right here should be tax. Okay. And then we will have right here, another view for total. So total. And here we will have total price this. Okay. So that's it for this lecture, and we'll continue at the next one. 82. Building the Place Order Screen Part 3: Now continue. So right after this view, we will have now to run conditionally display error message if there is an error. So add error, and we will show the view with style equal styles dot error container. And let's close our view. Then right here, we'll add component with variant of danger. And right here, we'll show if there is error message or error error. Okay. Then after this closing bracket, we will have touchable opacity. And this with style equal two styles. So let's add square placket styles dot button, and we will conditionally add style for button. So card dot card items dot ink if it is equal zero, and we will show styles button disabled. Okay. And on press handler, we will fire place order handler. And for disabled equal if the card item is length equal zero, or a loading state is true. Okay, then right here, we will have a loading. If it is loading, we will show activity indicator with color. Equal colors white, else, we will show a text and with the style, equal styles dot button text. And inside it, we will have place order. Okay. So that's it for JSX. But before we move to styles, we have to go above here in this grid container. So let's minimize all these card. Okay. Inside this, we should have another view and with the style equal styles dot left column and the closing of this view we'll be right after this like this and also this grid container should have both left column and right column. So what we're going to do is to minimize this right column and cut it and put it right here. So that's it. Okay. Please make sure you do it. Then let's go now to implement the styles. So container we have flex of one. Then padding of 16 and background color from colors of white and adding F platform, operating system is equal Android. F statement, it will be 20 otherwise. It is zero. Then we will add here for the title. This title will have font size of 24 and onto it, bold and the color from colors dot primary and margin bottom of 24, then text a line. Start. Y. And then for the red container, it will have flex direction of column for the car like ground color, color dot white, adding of 24 border radius of 12 shadow color from colors dark gray and shadow offset width of zero and the height of one. Okay. Then the shadow opacity 0.1 shadow radius three, and elevation two margin bottom of 16. Okay. And for the card title, the font size is 12 font weight, 600 and the color from colors dot text color and margin bottom of 16. Thin for the text font size of 16 the color from colors the secondary text color and line height of 24. Okay. Then for strong text style, it'll have one bold, and the color from colors to primary. Then order items, container, margin, Tupeight and order item with flex direction. Row and align items. Center, padding vertical 12 border bottom, width of one and border bottom color from colors dot light gray. Then for image container, it will have width of 64, the height as well, and margin. Right, will be 16 or the radius of eight and over flow heading. And for the product, image, the width of 100%, the height, 100%, and the size mood will make it contain in order to make the image fit our dimensions and for the product details, we'll have flex of one. And right here, product name font size of 18, font weight of 500 and the color from colors dot Primary. All right. And it will have Margin Boto, of four. Then for summary, row, flex direction. Raw and justify content space between and margin bottom will be it. Text the price. You'll have font side of 16 and a color from colors that takes color. And for the total row, here should be border to width of one. Let's make sure this total row exist in the total price. Yes, right here, it should be this view. So let's rub this style with square brackets and then add totter row or style totter row should be. Okay. Let's now continue. So for the total row and right here, border top color from colors to light gray. Then bedding. Top should be 16 and margin top of eight. All right, and we'll continue in the next lecture in order to rest of our styles. 83. Building the Place Order Screen Part 4: Come back before we continue with our styles. Let's go here into the card style and make sure this is pack a ground color. And also for the total price and total should have total text as a style and put it right here as well. And now we will implement this total text style. So Right here, we'll have font size of 18 and font weight of bold then the color from colors to text color. And for error container, you'll have margin top of 20 and for the button now, we will have background color from colors primary and adding vertical 12 border radius, eight, align items center and margin top of 32. Then for button, disable the background color from colors dot light gray. Okay. And for the button text, the color from colors dot white and font size 16 and font wet will be hold like this. There is something else that I forget to add here, we should add items price from card to items price. All right. And also, let's see where it is. Yes, right here. This should be inside text, and with the style equal styles strong text and add it right here. Okay? Adhere or leave it like before. Okay. Finally, we will have this left column style. Let's copy it and add it in our styles in order to add some margin margin bottom of 24. Also, let's make these card titles bigger. So right here in the car title, make it 22. And also this with strong text, let's make the font size of 16. Okay. And now, what will happen? If we press on this Place Order button, I should navigate us to the order screen. So first of all, let's create this screen right here the JSX, add our snippet. And let's try to add also some products to card Okay. Continue. So if everything is okay, it will navigate us to order screen and then clear the card items because that's what we implemented. So let's click. Okay. There is. Okay, total price, we have problem with that. So let's go back to our back end. Here we implement the total price. All is good here. We convert it or make sure it is number. So let's see the reduced method. Okay, I think the second argument of this should be a zero right here. So let's make sure that it's okay. So let's refresh our app. And try again proceed to check out, continue. And now, it should navigate us once we press on Place Order to the order screen and also clear the card items because it will be now as order document in our MongoDB Atlas. So place order. Okay, I navigate us successfully without any problem. And if you check now the Mongudb Atlas refresh. All right. Okay, here is our order and the order items as array. The first one is iPhone, and the second one is Samsung and with shipping address and the payment method and also the total price and all other details. And if you go back now to place order screen, you will see that you cannot place this order because it is now become an order and the card is empty. That's it for this lecture and see you in the next one. 84. Implementing the Order Screen and PayPal Integration Part 1: Hello, everyone. In this lecture, we are diving deep into the order screen, a crucial part of our ecommerce application. This screen is responsible for displaying detailed information about a specific order, including shipping address, items, versus, and payment status. And more importantly, we will implement the complex logic for integrating paper payments directly within our native. Because the papal integration involves a webiview which is a package for many web browser embedded within our app, and intricate communication between this webiVew and our Afinitive app could the order screen is quite large and detailed with code. So due to its nature, we will not writing this code line by line during the icture like previous. Instead, the full commented code will be provided in the lecture resources for you to review and integrate. We will focus on explaining the architecture of the flow, the data, and interaction points between the native violet. The web view and our end ABI for creating and capturing papal orders. So this is order screen. So in order to add it, we have here the file that will be attached to you. So let's copy this order screen, remove this one and paste the full order screen right here. And also we will go to components and copy them all and put them right here in the components folder like this. Third thing we're going to do is to import or install this package, which is blur view. So copy it, open a new terminal. And change the directory to front end, then hit the command NPM install React Native. Community blur and also we install the webiVewPackage. Let's see where it is imported in order right here. Copy this in the PayPal payment component and also MPM install reac Native web view. Okay? Let's go now to our order screen. So from react, we will import user State in order to manage component local state and use effect. Also for side effects like data fitting and subscription and use ref for creating mutable ref objects to access review methods and use to memorize the values to avoid unnecessary recalculations and use callback for memorizing functions to prevent unnecessary re renders. And also from Rac native scroll view to make the screen scrollable, activity indicator, which is the loader and platform to add some bedding in top in order for Bitter UI and with safe area view. Okay. Then we will import user Route from navigation in order to use Router and use selector to select the data from our using redux query, Test message and plurview which is package, will be applying for native blur effects. Then from Orders API slice, we will import use GetOrder details query to import our details for this order and use pay order in order to implement payment or order, and use the create PayPal order mutation in order to create a PayPal order and to capture it and also we will get the client ID query. And this use deliver order mutation is only for Admin user to press on deliver button in order to make this order delivered. And also from colors, we will import the colors. And here is five components for paper, which is order details, payment status and order items, order summary and papal pint. Of all, we will initialize the route hook to get access to route parameters. And then we will extract the order ID from the navigation parameters. And here, in this state management, we will state to control the visibility of paper with view model. And right here, we will reference to direct D interact with the view component. And this one state is to show loading overlay during payment processing. Then right here, we will fetch the data order data and is loading for loading Order state. If there is error also, and refetch it is a function manually refetch the order details, and we will call use GetOrder details query by ID. Then we will implement mutation function to create a papal order on our back end and set also the is loading value to B is creating papal order and error if there is error, papal error or mutation of use create papal order mutation. Then right here, we will have mutation function to capture papal order on our back end and loading and error states for capture, capture papal order. Using the hook to capture paypal payments which is use capture papal order mutation, okay? And here, this pay order mutation, we will hook to to update order our database when an order is paid because it's paid is boolean value either true or false. And also for the deliver is delivered, it is a boolean value like pay, which is either true or false. And then right here, we will call the API to get a client ID to fetch client ID and config and also for loading and error states. Then we will select user information from redux for admin access right here, and then we will use effects and memoize function. We will use effect to display those message for various errors and the dependencies for this effect because it will be changed continuously. These dependencies of this use effect. Then right here, we'll use callback function for handling paper button press with using of basic validation for opening paper web view. So here, we'll add if there is no order, we will return a toast message and return to stop this handle press function from working. And also, if there is no configuration and client ID, and also for the total price, and if total price lists or equals zero, we will stop these this function and toast these messages in order to inform the user there is an error. So that's it for this lecture and we'll continue the next one. 85. Implementing the Order Screen and PayPal Integration Part 2: Okay. Now, let's continue. So this memoized HTML content is used for WebView to render papal ptals. Okay? So here in the script, this function is used to display the status message within the web view right here with set time out to remove non errors messages after 5 seconds. Then we will add here event listener for navigation errors within the view. And then the function, load, papal SDK is the function to load, papal SDK with retry mechanism that will have or use papal configuration for our client ID. And right here, the script dot unload, we will initialize the PayPal buttons after SDK loads. Then right here, this script for error. So here, if retry count less than three, we will retry loading up to three times, then show status of retrying PayPal SDKload with info, and we will retry again after 2 seconds right here. Then we will send a message to react native if SDK failed to load, which is this failed to load P as decay after multiple attempts. This function, if there is any issue with buttons on the SDK, if there is an error, we'll show a message of paper as DC not initialized properly. And this function will call when the user clicks on create an order, so it will create an order right here with promises. And here it will stores the result function to be called from reactive. Okay. Then we will send a message to react native to request a PayPal order ID from the back end, right here, we will set time out to handle cases where back end doesn't respond. Right here, you will see error PayPal order ID request out. The limit will be 3/32. Right here, it is 30,000 millisecond. And here on approved function, this function will code when the payment is approved by the user. Then we will show the status of payment approved processing. Then we will notify readNtive to close model and how loading right here with order payer ID payment ID. This function on function is used if the user cancels the payment, and it will show a status of payment canceled by the user. This function on error function is called an error occurred during the payment. Right here you will see a error message that includes blocked or raw message that includes authentication. It will show this status message. Right here, it will notify the reagnative about authentication error to close the web view. Okay. So if everything is okay, right here, it will render container into the design container. Okay? And if there is an error, it will catch the error and with message of fail to render papal buttons, and also this function handle reagnative message, it will handle the messages sent from Ragnative to the WebVew package. So right here, if Ragnative sends the PaypadOder ID, it will resolve the promise created in the created order. And here in the LSF data type equal PayPal error from react native. If react native send an error, we will display it right here. And also, we will catch any errors with communication error and with proper message. Then we will add an event listener for messages from react Native. And finally, we will start loading PayPal SDC. And this will regenerate the SDMLFPPL client ID chains. Then we will implement a callback function to hand the messages received from the webiVew and right here which is Jason to parse, we will parse the data sent from WipiVew and here, if PayPal payment is approved, we will hide the WebiVew model because WibiVew model WebiVew will be handled by model, and we will show a global processing payment overlay. And by help of try CAC error, we will call our back to capture the PayPal payment. And right here, if capture is successful, we will prepare payment results for our database with these details. And right here, if everything is okay, we will update our order in the database to mark as pay to change the value from false to true. And then we will show a toast message. With payment successful, your order has been placed, and then we will refetch the order details to update DUI right here. And if there is any error, we will show it as toast message. And for CATH, if there is any error else, that will happen. And finally, right here, we will hide the processing payment overlay and here, if an authentication error occurs in pay WebView, we will close the WebView model, and hide processing overlay and here in the case, if request a PayPal or ID from our tag end and if there is any message, we will show it in the toast message. Then we will send error back to webby view if data is missing. Okay. And right here in the try we will call our back in to create a paypadOder and if there is an ID, we will send the payaOder ID back to our web view. Then right here, we will send error back to bi view if no ID is received. And in this line, we will send error back to webiVew if back in or the creation fails. So we will implement errors and cases for each method or way. So here, in the case of cancel, if payment is canceled by the user in the webiVew, it will show a message that you cancel the paper payment process, and also we will close the model of WebiVew right here, then break. And in the case of generic papal error occurs, we will show this message and also close the model of Wop View. And here in the default, we will handle any other unexpected messages from the WP View. Okay. And also here, we will catch any passing or unexpected errors on message handler. And these are the dependencies for one message use call back. So as I said before, it is too huge and too complex, so I prefer this way in order to implement the order screen. So that's it for this lecture, and we'll continue in the next one. 86. Implementing the Order Screen and PayPal Integration Part 3: All right then, let's continue now for our order screen functionality. Right here, we have deliver handler function, this handler for making an order as delivered, and this is only for admin functionality. First of all, we will cause the mutation to mark the order as delivered. Then we will refitch the order details to update the UI and show toast message of sexist. And if there is any error, we will show this message as tossed right here. Then we will conditionally render is loading, which is activity indicator if is loading, error is true. And if there is any error, we will show this as failed to load order or the error that we come from the back end. And also if there is no order, we will show a text message like this. Then for the main render function, we will return scroll view for scrollable screen. Let's navigate now to order screen, add this product to card and proceed to checkout, continue and place the order. Okay, this is order screen where it shows the order details, which is B right here in this component. So discover this. So this component will show the shipping details for this order with the name of the user and the email and his address. We will pass them as props and implement it in the order details, it will accept order as a probe with also the styles that we already implement like it in the previous lectures. Okay? The second component is payment status. It will show the state of the payment method. So it will show the payment method from order to payment method, which is paper. And if the order is not paid, if the value is paid is false, it will show this message. And if it is paid and not delivered, it show info message with thank you for payment, and we are preparing your order for delivery. And if it is paid, it will show successful message. And also, if it is delivered, it will show successfully delivered, and we will sit both to the right date. Okay? And for the styles as well, it is straightforward. Then for the order item, this component will display list of items in our order. So which is this card, if we have more than one item, it will show them all. And also, if there is no items, it will show text message of no order items found. And if there is items, it will show the name, the quantity, and the total price to fixed method and also with these details. Then for the order summary component, it will show or display the order summary and actions button like pay with PayPal and deliver, so it will pass these props, which is order user info is loading deliver, is loading PayPal config and all other props, and it will accept him right here. So here is order summary component and the card. So it will show the items and the items price, the shipping value, and the tax, and also the total payment, like this. All right. And also, if the user click on pay with paper and the payment is successful, and the user is admin, this button will become marked as delivered because only admin user can mark the order to be delivered. If he is not admin, it will show him just pay with paper and then right here, it will show a message of successful that you successfully paid on the date, and it will show a message of your order will be placed as soon as possible. Okay. And also, the payment PayPal component. So this model will contain the webiviewt me show you this WebiVew right here, here is our webview. So the visible, it will control the visibility of the model, and on close, it will function to close the model, and papal SGML will pass the generated DMR for the webviewO message the function that we implemented in the order screen. So it will pass the function to handle messages from WebView and WebView review. It will pass the ref to the control Fobi view. So let's see it. And as you see right here, here is our title, and you can close this from this button. And also here is our web view with bezRL which is paypal.com, and we'll accept all of these props like this with these styles. And that's it for the order. Then right here, we will overlay display why payment is being proceed. So if the platform is IOS, we'll use Blur review for IOS for antedbl effect. Okay? And right here, fall back for Android, so it will become semi transparent background. And right here after the Persis is complete, it show this text with processing your payment. And here is our style for this order screen. Right now we are logged in as Admin. So let's go and click on PayoPPL and click on PayPal button. So now let's login with our account. In order to get email a password, go back to developer dopp.com for developer Dashboard and go here the testing tools, Sandbok account and you have to create account, email for this. So here we would use type of personnel. If you don't have an account, you can create an account and make sure it is personal and created. Then after that, click here on the three dots, view Edit account and copy this email and also this password, and right here, paste the email and for the password, put it right here, then log Okay. Then click on Versus. As you see, it look a success message. And here, it show a message for preparing the order for delivery and here successfully paid on the date. But here, let's fix this message, show the payment status component. Let's go right here. It is for now a text. So let's remove this and make it message component with variant of success. Okay. So also let's remove. This is style. Yes, I think it is better now. And because we are admin user, we can also mark this order as delivered. So click on Mark as delivered. And now it is show a success message with successfully delivered on this date and time and also fix this to be message and remove this is style. And the variant will be equal success as well. And also, let's remove these styles. So that's it. And if you see now, the two buttons are disabled because we have everything done. So now let's try to buy an order with an Omar user account. So let's close this Expono and go to the sittings. Right next, we will implement Lookout. But for now, we have to clear the data. So clear storage and clear cache. Let's go back again to our Epogo and open with Android Okay, right now, they are not logged in. So let's try another thing now. So the quantity, we will select all the quantity in order to test the count in stock functionality, proceed to check out. And let's now login with our or Mart user sign in. Let's add our details. And continue. Let's order. And then let's be with Paper. And click on paper. Let's now add our email and the password per Logan, sorry. Then Persis for this or the Okay, as you see, it is successfully paid on, and it shows this message and also preparing for the delivery. But here, there is no mark as deliver button because this is for on the Admin user. Okay, that's it in this lecture. In the next one, you will fix this issue by displaying empty message and also for the account in stock after the payment is successful. So see you. 87. Fix Message displaying in Order Screen and Disabled Add To Cart Button: We'll come back. In the previous lecture, we complete our payment structure for this application, and now we will fix some issues that in our order screen, such as these empty messages. So in order to fix them, let's go now to component in the payment status component, and right here, we will make this order that is bade outside this message and remove this bracket and add it right here and also the, put it right here. As you see, it is removed now because the order is not paid yet and also is delivered, let's cut this and put it outside the message component and close the bracket right here and also is removed. Let's remove this vertex and now let's try to pay for this order. All right, as you see, a message is paid, and because this is not an admin user, we cannot mark this order to be paid. So for now, let's add here also a button in order to navigate to our home screen. So in the order summary component, let's first import use router from Ebo Router and initialize our router, so Const router, equal use Router. Then right next to this closing bracket, we will have home screen, and it is not depends on any of these functionality. So we'll make it outside. And right here, we will have a text, and this text will have home screen. Like this. And here we will add style for this button, so it is styles dot button. And also on press handler. We will navigate to router dot push to our home screen. And for the text, let's add same as this style. So copy it and put it right here. And let's click on it. All right. And now we will fix another issue, which is for any stock status. So first of all, let's log in as an admin because we want to test also. The second is driver message if it is shown or not. So let's remove our storage for this application. Clear the storage. Now let's go back here and open it with Android All right. Let's now to add all quantities for this order that's stored in our database, which is 23 and proceed to checkout. Then let's log in as admin. And with password and sign in. Let's add dammi data here. All right, and continue. Place disder. And for now, let's pay with paper login with our email and also for the password that's from dvaler dot paper, then from account Test. Then let's purchase for this order. Okay. It is paid now. So let's mark it as delivered to see if the message for delivered shown now, so the message of delivered is successfully outputted. So for now, let's go to home screen again to see this. So the state of this become sold out. But here, if you go, you will see that this ado card is enabled because also this one is not disabled. So in order to fix this, we have to go to product details card. And for the disabled at to card, that's from product screen. So let's go to Product screen. And here we implement disabled add to card if product dot count stock is equal zero, and we will pass it right here, which is disabled add to card, but this will not work. So let's go up and copy only this and comment this out. Then go back right here in disabled, add to card and add it like this. Let's now try again. As you see, it is disabled. But there is another problem that I will show you. Now, and this is because of async storage. It is too slow to change the state of quantity. So let's try to buy this mobile and with all data, proceed, continue. And place the order. Let's get rid of this error. So go to order Samari and here should remove this string, and now it's gone. So let's try to pay with papal and complete purchase. It is successful, so let's go to home screen and this status change. But for the button, it is not converted to be disabled button because the process is too slow like this. So in order to see the changes, we have to make some moves and back again to this. And it is now disabled. So to fix this issue, we have to go into product screen, also, and import from react Navigation Native use focus effect, and it is work like use effect and also from react, we will import, use callback hook, and this is very important. You have to put or implement the use focus effect right next to this refitch because as you know, refit, it will refitch any changes that happen to our product details query. So let's implement it right next to this query. So use focus effect. And right here, let's add use callback function. So let's add run a function like this, and now we will add refitch like this. Then right here, we will add refetch as dependency because it will update it continuously. So put it right here. So let's try now with these airpods. But first of all, let's refresh our front end, click on R to rewrote the or you can also reopen it from here in order to implement the changes. Otherwise, you may see errors. Let's try with these abuts and select all products and proceed, continue All right. Now let's be with Bi Bal. Okay, let's go now to home screen and to our Airbod. As you see, it is updated quickly and it is disabled now the button, so you cannot add it to Card anymore and also for the status right here. That's it in this lecture. And the next one, we will start to implement order screen that will make user C all orders that he made so far. So in the next lecture. 88. Fix Fragment Error: All right. Let's now test this scenario. We will add this product to card and proceed. And then, either if you pay or not, let's just pay for this order. Okay, then go back to our home screen and add any product to card. Let's see what happened. I look error, and this is because we have a huge navigation. So in order to fix this issue, we will go to Product screen, and in the navigation use navigation, we will make it navigation dot push like this. So let's try again. Add this to card. Proceed. And then place order. Okay. Now let's go back to home screen without any problem and try to add any product to card. This is W solve. So we are navigated shopping cart without any problem. And also here in the place order, let's see what also happened. So it is the same error. So let's go to place Order screen and write here in the navigation dot navigate. We will make it dot push. So let's try again. Okay. Okay. So this is the first time. Let's go back and try to add another product to card and then place the order. Okay, it has worked without any problem. This is alternative solution, and at the end of the course, we will make a huge enhancement in our navigation. We will use just Explore Outer instead of react navigation because we use two packages for now for 89. Building My Orders Screen Part 1: Now we will dive into a core part of MEE Commerce application, which is my orders screen. This is where users can view comprehensive list of all their past orders. We will be breaking down the order ag native component, which is responsible for switching, displaying, marriaging the various status of a user order history. Handling user who are not logged in displaying loading indicator and present order details like total price payment status and delivery status. So this screen, we will tie them all together, and let's get started to see how it work. So first of all, let's go right here in order inside our tabs and from the Act, we will import use effect and from react native, we will import activity indicator, and also save a review and platform like this and also, that's it for now. Then you will add or import use selector Act redux. And from Expo Router, we will import the use Router and also use Focus Effect and import Font Awesome from at Expo Victor icons slash Font Awesome. Then import from slices, order, Epii slice, use G M Orders query, and import colors from our constant Utils f. Then we will get the user information from redux store OT slice. So right here, user info equal use selector stat and tar state dot OS and also we will fetch the orders using redux to a query hook and the structure data, loading state, error, and also the refetch function. So cost data and rename it to be orders and loading, and also error and refetch equal use get my orders, query then we will initialize the router for navigation. And we will use use effect focus effect to refitchOders whenever the screen comes into focus. So use focus effect. And right here, we will add react use callback and right here, we will call the refix function to get latest order and the dependency array, it will be refetch is like this. Okay. And also, we will add here handle Login, press. And this handler, when login links is pressed. Con handle Login, press, equal function, and then return router dot push to Login screen. All right. Okay. Then we will conditionally rendering if the user is not logged in, we will show a message, ask them to log in. So this is by if statement. If there is no user info, then we will return safe area view, and this save area will have style equal. Styles save area. And right here, we will have container for the message. So message Let's make sure, okay, the message container is not imported, so let's import it. Message container and close it this with style, equal styles dot Or first of all, we will have a view. And this view will have style equal two styles. So the first one is Styles container, and the second one styles dot message container. And inside this review, we will have message component with info variant. So the variant equal info. And right here, we will have text. And with the style, equals styles dot message text. And right here, we'll add, please login, and this login will be inside. Another text Okay, let's move this up this text will have equal styles dot login link on press handler, it is equal handle login, press, like this. But for now, it will not shown because we already logged in. And right next to this text, we'll have to see your Orders. So let's try now. Let's try to remove our data from storage. And go back to our Expo go. Open the terminal. Okay. So let's move right here. As you see, right here, here is our message. And that's it for this component. 90. Building My Orders Screen Part 2: Also we will have here, conditionally rendering if the orders are still loading, we will show loading indicator. So if is loading, then we will return safe area view, and this area will style equal styles dot safe area. And inside it, we will have a view with a style equal styles dot loader container. And right here, we will have activity indicator, and this will have size equal large and the color equal colors, primary color like this. And also, we will conditionally render ring if no orders are found. After loading, we will show a message. So right next to this, we'll have if orders if there is orders and orders that link equal zero, we will return then safe area view with the style. Equal styles safe area here should be area as well here. All right. Then right here, we will have a view with style equal two styles, style, container, and the second one styles message container, and inside it, we will have message component with variant of info, and right here we will show a text style equal styles dot message text. And right here, you haven't any orders yet. Okay. So let's now go to our main render here and remove this and add safe area view with style equal styles dot safe area. Then right here, we would have the view container. So let's add style equal styles container. Then we will show text for screen title. So styles equal styles dot title and right here, my Orders as text. Then next to it, we will have now a table header for order details. So if you with a style equal styles table header and inside it, you'll have text. And this text will have style equal styles, or actually it is two styles, so let's add it inside. Square bracket. Okay, styles dot header cell right here, we will add flick one like this, and here we will have hash. So let's copy this for more than four times, copy one. And right here, it should total and here, paid, and here delivered, and also a view, let's remove this. So now let's login to our app and Okay. So in the next lecture, we will start to implement our flat list. So see you. 91. Building the _My Orders_ Screen Part 2: Now let's continue. Next to this closing view, you'll add flat list. And it seems that we didn't import it. So make sure it is imported now. And then, right here, we will add the data source for the list. So data equal orders because we rename it above and the key extractor which is a unique key for each item. So right here add item and then item dot underscore ID because the ID is a unique key. Then content container style equal styles dot or just, you will have padding bottom of 20 and then we will render function for each item in the flat list. So right here, render item and here we'll add item and rename it to be order and also index. Then right here, let's return a view, close it, and with the style equal styles dot to and right here, we will have the order number, so add text with a style equal styles. Let's have two styles, so let's add square bracket. So styles dot CL and the second one will be flex one. And here we will have index plus one. Okay. Then for order total price, you'll have here text now with same style. So let's copy it and paste it right here, and here we will have dollar sign and with order total price. Okay. Then we will have now a view to show payment status, it will display the paid date or red X icon to show if it is paid or not. So here is our data, but without any styling, so view, and let's close it and inside it, we will have style equal styles. Or also square bracket and inside it styles dot CL. And second argument will be Flex two and align items center, and also justify content center. And inside this view, we will adhere curly bracket and to make sure order single order dot is paid. If statement, if it is paid, we will show text and this with style equal styles dot status text success. And inside it, we will have order dot paid at dot sub string to convert it to be readable, time, and 0-10. And for the s right here, we will show font orsome icon with name equal times and the size 16 and also the color equal Colors text, red, like this. So let's see now or order. Okay, here it should be order, not orders. Okay, as you see right here, this order is not paid, so it is show times or icon of X and also the dates. And let's say this okay, right. Next to this view, we will have now to view order button to navigate to the specific order screen. In order if he wants to pay for this order, for example, he can navigate to this order and pay for it. Okay? And also for the paid, he can also see the order screen of this order. So touch a pin. Opacity. And right here, you'll have style equal two styles as well. So the first one is styles dot CL and second one with the flex of one as well. And this sple opacity will have on press handler and this equal router dot push. And here we will have first thing, it is the path name. So this is the path to the order screen. So let's add screens and order screen to navigate us to our order screen. But we have also to add right here, pass the order ID as a parameters, so params it will be order ID from order dot underscore ID from this render item. Like this. Then right here, we will have now the I icon, but first of all, it's here at the register. But it is I add here font Osm and the name equal I and size of 18 and the color from colors dot primary, like this. So for example, if you click on any of these icon, it should navigate you to the order screen. So let's click, as you see, it navigate us to this order screen. And also, if the order is not paid like this, you can back here and pay without any problem. Okay? So let's go back. Let's now start with our styles. So first of all, we'll have safe area and this safe area. With flex of one and background color front colors of white and adding to. If the platform is equal. Android, it will be 20 otherwise zero. Okay. And for the container, here the flex of one, adding 16 and let's add also background color of white and also for the message container, we will have justify content to be center and align items to be center as well. Then for the title, font size of 22 and font weight, 600 and the color from colors dot Primary Text Align, sent start and margin of 16 Okay. Then for the loader container, it will have flex of one and justify content sinter, align items to be center as well. And then the color from colors or here should be loader container without any colors because the loader itself color is primary. And for the message text, it will have font size of 16 and text align center. And the color from colors text color. And for the gi link, it will have color from colors primary and text decoration line, it will be underline like this. So that's it for this lecture, and you will continue in the next one for the rest of style. 92. Implementing The Profile Screen Part 1: Welcome to this lecture. Now, we will start to build a crucial part of any user centric app, which is the profile screen. This is your personal app, a central place where users can see their basic information and navigate to other important sections like their order history, account setting, and if he is an admin, he can see the dashboard panels for products and users and orders. And he can also edit the users and the product and also create new products. So also, we will handle a lookout function right here, and it's all about creating a smooth and intituitive experience for the user, right from their personal space in the app. So let's navigate now to profile, and we will remove the and also use the roster to start from scratch. So right here, we will import image and touchable opacity. And scroll the view and safe area view and also platform. Then from react redux, I will import use selector and use dispatch. Okay. And from Expo Router, we will import User Router. Okay. Also, we will import on icons at expo icon on icons. Then import from our slices. Use our ABI slice, we will it use Loot mutation for handling Logout API code. Also, we will import from other slice. We'll import Lookout to clear user authentication state and also import from slices and card slice reset card. This is for clear users shopping cart, and also we will import message component And finally, import colors from constant file. And first of all, we will get the information from the redex store Oath slide, so user info, equal use selector and retur state with dot Oh. Then we will dispatch function to send actions to the redux store. Cost dispatch equal use dispatch and initialize the router for navigation. Cost outer equal use router, and we will use the use Lookout mutation hook to get function to call the Lou API. Cost Lou API equal use Lou mutation. And we will implement a function to navigate to the ogen screen, so cs handle Logan equal function that will return router dot push to the login screen like this. And also, we will implement a function to handle the out process. So const, handle or Lou handler. Equal ASN function. And we will start with the try catch error. And in the try, first of all, we will call the lookout API and unwrap the result to get the actual data or throw an error. So I wait Lookout, API. Call here should be call. Okay. Look out, API call, and dotrAb then we will dispatch the lookout auction to clear the user info from redux Stead. Dispatch Lookout like this. And also, we will dispatch the reset card action to clear any items in the card. So dispatch reset card like this. Then we will replace the current screen with the home screen to prevent going back to profile after Logout. So router replace into our home screen like this. And if there is any error here in the cache, we will log it. Console log right here, Logout error, and we will g the error. All right here should be comma, like this. Then we will conditionally rendering if no user information is available, we will show a message. So if there is no user info, then we will return safe area view with a style equal safe area and inside it, we will have container to center the message. So view with a style equal styles dot centered Container. And then we will display a message component prompting the user to log in. So message and with variant of info. And right here, we will have a text with the style equal styles dot message text. And right here, we'll have please, and then another text with the style equal styles dot login link, and also it will have on press. And then we will handle or add handy login. And right here, we will add login. As text and then right next to this closing text to see your profile. Then right next to here, we will implement a sub component to render individual menu items in the profile. Const menu item, and this will accept icon and title on press and also a last then we will add to Chapel vasity with two styles. Style equal styles dot Menu item and Nut if it is not is last, and we will add styles dot menu item border. All right. Then we will have on Press handler. It will be or accept On Press. So right here, we will display an on on icon from on icons, and the name of it will be as variable icon because we will have multiple icons and the size of 22, the color from colors dot primary like this. And right here, we will have a text. This text with a style equal styles dot no ITM text Okay. And here, it will display or attach the title and also we will display a Chevron forward icon on the right. So on icons, and this is fixed, so we will add Chevron. Dash forward and the size 20 and the color from colors that secondary. Like in the next lecture, we will start to implement our main rendering on the profile screen when a user logged in. 93. Implementing The Profile Screen Part 2: Continue now with our Min JSX. So right here in the retail, we will return safe area view with style equal styles dot safe area. Then we will add scroll view to allow the content to scroll it overflows. So scroll view and right here, we will add content container style, equal styles dot scroll content. Or let's make it. Not self closing like this, right. Then right here, we'll add a view for profile picture and user name and display, which is card, so image or a view, first of all, and this will be with style equal Stylestfle card and inside it, you'll have image and this image with source equal require and the path will be from assets, image profile dot PNG. This is static profile image. And also the style equals styles dot profile image. Then we will display the user first name. So right here, we will add text and the style equals styles user name. And right here we will show user info dot dot split to take only the first name and then right here, zero. Okay, as you see right here, here is the name of Edwin. And then right next to this view, we will have another view. This is the menu containing various navigation options. So view with the style equal styles dot Minu card, and inside it, we will have menu item for account information, which is a new page or new screen. The icon equal person Outline, and the title will be account information and on Press handler will navigate us to router dot push. And this is account information for NAM, leave it like this. But in the next time, we will start to implement it. And then also we'll have another menu item. And this will be for orders. So I can equal document textOline. And the title will be orders and on Press handler, we will navigate. So Router dot push to the order screen that we already implement. Okay. Then we will implement another new item. This is our card, so icon equal Card Outline. And the title will be card and press handler will navigate us to card screen. So screens and or here should be dash screens, close bracket dash card like this. Okay. Also, we will conditionally render ring only for admin specific menu items if the user is unadm. So right here, we will add user info dot is Admin. Because these will be for only admin, we will show now let's add fragment and inside it, admin, menu item for products. So minu item, and right here, the icon equal cube Outline. And the title will be products. And also on Press handler will navigate us to router dot push. And this is the path of it. So AdmilPduct is screen. Okay. Also, we will have menu item, and this is for all orders for all users. So the name of icon will be Outline and the title. Orders and on press, we will navigate to item admin order list, screen. Okay. And also, we will have Mu item. And this is for icon equal list of users. So People Outline. And this is the name of our icon. And the title will be Users and On Press handler push two Admin User List screen. Okay. And right next to this closing bracket, we will have our last menu item, and this is for Lookout. So icon, the name of it Logs Out Outline. And that title will be Lookout. And on press, we will calls the Lou function, so Logout handler. And finally, we will mark this as the last item to remove bottom border, so is lost. Okay, let's start now with our styles. So right here, safe area, 12 with flex of one, background color from colors dot of white and padding top if the platform dot operating system equal Android. It will be 20 otherwise, zero, then centered container with a flex of one and justify content center align items center and bedding horizontal to be 20 and margin top 20 as well. Then for the message, text font size 16, and text align center, and the color from colors dot text Color. Also for the login link the color from colors prime and also font weight, 600 and text decoration. Line line like this. Then scroll container or content. Align items, center and padding vertical 24 and padding to to be 20. And for the profile card, it will have align items to be center and background color from colors to twit and padding vertical 24 and padding horizontal 16 and border radius 16 as well, and the width 90%. And shadow color from colors got dark gray. The shadow of sit width of zero and the height four, then shadow opacity 0.12 and shadow radius to be eight elevation, two, and margin bottom to be 20, margin top then, like this. So that's it in this lecture, and we will continue in the next one. 94. Implementing The Profile Screen Part 3: All right, let's continue now with our styles and the profile screen. So the next style will be for profile image. And this will have width of 96 and the height as well, and for the radius of 48 and margin bottom 12 for the user name, it will have font size of 18 and font it 600 and the color from Colors dot text Color. Then for the menu card, I will have background color from colors to white and border radius. 16, padding vertical eight, and width 90%. And shadow color from colors to dark gray, shadow offset, the width will be zero and the height will be four and shadow opacity 0.1, shadow radius, six and elevation to like this. Okay. Then for the menu item, to have flex direction, and align items center, padding horizontal 20, and padding vertical to be 16, and the width will be 100%. Okay? And for the menu item border, the border bottom width one and the color from colors to light gray. And for the menu item six, flex, one, and margin lift 16 and font size 16 and the color from colors to text Color and font weight 500 I should now render our menu items. So let's see what's wrong from the beginning. For the name convention, make this component with capital letter, which is profile and export it as well. And also, right here in the safe area, it should be styles that safe area like this. And also for the minu item, here it should be component, not a function, so remove this and add bracket and close it right here and remove this column. So let's see now. All right. And also in the menu item here, this should be a string, let's remove calibract also right here. And for the press here should be orders at order. And also for the styles, we have in the menu item border Yes, right here. It should be border bottom, color from colors do light gray. Let's also go up here in this menu item that will navigate us to our orders. It should be wrapped inside Bracket, and here router dot push to this route. Okay? So for now, this account information is not available, the route, but if you want to navigate to orders, you can press right here and it will navigate you to your orders and also to the card and product is only for Admin because we are logged in as admin, but for now, it is not implemented yet, and for the orders and user. So let's now try to look out from this admin account and login with normal user, which is not an admin user. All right. So let's go right here. Let's log in now. Okay. So if we go now, as you see right here, because he's not an admin user, it will show him only account information, orders, card, and lookout. All right. So that's it for this lecture. And the next one, we will start to implement account information in order to make the user can update his account information like name, email, and the password. 95. Implementing The Account Information Screen Part 1: Hello, everyone. Today, we will focus on a critical feature for any personalized application, which is account information screen. This is where user can take control of their personal details, such as updating their name, email, and also password. We will explore the account information component, which is provide a secure and user friendly interface for managing these sensitive pieces of data. See how it pre fills existing information, handle password confirmation, and communicate successful updates for any error back to the user with clear messages. So let's dive and understand how to build a robust account management feature. First of all, let's go right here in the slices. In the ABI slice, we should add here tag types and order and then go here and they use our API slides, and we will implement the use profile mutation. So right here, let's at profile. And this will be with Builder dot mutation. Because the method will be put. So right here, we will add our query with data and then return here, the URL will be at acti with users underscore URLs Profile and the method will be put and the body will be data. Then we will export this mutation, use profile mutation. And now let's go to our screens and add a new one with the name of account information dot JSX. Okay. And first of all, we will import from react native text input and touchable opacity. And scroll view safe area view and platform, and also activity indicator like this. And from react, we will import, use state and use effect. Then from react, redux We will import use selector and use dispatch and importon icons from Xp Victor icons on icons and from users API slides. We will import use profile mutation and also we will import set credentials from slice. Then we will import colors from our constant and Import message component. And finally import toast for toast messages from react native toast message. Then we will state variables for form fields, which is name, email, assord and confirm Assord. So right here, const name and set name equal use state of empty string. And email. Is it email and for the password. And for the confirmed password. Collusive state of T ring or falls, first of falls it is in this ring. Then we will set state variables to toggle password visibility so cost. Show password and set, show, password to be false in the first or beginning, and then show, confirm password. And set show confirm password, and also with false value from beginning. Okay. And also, we will use stat to set a variable for store and display for related errors, so cost error and set error. Equal use state of empty string as well. Then we will get the user information from dax OT slice. C user info equal use selector with stat OT. Then we will use the use profile mutation hook to get the updated profile function and its loading state. So right here, Cost update profile, and also is loading, and we will rename it to be loading, update, profile, equal use profile mutation. Then we will get the dispatch function from redux to send actions. So const dispatch equal use dispatch, and we will implement use Effect Hoc to populate form fields with existing user info when the component mounts or user info changes. So use effect and right here, we will add if user info, then we will set the name from user info, dot name and set email user info email, right here, we will add user info as dependency array because it is run when user info changes. Then you will implement function to handle form submission. Equal aN function and return. So first of all, we will check if the password and confirm password match. So if password is not equal, confirm password, then we will set the error to be password do not match. Okay. Then we will stop the function execution. So return like this. And right next to this closing F statement, we will add try catch error. And right here in the try we add costs equal a weight, update profile. With name, email, and the password and dot R to extract the actual data or throws an error. Then we will dispatch the credentials action to update user info and redux store. Dispatch set credentials and we structure the response, so it is like this, and we will clear the error, set error to be empty password, empty string, and clear the password field for security. So set password to be empty string, and also set confirm password to be empty string as well. Then we will toast a message, so toast the how with this type will be success, text one success and Tix two, we will set it to be profile updated successfully like this, and the position will be top and visibility time we will set it to be 5 seconds and if there is any error, we will set it right here, but on the next lecture, so see you there. 96. Implementing The Account Information Screen Part 2: Continue now with our submit handler function. So right here in the cache, if there is any error from the API call, we will set the error state with message from the error response like the set error to be error message. Like this. And then we will toast an error type will be error and text one update failed, and text two, we have here error data. Dot message like this. And now let's start with our main JSX. So right here, let's add safe area view with the style equal styles dot safe area. Then we will use scroll view to make the content scrollable. And inside it style equal styles Scroll content Okay. And first of all, we will have screen title. Okay, then container for the form elements. So view style equal styles for Container and inside it. We will display error message. If there is error, state is not empty. So if there is error, and we will show message component with variant equal error. And right here, we will add text with error like this. Then right here, we will add input container for the IN, so you style equal styles input. Container and inside it, we'll have text for the label. And here is the name. Then we will add text input with style equal styles dot input and place harder, Enter name and the value is equal the name and unchanged text will be set the Okay. And the second one for email. So let's copy this review and paste it right here. This is for the email and here, email, and the value will be email and set email. Then we will have input container for password with show and hide functionality. So right here, view seviw with style, equal input container as well, and inside it, text of password. Then we will have view with the style equal styles password, container, and inside it, we'll have text input with style equal styles password, input, and place order, Enter password. And the value will be equal password as a variable and unchanged text, set password, and also we will secure text entry, equal nott show password like this. All right. Then we will have right here touchable opacity, and this would the style equal styles dot icon, and also on press handler will be function to set show password to be show password like this. And right here, we will have on icon with name I will be variable. If show password is true, it will show I of outline, si outline. Okay. So like this. And for the size equal 24 and the color from colors do primary. Then we will have input container or confirm password with show and hide functionality. So next to these two closing view, we'll have now a view with style equal styles input container, and then text with style equal styles dot label here, confirm Password. Then you'll have another review where the style equal styles dot password, container inside it, text input. And right here, we will have style equal styles dot password input, and the placeholder will be confirmed password. Then the value equal confirm password value change text as well. It will be set confirm password, and secure text entry to be not show confirm password. Okay. And next to this, next input, we will have touchable opacity with the style equal styles dot icon. And with press handler right here. And here we will run, sit, show, confirm password to be not show, confirm password like this. And right here, we will have also the on icon with the same these functionality, so let's copy it and put it right here. Okay. But here should be show, confirm password. Okay. Then we will have update button, right next to these two closing view, so touchable. Opacity with a style equal styles update button and it will have also press equal submit handler function and disable. If the loading update profile is true, then right here, we will have also to show activity indicator if there is loading, so if loading update profile, we will show activity indicator. With color equal colors to white. And else we will show a text with style equal update update, bottom text. And right here, we will have update as text. The next lector, we will start to implement our styles for this screen. 97. Implementing The Account Information Screen Part 3: Welcome back. Let's start now with our styles. So first one would be safe area. Safe area. Flex one pack your ground color from colors of white and padding top F the platform operating system equal Android will be 20 otherwise, zero. Then for the scroll content, it will have flexigro of one and justify content center. Then for the foam container, I will have background color. Colors to white and margin 16, padding 16 and border radius 12. And shadow color from colors that dark gray, and shadow offset the width, zero, and the height. Two then shadow opacity, 0.1 and shadow radius four and elevation will be two Okay, here's the error. So the justify content should be applied went container style prop. So let's navigateable. Okay, here, should be content container style. Let's back again, check out. Okay. Then for the title now. Font size of 22 and the font weight hold the color from colors primary and text align. Start and padding with the 20. Then for the input container. It will have margin bottom of 16. And for the label font size 14 and font weight, 500 and color from colors dot text color and margin bottom to be then for the input itself, back ground color. Colors dot white, and border width, one, and border color from colors light gray. Then border radius, eight, and padding 12 font size of 15 And for the password container, we will have flex direction, row, and align items. Center. Back ground color, colors, border width one and border color from colors the white. And border radius it as well. Then for the password input, the flex one and padding of 12 font size 15. And the color from colors the text color. And for the icon, padding will be 12 and update button. With background color from colors primary and padding 16 border radius. Eight align items, center and margin. Tu to be eight. Then for the update but in text, the color will be from colors dot white, and the font size will be 16 and font with bold like this. Password and confirm password should have border color. So let's go to password container. Yes, right here, it should be light gray. All right. Let's try now to update our user. And for the email, for example, and the click on Update, as you see, profile updated successfully. So if you go back, you will see the name changed. And if you look out and try to log in again with old one, which is john@gmail.com. And the password I will show you look in field, wrong email or password. So if we add the correct one now and sign in, as you see, it is signed in successfully. And also for the password, for example, let's try to update our password. Like this. And first of all, let's add make it shorter and click on Update. I show you password do not match message error. And also, if it is match, it should log also. Update failed because the password lists than eight characters. So let's try now to add right here. Okay, now it should be updated without any problem. As you see, success updated successfully. So that's it for this lecture. And on the next one, we will move to our admin dashboard functionality. 98. Implement Orders List Screen Part 1: Hello, everyone, and welcome to this new section. In this lecture, we are stepping into the shoes of an admin as we build out all orders list screen. This is a vital part of E Commerce platform, providing a centralized view for admins to monitor every order placed on the platform. We will examining the order list screen component, which is responsible for fitching all order data and giving admin the ability to quickly check payment and delivery statuses, as well as dive into the specific of each individual order. Let's explore how we bring this essential administrative tool to life. First of all, let's go here in the screens and add a new folder with name of admin inside this, there will be order List screen the JSX, and make sure it is the same path of this or the list screen. Then let's add our snippet and make sure you are logged in as an admin. So let's go here in the orders and we are now in the order screen. So first of all, we will import activity indicator. And flat list and touchable city and also platform and safe area view. Then from Expo outer, we will import we will import use Router. And we'll import on icon at Expo Victor icons on icons and import from slices. Orders, API slides. We will import, use get orders query to fitch all orders and imports component from components message, and import the colors from Constant five. And then right here, we will fetch all orders using redux tool cquery and the structure the data loading state and error. So const data and rename it to be orders is loading and error equal use get orders query. Then we will initialize the router for navigation. So cost Router, equal use router, and we will conditionally rendering if orders are still loading, we will show a loading indicator. So if it's loading, then we will return view with the style equal styles, loading container, and right inside it, we will have activity indicator with size equal lard and the color from colors primary. Then we will condition it rendering if there is any error for switching orders, we will display error message using message component. So if there is error, then return we will return view with a style equal. We will have two styles, so add Kelly bracket inside it. Square bracket and styles dot container. And the second one styles dot message container. And right here, you'll have message with variant offer and inside it, text with style equal styles message text. And right here, we will have error dot dot message or error dot error. Okay. Then let's go to our main render. We will display the list of orders once loaded without error. So let's remove this and add safe area, view with the style, equal styles, safe area. And we will have view with style equal styles dot container. And inside it, we will have first the screen title. So text. And the style equal styles dot title. And right here we will have orders as text. Then we will show a table header for the order list. So view, and with the style equal styles table header. And right here, you will have first or should be text with a style equal. I will have two styles. So the first one styles dot Headersl and the second one is flix with one. And right here, we will have hash then let's copy it. And right here, let's add user and here, paid, and here delivered. And also we'll have for view so these are the table header. And then right next to this closing review, we will have now flat list to render the list of orders. So flat list. And here we will have data, and our data will be from orders and key extractor, which should be unique key. So we'll have item and return item underscore ID and content container style. I will have adding bottom of 20 and we will have right here. Render item function will define how each individual order item is render. So render item and we will re name the item to be order and index. Then we will return right here, a view. Let's close it, and the view will have style equal styles dot table pro and first, we will have the order index, start from one. So Text and this text with a style equal. It will have two styles styles L and the second one will be Flex one. And here we will add the order number. Because it will be as list, and then add one because the first index will start with zero. And then the user name who placed the order. So let's copy this and past it right here. And here the flix will be two. And also, it will have number of lines equal one. And right here, we will have order to Tser here should be order, that orders and the user and order that user that name like this. Then we will have a payment status cell. So right next to this text, we will have a view, and it's close it. This view will have two styles, at cell, and the second one will be flex of 1.5. And right here, we will check if the order is paid. So order dot is paid. F statement, we will return text with a style equal styles dot status text. Success. And right here, we will have order dot paid at and dot substring in order to convert to be readable 0-10. Okay. And right here, else, if the order is not paid yet, we will show on icons, and the name of it will be times and the size will equal 16 and the color from colors text color like this. Okay, as you see right here, so here is the list of all orders that placed from the users. So as you see, the name here is Admin, and here is John, but this should be an icon, not cushion mark. Yes. Here, it should be from font osm. And also placed it right here. And then let's go to on icons and replace it with font ism. So let's took it now. Okay, it is now the correct icon. So that's it in this lecture, and we'll continue in the next one. 99. Implement Orders List Screen Part 2: Let's continue now. So next, we will implement the delivery stata cell. So right next to this closing view, we'll have another view. Let's close it. And this will be the same styles for the payment. So let's copy it and paste it right here. Then we will add order that is delivered. I statement. I will show text, and the text will have same as this let's copy it. And it's a here else To some just for now to get rid of the error. Then right here, we will have order dot delivered at dot substring 0-10 like this. And we will display red times icons if not delivered. So right here will be the name of Times and color from colors Text Red. And also this should be text red. Okay. And the size of this will be 16 as well. Okay. Then we will add view details button. So right next to this closing view, we will add touchable opacity with style equal styles dot cl and also flick of one as second style. And right here, we should add on press handler. So on press, we'll hire function and router dot push with path name, the path name will be two screens Order screen to navigate to this order screen. And the params will be order ID from order dot underscore ID. So we'll pass the ID as parameter. And right here, we will add FontosomO let's see the register. It is from fontosom we'll add icon. Okay, it is I. So the name equal I and the size. Make it 18 and the color from colors dot primary like this. So now let's start with our styles, safe area with flex of one, background color from colors dot of white and adding top if the platform dot operating system. As equal Android, it will be 20 otherwise zero. Then the container We'll have flex of one and bedding 16 pack a ground color. As make it. From colors of white. Then message container with justify content. Center align items to be center as well. Then the title with font size of 22 and font weight 600 inside the string or quotations and the color from colors primary and Tixtine. Let's make sure it is start and margin of 16. Then for the loader container with font size or flex of one and justify content, center and align items center as well. Then for the message text. Font size of 16 and Textaine center, and the color from colors text color. And for the table header, we will have flex direction of fro and the background color from colors dot, light gray. Padding vertical or let's make it padding with ten. So vertical and horizontal for the radius of ten A margin bottom of six. Right here, let's make this smaller to see if it could make or there is extra space. Okay and let's continue now with head or cell. Font weight. 12 font size. 12 and the text align will be center and the color colors secondary text color. So next table row with flex direction. Row and the background color from colors secondary text Color or white, sorry. And padding vertical. Let's make it. 12 and horizontal ten shadow color. Let's make it black and shadow obacity 0.05, then shadow radius, make it four, and shadow of set with width of zero and the height, make it two. Then the elevation, two, and align items. Center and right here, we'll have style for a cell. So font size will be 12 and text align center, and the color from colors dot text Color. Okay. And for status, success text, we have color from colors to success and font weight of 500 and font size with 12. Okay. You can also restyle this table a little bit if you want. So right here for the number of order, you can reduce the flex to be 0.5, and then here add 1.5 and also here for the data paid and delivered. And for the index, let's reduce this to be 0.5 like this. And for the name, let's make it 1.5. And reduce this to 0.5, as well. Okay, I think now it is better. So that's it for this screen, and we will start with another screen in the next lecture. 100. Implementing The User List Screen Part 1: Welcome to this lecture. Now, you will start to build an essential tool for admin user, which is the user list screen. This screen provides a systeralized dashboard for managing all user accounts that registered in our application. We will explore how to fitch and display user data in a clean, organized table, allow Admin to quickly identify users, verify their admin staats whether if they are admin or not and perform crucial actions like editing user details or deleting user accounts. Screen is key for maintaining control and security over our user base. So first of all, let's go here in the user API slide and write next to profile slide. We will create Get users and this with builder dot query and the query will be the URL, it is users Underscore URL, and right here, we will add provide tags from user schema. So let's add user and then keep use data for five like this. And right here, you will add delete user slice, delete user in order to delete the user that registered in our slice and do the mutation. Then the query will accept user ID and then return or the URL will be from that Dc tech, then users underscore URL the user ID that have to be deleted and right here, the method will be delete like this. Then right here, we will export use get users query, and also use delete user mutation. Then we will go to our Admin folder and add a new file with user list screen JSX and make sure the name. This match the user screen that in profile. Page, and now let's start with our Snippet. Then from React Native, we will import activity indicator. Flat list, the chapel Ovacit and platform also alert from React Native. Then from react or react keep it like this. And then import outer from export Router and import Toast from react Native toast message and part message component from components message. And now we will import our slices from slices, user ABI slice. We will import use delete order mutation and use Get Users query and import colors from constant folder, Utils and from fontosa we will import some icons. So import pontosam and add it. And the bath also like this. And first of all, we will fetch the user using use get users query hoc. So right here, let's add cost Theta and rename it to be users and refetch and also is loading and error equal use. Get users query, and delete user from delete user mutation. Then we will initialize router for navigation. Cost Router, equal user Router, and we will implement a handler function to delete a user. Cost, delete handler equal Async with ID to be deleted. That belong to user, and then alert, we'll add Alert and right here, we'll add delete. User, this is the title of alert. And right here, we will add Alert message RU Sure you want to delete this user. And then right here, we will add square bracket and key bracket inside it with text. The first text will be canceled and the style of cancel. And the second one right here will be for delete button. Let's add another kill packet, and text will be delete, and the style will be destructive. So this will be a red color. And also, right here, we will add press, then async and return. So we will implement a function to exute when delete is pressed. So right here we will add try catch error, and first of all, await delete user. Here it should be shown. So let's go above. Okay, here it should be const. Now let's Okay. With ID right here. And then we will use refetch the list of users to update the UI, and we will show toast message. So toast show with type of success. Text one success and text two user deleted successfully. And deposition will be on top and visibility time, we will set it to be 3 seconds. And if there is any error in the catch here, let's add to Dotext one will be error text two error Data dot message. But let's add here coalesce Okay, or error, but error like this. And the position will be on top and visibility time, we will set it to be 3 seconds as well. And right next to this closing square bracket, we will add here cancer bell to be true. So we will allow this missing the alert by typing outside. Okay. Then we will conditionally render show a loading spinner, data is still loaded. So right here, if is loading, then we will return view with style equal styles loader container. And right here, you will show activity indicator. With size equal large and the color from colors primary. And also, we will conditionally render if there is an error, we will show error message for message component. So if there is error, then we will return view with the style equal styles container. And right here, we'll have message component with variant of error, and right here, we'll add text and error dot data dot message or error dot error. In the next lecture, we will start to implement our main GSX component. 101. Implementing The User List Screen Part 2: Now let's start with our main GSX. So let's remove these and add save area view. With the style equal styles dot save area. Let's go to our screen. Use the router that doesn't exist. Okay, here should be Use Router. See now. Okay. Then right here, we'll have a view with a style equal style container. And with text style equal styles title for the title, and the title will be users. And right here, we'll have table header for the user list. So view with style equal styles dot table header. And right here, we'll have text. With style equal styles or should be two styles. So it's at square bracket that headers and with flex of two. And here will be name. And let's copy this and paste it right here, but with flex of one. And this is for admin. Then paste it again with actions like this. And now you will have flat list to display list of users. So right next to this closing view, you will have flat list with data equal users and key extractor item and ten item dot underscore ID. And content, container style, equal styles or just padding bottom of 20. Then renter item function. So right here, we'll have item and rename it to be user, single. Then we will add view. Let's close it first. And style equal styles table row. And inside it, we have the user name so text, but the style equal styles Cell. But also, we will have two styles, and the second style will be flex of two. And here we will have user dot Nim. It's, you know, our screen. Okay, here it should be like this. All right. So for now, we have only two users. And also, we will have right here touchable opacity. So touchable. And this with style equal styles dot cell with a flex of one and it will have on press handler equal function. Then right here, we will navigate to Edit screen, so router dot push. Because we will have another screen to edit the user. So router dot push, and then right here we will have that name, the Bth of our screen will be Admin User Edit screen like this. And the second one will be Params to pass the ID for this user. So ID from user dot underscore ID like this. So inside this touchable opacity, we will conditionally if the user dot is admin. So if he's an admin, we will show icon, from fontosum and else we will have another fontosom icon. So if he's an admin, we will show check. As you see right here, the admin right here has this icon and the size 16 and also the color from colors primary. And if he's not name equal times, and the size will be also 16 and the color from colors primary. So let's see now. Okay. Then we will have another touchable opacity or another view, sorry, right next to this closing touchable obacity. And this is for action Co to edit and delete buttons. So view. Let's close it. And this is with style equal two styles. The first one styles dot l and the second one with flick of two, like this. And here, we will only display Actions button if the user is not an admin because the admin cannot delete another admin user. If no user dot is admin, if he is not an admin, we will show view, disclose it, and this is what style equals Actions button right here, we will add touchable obesity. With style equal styles action button. And right here or before that, let's add on press handler. We will navigate also to router dot push. And with Bath name, the path will be the same as this. So let's copy it and paste it right here and the params as well, it will also like this params let's copy it and add it right here. And inside this touchable opacity, we will have an icon. So sory should be awesome, and the name will be equal with it. And the size is 20 and the color from colors primary. Like this. And also, we will have another touchable opacity. With equal styles dot Action button, and here the press will be for delete. So we will add here Delete handler for this user underscore ID, we will call the Delete handler and this will have awesome icon with name of trash and the size 20 and the color from colors extra so to indicate that is a danger icon. That's it for our mangia sex, and we will start now with style. In the next lecture, we will continue with our starts. 102. Implementing The User List Screen Part 3: Alright. Let's now continue with our styles. So we will add here Hedar sill and this with font tut of bowl. Then on size 14, text line. Center and the color from colors dot secondary text Color. And we will have table row with flex direction of row and back a ground color. From colors white and vertical to be 12, padding, horizontal, ten, and margin. Vertical, four, and fur the radius. Ten the shadow color will be black and shadow opacity 0.05. Then shadow radius for and shadow of sit with width of zero and the height of two and elevation, two, and align items center And then for the cell, you'll have font size 14, Text align, center, and color from colors, the text color and line item, center, and also stify content center. Okay then for the action buttons with flex direction of row and justify content center align items, center as well, and also padding of eight. I think this icon should be read. So let's go up and make it writ which is right here. Or a second one, which is not as bad. Okay. Or the style. Let's try to refresh our app. Okay, I think now is good. And I also register a new user to test it out. So let's try now to remove it. So you will see here alert with this message. So if you click on Cancel, the order is still. But if you press on delete, as you see, the user delete it successfully. And here's the admin. You cannot take any action for the m because Kant, edit or delete admin user. That's it for this lecture. And the next one, we will start to implement user edit screen in order to edit, user email or name or change his status from, not admin to be as admin. Okay? 103. Implementing User Details Screen Part 1: Hello, everyone. In this lecture, we will start to build user Edit screen. This is where admin users can manage individual user accounts. We will dive into this screen, which allows Admin to view user current details like their name and email. And also, they can change the admin status from false to true. So this screen is crucial for maintaining proper access level within our application. We will cover how to fetch specific user data, handle from inputs for updating and that information, and ensure changes are saved successfully. So let's get started. First of all, let's go to slices in the user API slice, and we will add now a query right here, which is used to get user details. So get user details. And it is builder dot query because the method would be Get the query will accept DD and then here should be inside normal brackets. All right. And then the URL, add Black tick, inside it variable for user underscore URL slash ID like this. And right here, we will add keep and use data four, five, and the other mutation, which is update user. So update user and with Builder dot mutation, the URL or before that query. Will be data, and then we will return right here URL, which is from users underscore URL slash data dot ID or user ID, sorry. Like this. And the method here will be put and body data. And right here, we will add invalidates tag. And this is we add user schema. Then we will export the mutation and query. Get user details query, and also use update user mutation. And then let's go to Admin folder, add a new file with name of user Edit screen the JSX. And our sip it. First of all, we will import here from react native text input, and touchable oocity and also activity indicator and scroll view and platform and safe area view. And finally, keyboard avoiding view and from react, we will import Utt and use effect and from Expuor We will use Router and use local search Params import message from our components. Import on icons at Expo Victor icons on icons. And we will import toast from react Native toast message, and import from our slices. User API slice. We will import both use get user details, query, and use update user mutation. And right here, we will import also switch from React Native to switch the status of user admin and then we will define or set variables to hold the user name, email, and admin status. So right here, name, set, name equal, user state. Of empty string, const Email set, email use of empty string and cost as admin and set as admin, uses state and the default value will be false, then initialize our router for navigation. So cons outer equal user router. And we will get the local parameters from URL. So params equal, use local search params. And we will extract the ID parameter from the URL, which is the user ID. Cost user ID equal Params dot ID. And now we will use the Get user details query hook to fetch the specific user details. So right here, cost and here, data, rename it to be user and loading and also error and refitch. Equal G user details query from this user ID, so the data will be used user for last and is loading to indicate if the data is being pitched and error, if there is an error and refig it we rerun the query and get fresh data. Then we will use the use update user mutation hook to get function to update the user. So right here, let's add const, update, user, and we will rename this loading to be loading, update, equal, use update, user mutation. And we will create function to handle form submission. So cost submit handler equal ASN function. And right here, we'll add try catch error. First of all, we will call the update user mutation with the user ID, the new name, email and admin status. So await update user with user ID. Name, email, and a admin. Then we will show success, toast notification. So toast, show the type will be success, text one, success, and text two will be user updated successfully. And then we will refetch the user details to ensure that the local state is updated. So refetch then we will use router dot replace to go back to our ADM user list screen. And here we use replace for a purpose. I will show you once we test our screen. Then if there is any error, we will catch it. So toast the show, and type will be error, text one error, and text two will show the error message, so error, the data that message or error error. Then we will add use Effect Hook to populate the form filled with user data once it is loaded. So use effect. And right here you will have if there is a user, then right here, we will set the name to be user dot Name and sit email. To be user dot email from user data and set a admin to be user is admin, and right here, we will add user as dependency. Let's make sure. Okay, here is the user. All right, like this. So in the next lecture, we will start to implement our JSX. 104. Implementing User Details Screen Part 2: Come again. Let's start now with our JSX. So first of all, let's add safe area view. And right here, you'll add style equal styles dot SAFE Area. Then right here, we would add keyboard avoiding view to prevent keyboard from obscuring input fields. So keyboard and should be like this with style equal flex of one and also behavior. And if our platform, operating system is equal IOS, it will be padding. Otherwise, it will be height. So the behavior depends on the platform and keyboard vertical offset, it will be platform, operating system is equal IOS then right here, 60, otherwise, zero, and this is offset for IOS keyboard. Then right here, we will have scrollview and style equal styles container. And also, we will have content container, style, equal styles dot scroll content. And inside this scroll review, we will have our title so text or first of all view style equal styles dot header. And right here, we will have touchable opacity. And this with on press handler to Router dot push. To our user List screen. So Admin User List screen. And this is to navigate back to user List screen and it will have style equal styles dot back button. And right here, we will have on icon with name of Chevron, B, circle. And the size will be 35 and the color from colors dot primary. And then next to this touchable opacity, we will have text with a style equal styles title. And right here, we'll add Edit user as text right next to this view, we will have another view for actual form with a style equal styles actual form container. And right here, we will show activity indicator if an update operation is in progress. Loading update, and we will show activity indicator with size equal large and the color from colors primary. Then we will condition any rendering based on loading and error state for pitching user details. So right here, we will add is loading, and or here, let's add activity indicator with the same right here and then else if there is error, then we will run message component with variant of error. And right here, you will add error Dat message or error dot error. Okay. And finally, right here, if there is no issue, we will add or render the form. So view, close it and with a style equal styles form. And right here, we will add input container for the name, so views close it. With style equal styles, input container. And right here, we will have our text with style equal styles, out label. And here it will be name then we will add text input with style equal style input, place holder, enter, name, and the value will be name. And change text, set name. Okay. Then we will have input container for the email. So let's copy this review and paste it right here, and this will be for email and here enter email. The value will be email and finally set here it should be sort Emil. Then we will add switch container or Admin Stratus Servi and close it with style equal styles dot switch container. And right here, we will add text to label. So let's copy this. And here, it should be as admin. And right next to it, we will have switch, and it is silvi closing and right here, we'll add value equal is admin on value change, equal set is admin and traclor equal here, falls if it is force from colors or should be two curly placate. So another one. And right here, false, if it is false, we'll take colors from light gray, and if it is true, colors from color dot primary. And also, it will have thumb color to switch thumb from colors dot white. Then we will have Update button right next to this. Closing give you so touchable vocity with style equal styles dot button, and on press handler, equal submit handler. And inside it, we will have text style equal styles dot button text. And right here, we will have update. Let's start with our styles. So right here, we'll have safe area with flex of one, then background. Color colors off white, and padding. Top if the platform operating system is equal Android it will be 20 otherwise zero. Then the container, it will have leg of one and scroll content as well. With flex one and the header with flex direction of row and line items center and bedding of 20 and for the back button, it will have margin right of ten. And for the title with font size of 22, font weight of bold and color from colors dot Marie. And for actual form container, it will have background color from color to white, margin of 16, and also badding and for the radius of 12 and shadow color from colors that dark gray and shadow offset. It's da coma here. And the width will be zero, and the height will be two, shadow opacity of 0.1 and shadow radius four and elevation two. That's it for this lecture, and the next one, we will complete with our styles. 105. Implementing User Details Screen Part 3: Let's continue now with our styles or the user edit screen. So right here, add form width of 100%, then input container with margin bottom of 16 and label with font size. 14 and 500 and the color from colors text Color. Then margin bottom eight. And then for the input, we have pack a ground color from colors dot white and border width of one and border color from colors light gray. And let's refresh our and border radius of eight Okay. Then padding of 12 and font size 16 and color from colors dot text color for the switch container a flex direction of row and align items center justify content space between and margin bottom 16 and padding right of ten. Then for the button, padding, 16 or the radius eight and align items center, margin to eight. And for the button text, color from colors that white and font size 16 and font weight of 600. And the button should have a ground color from colors that primary color. Okay. So now let's refresh our app and let's update this user now, so click on Edit. And now let's switch this user to be an admin and then update, it is updated. You cannot take any action for this user now, because we use replace, if we click on back, we cannot go back to the previous screen which is user Edit screen, like this. Okay. Now let's try to register with new user and try with other router which is navigate Okay. And let's add the password, register. Now, go back, look out, and let's make it navigate. Then Log in as Admin. With password. All right. Let's now try to edit this user. So let's make him admin and click on update. So user updated successfully. If we back now, as you see, you can go back to the user screen and make him not admin, and it will update normally without any problem. Okay. So that's it for this picture, and we will start with product list screen and the next one. 106. Backend - Image Uploads Route with Multer Part 1: Welcome to this lecture. Now, we will shift our focus back to the back end and tackling a crucial feature for our ecommerce application, which is image uploads. Specially, we will build the ABI endpoint that allow us to securely and efficiently upload product image to our server. We will be using Multor which is a popular nugs middleware for handling multipart form data. And it is used for uploading files. By this lecture, we'll understand how to configure storage, filter file types, and handle the entire upload process on the ser side. So first of all, let's open the terminal and install our Multor package. Then we will go to back end and the routes and create a new route with upload route JS first of all, we will import Express from Express. Then we will import Molt from Walter, and we will import also PPT path, which is a module to work with file and directory paths. Then import FS, which is file system, which is a module to interact with file system like creating directories. Then we will create a new Express router for our route for file uploads. So const Router equal Express, the router. And first of all, we will create plods directory at the root level, which is next to this back end and front end. So Kunst uploads DR equal path dot join with process dot CWD and here dot dot, and the name will be uploads. So we will define the absolute path to the uploads directory, process dot CWT is the current working directory, and we will move up one living to the project root and then uploads folder is up right here, we will add if not file system dot exist sync for upload the IR, we will make directory for this and recursive will be set it as true. So we will check if the uploads directory already exist. If it does not exist, we will create it, and recrusive means that it will create parent directories if they don't exist. And then we will configure the Multors storage settings. So right here, storage equal Multor disk storage with destination and right here, request file and CB and CB to null and uploads DIR. So we will define where the uploaded file will be stored and CB is the callback function, and null means that there is no error and uploads DIR is the destination folder. Then right here, we will define how uploaded file will be named. So the name of our image will equal at backtick and right here, will be file? Dot field name. First of all, let's add here. Also request and file and CV. And let's remove this file for now. And then we will create a unique filename using the original field name, the current timestamp, which is the date and the original file extension to make sure that there is no repetition in the ni name of our images. So Const file name. Equal tick. And here we will add file dot field NM Let's add date dot now. And here we will add path dot XN with file dot original name. Okay. Then right here, we will add our callback with null and file name. Okay? 107. Backend - Image Uploads Route with Multer Part 2: Then we will create function to check the uploaded file type, so cost or function. Check file type with file and CB. So first of all, we will define the allowed file extensions using regular expression. So consle type or file types like this equal GPG and GP EG and PNG, then slash like this. And we will test if the file extension match the allowed file types, and it is case synthess. So const name equal file types dot test with path X for our file dot original name dot Turks, like this. And test if the mimi type match the allowed image types. Csmi type equal file types, dot test also with Mimi type if both extension and mimi type are valid, so I name and mimi type. We will return CB with null and True. So we will allow the file upload and else right here, here should be F and else CB and we will add image only like this. Then we will initialize Multor with our defined storage and file filter. So C upload equal Multor with storage and file filter. W is function, request, file, and CB then add here check File Type with our file and CB. So we will define filter function to validate the file before saving and calls heck file type function to validate the file. Then we will define a post throughout for image upload. So outer dot post, and the path will be slash. Then right here, upload dot single image. And right here, add request and response then we will check if a file was actually uploaded by Multor. So if no request dot file, then we will return response do status of 400 dot JSON. And the message will be no file uploaded. So if there's no file, we will send about request error and here it should be returned like this. Then next to this closing statement, we will construct the image URL path and create URL path that clients can use to access the file uploaded image. So Cast Image. Path equal. And this is the path will be uploads requST file name like this and response dot send, we will send message with image uploaded successfully. And right here, the image will be image path. Okay. Then right here, we will handle the error middleware for alter or other route error. So outer use, and right here we will have error and request response. And next. Then we will raise that status of 500 the JSO and here message will be error, that message or error processing Upload. Then we will export default router. Export default router, and we will go back to our server file in order to import it. So let's import upload route from Route upload route Gs and douse with the path will be API or slash API slash Upload and right here, upload out. In the next lecture, we will go back to our front end and start to implement the slices first and our product list screen. 108. Implementing The Product List Screen Part 1: Hello, everyone. Now we will start to build product list screen. This screen will give the admin full control over the product in our app. We will explore how to fetch and display product data organized paginated table and allow admin to efficiently browse, edit, create a new product, and delete Exist one. Screen is crucial for effective inventory management and ensuring our product is always up to date. So first of all, let's go to product Epi slice in order to implement other mutation. So right here, we will create now delete product mutation. And this will with Builder dot mutation and query with product ID. And then we will return from product ID products underscore URL, and here should be inside actekOPduct ID and the method will be delete. And right here, we will have invalidate tags to be from product schema like this. And also, we will implement update product mutation So right here, query with data and the URL. Also with Bactex and product underscore URL slash data dot product ID, and the misode will be pot and body from the data, and also we will add invalidate text right here. And finally, we'll implement upload product image with Builder dot mutation and right here, we'll have query with Data, then the ARL API, Upload. And the method will be post and body data. Then we will export this through. So use delete product mutation, use update product mutation and use upload product image mutation. Okay. Now let's go to our admin folder in order to create a new file with name of product est screen. The JSX. Okay, first of all, we will import from reagnative activity indicator and latest touchable opacity. Alert and platform, and finally, safe area review. Also from Expo Auto. We will import use Router and use local search params and import Fontosom from our expo Victor icons Fontosom and Import message component. And we will import now our queries and mutations from product slice. First of all, we will import, use get products query to hook or fitch all products with pagination and delete product mutation and use create product mutation in this screen. The next one, we will implement the use update product mutation. Then right here, we will import colors from our constant and this screen will have also pagination because in the home screen, we have pagination and it is implemented in the back end. You can also implement it in the orders or user list screen. But for now, I just implement it for the product. So first of all, we will get the page number parameter from the URL, and the default value will be one. So crossed page number equal one. Equal use local search forams. Then we will initialize our router for navigation. And then we will fit to the data using UUGt query hook and pass the current page number. So cost data is loading and error and refetch as well, equal use get product query, and we will pass the page number with number page number to convert page number to be a number. All right. And then we will get the delete product mutation function and its loading state. So delete product and right here, we will rename our I loading to be loading, delete, equal use delete product mutation. And also, we will get the creative product mutation function and its loading state. So creative product. And with this loading and loading create equal, use create review mutation like this, then we will implement a handler function for delete product. So right here, const, delete, handler, equal Async. With ID, first of all, we will show a confirmation alert before proceeding with deletion. Alert alert. Right here, we will have delete product and alert message will be, are you sure you want to delete and then we will implement our buttons inside square brackets. The first one with text of Cancel and the style will be cancel the second one right here with text of delete and the style destructive. And then on press handler, we will add Async and execute delete conformation. Try cache error. And the try, we will await and delete product with this ID for the product ID, and then we will refitch our product to update the UI. And if there is any error, we will add Alert dot Alert error. And here, if there is error message or error dot error. Okay. Then we will create a function for creating a new product right here. So create product handler equal ASN function. And also we will show confirmation alert before creating a new product. Alert. Alert and first create product which is alert title and the alert message. But and then we will add our buttons. The first one will be cancel with the style of cancel and the second one for create and it will have on press with ASN function and inside it, try catch. And in the try we will create so awe it create product and then we will refit our UI. And if there is an error, alert dot alert, error with error, at dot message or error dot error. Like in the next lecture, we will start to implement the pagination buttons at the bottom of the list. 109. Implementing The Product List Screen Part 2: Okay, let's continue now. So first of all, we will implement const, render pagination, buttons equal. And first of all, we will check if there is no data or only one page. We will don't render the pagination. So if no data, dot pages or data pages less than or equal one. Then we will return null. And otherwise, we will return now view with a style equal styles dot pagination. Container. And we will generate an array of pages, number and map over them to create buttons. So right here, array dot from and the link from Data pages. And right here, underscore I and return I plus one. And here it could be. Dot map with single page. And then right here, we will add our touchable opacity. Let's close it. And our key will be single bad because it is unique. And for the style, it will have two styles. The first one is styles Page button, and the second one if page equal data. Lot page and styles dot Active Page button. So when this page is active, it will have primary color. Otherwise, it will has white one. Okay? And next to here, you will have on press, and we will update the page number, URL parameter to navigate to that page. So Router dot set params with page number. From page, so we will convert the page number to string from the URL parameter. So page dot to string like this. All right. And inside the touchable obacity, we'll have text with style two styles. The first one is page button text, and the second one if page, dot or equal Theta dot page. If it is active page, and active page button text. Okay. And inside the text, we will display the page number right here. And now we will conditionally render to show if there is an error message from fitching the product. So if there is error, then return view with the style equal styles dot container, and here, we will add message component with variant of error. And right here, text with error dot data dot message or error dot error. Okay. Now let's start with our main component. So remove this and add safe area view with a style equal styles safe area. And right here, we will have our container, so view with a style equal styles container. And we will add header function, sanction, and title with add product button, so view style equal styles dot header. And inside it, we'll have our title with the style equal styles, the title and products as text. Then we will have touchable opacity, with the style equals styles dot Add button. With press handler, from create product handler. And right here, we will have Fontosm and the name equal plus size of 16 and the color from colors to white color. And we will have also a text. And right here, style equal styles dot AD button text with add a product. Like this. All right. Then we will have our table header for the product list right next to this closing view. View the style equal styles dot table header. And right here, we will have text of style equal two styles, style one dot header L and the second one with a flex of two. And this is for the name. Let's copy it also, and right here should be one and the text for price and the last one actions. And this is with 1.5 flex. Okay. Then now we will add flat list to display paginated list products right here. Okay. And we'll have data equal data products and key extractor item. And then we will return item underscore ID like this. Then content container style. I will equal padding bottom of 20 now we will add render item function to define how each product item is render. Render item, and we will rename the item to be product and return but view. It's closet. And right here, style, equal styles Tbo inside this view, we will have product name. So text with a style equal styles or two styles should be side square bracket dot l and the second one with flex of two. And we will make number of lines to be one. So the product name truncated to one line, and right here, we will show a product dot name. Okay. As you see right here, and we'll add product to price. So let's copy this and paste it with a flex of one right here dot Price and add before it Dolor sign to indicate that is a price number. Then we will add action, sell to edit and delete buttons. So it is right next to this closing text. We will add view close it. And with style equal, it will be two styles, so styles dot actions cell and with the flex of 1.5. And right here, we will add two buttons, the first one for Edit button for the product. So touchable opacity with a style equal styles dot or without any styles, should be okay. So on a press handler, it will navigate us to the product Edit screen. So router dot push and we will have a pathname Admins Product Edit screen. Like this and the params, it will be the ID from product underscore ID. We will pass the ID as parameter. And right here, we will have on icon or fontosm with name of dit and the color from colors primary and the size will be 20 Practice. That's it for this lecture, and the next one, we will continue with our code. 110. Implementing The Product List Screen Part 3: Okay, now let's implement Delete button. So right next to this touchable vocity, we'll add another table vocity with style equal margin left of five. And on press handler, we will have delete handler with product dot underscore ID. And right here, we will add onto a icon with name of Trash size of 20, and the color from colors dot text red. Then we will render the pagination buttons at the end of the list. So right here, we will add list footer component equal render pagination buttons. Now here should be add right here function in order to prevent this alert and return this handler. Let's refresh. Okay. Okay. Now let's start with our styles. So safe area with flick of one and background color. Colors dot of white, and adding top. If the platform dot operating system equal Android, it will be 20 otherwise zero. And for the container. Flex one, padding 16. And background color. From colors dot of white. And for the header, you'll have flex direction of row and justify content space between align items, center and margin bottom of 20. Okay. And for the title, we will have font size of 22 and font weight of 600 and the color from colors to primary. And for the ad button, colors or should be back a ground color from colors primary and flex direction. Fro and line items center padding 12 and border radius, it. Okay. And for at button text, it will have color of white and also margin lift it and font weight of 600. And for the oder container, flick of one and justify content, center, and align items center as well. And then for the table header, flex direction, and background color from colors dot light gray and padding of ten and border radius ten as well, and margin bottom of six. Then for the header cell right here, we will have Fontu bold and font size 14 textiline center and the color from colors that secondary text Color. The table row, let's go to use our list screen and copy this style and for the cell as well. Let's copy them both and paste them right here. Okay. And for the actions cell, we will have x direction row and justify content center and align items center as well. But. 111. Implementing The Product List Screen Part 4: For the pagination. Container. We will have flex direction of row and justify content. Center align items. Center and bedding, vertical 20 and flex rub of rap and gap of ten. Then for the page button, adding horizontal of 12, and adding vertical eight, border radius of 20 and background color colors to white border width of one, and minimum width, 40, and align items center, like this. And let's make the border 13. This is the same. Okay. Active page button. We will have background color from colors primary and Page button text. With colors or color from Color dot primary and the font weight of 600 like this. And for active page button text, we will give it color of white Okay, like this. So let's now try to go right here. Okay? It is worked very well. And let's try to create a new product. So click on ad product. Then you will see this alert message. If you cancel, it will not show any product right here. Then let's create now a product. There is an error here. A Okay. Let's see what we import at the first. All right. Yes, we didn't implement endpoint for create product. So let's create it quickly. So right here, add create product with builder dot mutation and with query, let's now return the URL will be product underscore URL, and the episode will be post, and right here we will add invalidate tags from our product schema, and let's export this. Use create product mutation. And right here instead of review, let's add use create product mutation. And instead of creator view, create product mutation. Also, let's go back to our back end. And right here, we will import that from path package or module. Then right here, we will add const upload directory, same as we implement in upload routes, pass join, right here, we'll add process CWD and also we will move up to the general path, and we will put our folder name which is uploads. And if you see it is created, and also we will add up to Ts then our path will be slash uploads. And right here, expressetic for uploads directory. And also the new product that created should have sample image. So here in the uploads, we will add this sample image. I will attach it in the lecture resources. Now, it should work without any problem. So let's serve fresh. Okay, let's try to add a product now. As you see right here, let's create a new product with sample name and sample data, for now we cannot edit this product because we have to implement use a product edit screen. So let's go to our homepage. As you see right here, the image uploaded successfully without any problem. And you can also delete it just we do Okay, that's it for this lecture. And the next one, we will start with product Edit screen. 112. Implementing The Product Edit Screen Part 1: Hello, everyone. Now we will start to implement product it screen. This screen will allow us not only to modify the details of existing products, but also to upload and manage product image directly from our mobile application. We will integrate the image upload functionality we developed in the previous lecture, enabling a seamless workflow of updating our product catalog, you will learn how to fich specific product data, handle multiple input fields for product information, and most importantly, we will implement image Baker and uploader. So let's start now with our screen. So right here, add a new file with product Edit screen, JSX let's go. Create a new product, and let's add our snippet. Now, let's navigate to this product. Okay, let's start now with the imports. So we will import now. Text input, and also scroll review activity indicator, image. And platform safe area view, keyboard avoiding view, and also touchable opacity. And we will import now from Expo Router use Router and use local search params. And from react, we will import effect and use state. And also, we will import dust and import ion icons. And from our product slice, we will import product ABI slice, we will import use good product details query, and also use update product mutation and use upload product image mutation. And now we will install Expo, image picker. Let's navigate the front end and hit the command MBM install Ebo image picker, head enter, and Impart now star as image picker. From Expo image picker. This package will allow us to access the device image library, and we will import colors from our constant folder utils. Should be constant utils. All right. And we will import also Base underscore URL from our consent, and finally import for container. From component form container. First of all, we will initialize our router. So right here, cost router equal use Router. And also we will use HOC to access local search parameters. Cost params equal use local search params, and we will extract the ID parameter from the URL. Cost product ID equal Params dot ID. And now we will add state variables to hold the product details that will be edited. So const name and set name equal, use the stat empty string, const price, and set price, use the state of zero and const image. And set image. We use a state of empty string, and here let's make a number. So the default value will be zero and category set category. Use the state of empty string and count any stock and set count any stock but use state equal zero, and finally, the description. Description equal use state of empty string. 113. Implementing The Product Edit Screen Part 2: Okay. Then we will use the use get the product details query to fetch the products detail. Const data, rename it to be product and a loading state and refech also the error and rename it to be product error equal use get product details query and with product ID, Then we will use the use update product mutation to get function to update the product details. So Cs or should be square bracket, update product. And here we will rename this loading to be loading, update. Equal use update product mutation, like this. And we will use product image mutation to get a function to upload an image. So const upload product image and is loading, we rename it to be loading, upload. Equal use upload product image mutation like this. And now we will use use Effect Hook to populate the form fields with product data once it's loaded. So use effect. And right here, we will make sure we have product if there is a product. Then we will set the name to be product name. From product data and set price product price, set image product to image, and set category, and set count in stock like this and this we will convert it to string dot to string and set description to be product description, and also for the price, we will convert it to string. And the dependency array will have product. Then we will implement helper function to get the full image URL. Cost get image URL equal will accept image path and then if there is no image path, we will return null. Right here, return null. And if image bath already starts with HCTB, we will return as external URL, otherwise, repent the base URL. So return image bath that starts with HDTV, F statement, it will be image path, otherwise. We will make it pas under ScoreRLR here, image path. Then we will implement a function to handle form submission to update product details. So cost, submit handler, equal Async, and then we'll add tr catch error. So we will call update product mutation with all form data. Await update product with product ID. And name price, and you make sure it is number and image category. And description and count any stock and make sure or convert it to be a number like this. Also, we will unwrap it in order to throw or extract any errors if there is. Then right here, we will add toast message, to show, and the type will be success, text one success. And take two product. Updated successfully. And then we will refitch our data. And after let's add sit time out. And right here, we will add Router dot. Go Back or outer dot back after short delay. And if there is any error, we will look it out right here. So toast to cho, type error, text to an error. And takes two error message or error. So that's it for this lecture. The next one, we will continue. 114. Implementing The Product Edit Screen Part 3: Welcome back. Before we start, please make sure this to be set counting stock in our us defect tok. And also, there is no need for this to string. So let's remove it. And back to our products. All right. Then we will implement a handler for image upload. So right here, cost upload file handler, equal async function. And with Try Catch error, first of all, we will request media library permissions, so Const permission. Result equal Await image picker dot request Media Library permission As and if statement, if not permission result granted, if permission denied, we will show dost error and stop our function. So to show that I will be error and text one permission denied. Text two will be as required. Then we will add here retail in order to stop our function if everything is okay and granted is okay, we will launch the image library to pick the image, so C result equal wait, Image picker launch Image library a and we will specify only pimage so media types to be image picker dot media type like this dot image. And we don't allow editing, so allows editing, make it falls, and the quality will be one, which is full quality. And right here, if an image was pxed picked and there is no cancellation. So if Not result dot cancel. Then we will create a new form data object for file upload. So const form data, equal new form data, and then we will append the image to the object. So form data dot append. With image right here, we will add URI from result dot assets. And we will select the first one dot URI. So this is the URI of selected image, and also we will add the Mimi type of the image, so type image GPEG and the name will be mage dot GPG. All right. Then we will call the Upload Product image mutation with the form data. So right here, cast response equal await upload product image. With our form data dot rap to excute if there is any error. And then we will update the image state with the new image URL returned from the server. So sit image to be response dot image. And finally, you will show a success toast message modification for upload. So toast to show the type will be success and text one uploaded and Tix two, it will be image uploaded successfully. Okay. And we will catch any errors during the process. So right here, let's add toast the chow with type of error and text to upload failed, and text to and right here, we will add if there is error data dot message or error error. We will add conditional rendering. So to show loading spinner, product details are being ftched. So if is loading, and you will return view with a style equal styles dot center right here, activity indicator with name or size equal large and the color from colors dot primary. Okay. And also we will conditional rendering to show an error message if which product details fail. So right here, let's copy this as well and put it right here product error. And instead of this, we will add message component Let's see if it is imported. Okay, we don't, so let's import message from our components message. And a variant will be error. And right here, we will add Product error, dot data dot message or product error dot error. Okay. Now let's start with our main component. So remove these and add safe area view with the style equal styles dot safe area. And right here, we will add keyboard, avoid view to prevent keyboard from obscuring input fields. So keyboard input view, and right here, we have behavior, and this will be dependent on the platform. So if platform operating system is equal IOS, then it will be padding, else, it will be as height. Let's remove these. And okay, right like this. Then we'll add style of ex one. So styles equal ex one. Alright. And then you will add scrollyview to make the content scrollable if it is exceed screen height. So scroll the view with show vertical scroll indicator equal false. And content container style. We will add its styles, so styles dot Scroll review content. And we will add also keyboard shot persist Tab equal handle. And inside it, we will have our form container. Then we'll have header section with back button and title. So vi, style, equal styles dot header. And right here, we'll have first the back button. So touchable obacity with style equal styles dot back button. And on press handler, we will add here Router dot B to B to Brigos screen, and we will add back icon. In icons, the name will be Chevron circle and the size. Will be 35 and the color from colors primary like this. And right here, we will add screen title, so text with a style equals styles title right here, edit product. That's it in this lecture. And the next one, we will start to implement the rest of our GSS. 115. Implementing The Product Edit Screen Part 4: All right. Let's continue now with our JSX. So right next to this closing view, we will have another view this style, equal styles dot form, and we'll add our ps group for product name. So view style equal styles dot form group. And right here, text with a style equal styles dot Label and right here, the name. And then text and boot. Let's close it, and it'll have style equal style dot input value. Name of the product and unchanged text, set name. And placeholder Enter name and placeholder text color from colors that secondary text color. And the next one will be for rice. So let's copy this form group and paste it right here and right here, it will have price and the value rice here, set price. Here enterprise. And the second one for the image. So let's copy this only and close the view. And add here image. Then we will add if we have image, and we will show a views close it. And right here we'll have style equal styles that image container, and inside it, we'll have image. This image with source equal. And right here at the URI from GIMP image URL with image and the style equal styles dot image or product image. And also, next to this image, we will have text and with the styles dotimageURL. And right here, we will have the image URL. So gettimage URL for image. Okay. Then right here, we will have upload image button, so touchable opacity with style equal styles dot Upload button, and on press upload file handler. And inside it, we will add text where the style equals styles, not upload button text. And right here, we will show loading. So loading, if it is loading, upload if statement, we will add uploading. Or let's add activity indicator listed. And the size will be small and the color let's make it colors dot white and Ls right here. It will be a blowed image. Alright. And also next to this closing, we will have loading or I think it is okay for now like this. So next to this view, we will have form group for count Stock field. So let's add or copy. Let's copy this. And paste it right here. And here, let's add count and stock and the value counting stock, the price set counting stock, and placeholder enter counting stock. And also we will have keyboard type to be numeric. So keyboard type equal numeric. Also, we will have another form group. So right here, let's add form group for category. Okay. And the value will be category unchanged, set category. And here, category like this. And also, we will have for description. Okay. And right here, the value will be description and set description. And right here will be Enter description. Okay. And for the description, it will have two styles. So let's add here. Square bracket should be square bracket and also styles to text area. And let's add right here also multi line to accept multi lines and number of lines, let's make it four. This is the initial number of lines. Okay? And right next to this review, we will have submit button for update product. So let's add touchable oacity and with style equal two styles, so styles submit button, and also F loading, update, and styles dot submit button disable and on press, we will have submit handler and disabled. If it is equal coding update. And inside, it is touchable opacity. We will have if it is loading update, we will show a view with style equal styles dot loading container. And inside it, we will have activity indicator with size equal small and the color will be from colors dot white. And also, we will add text with a style equal styles dot submit button text. And right here, we'll add updates, it will show a text with style equal styles dot submit button text. And right here, we'll add update product. Okay. So that's it for JSX. Let's add some styles. So safe area with flex of one and background color from colors of white. Okay, and also adding to. If platform, that operating system is equal. Android, it will be 20 otherwise zero. T. Scroll view content style with flex grow of one and also adding top if the platform operating system equal Android, it will be 25 otherwise zero. Then for the header, flex direction of row and align items Center and Martin Batum of 25 and padding Hzintal to be five. And for center, flick of one and Testify content center line items center, and background color from colors dot of white. That's it. For this lecture, we will continue in the next one. 116. Implementing The Product Edit Screen Part 5: Right, let's continue now our styles. But first of all, let's remove this scroll with baddingTp. There is no need. And for the back button, it will have badding of five and for the title, font size of 22 fontight of 600 inside quotation and margin left, 15, and the color from colors primary. And for the form like a ground color from colors to white, and for the radius. 15. Padding 20 and shadow color from colors dot, dark gray, and shadow offset with width of zero and the height will be two, then shadow opacity 0.1 and shadow radius of four Okay. Then, elevation two, and gab 15 with margin bottom of 20. Then for the form group, margin bottom of 20 as well, and lab with font size of 16 and margin bottom, eight and color from colors dot text Color and the font weight will be 600. Then for the input, the border with one and border color from colors light gray, and border radius of 12 padding 15 and font size 16 and background color from colors to white. And the color from colors dot text Color. Okay. And for the text area it will have height of 120 and text line vertical will be to Okay. And for the image container, with margin bottom of 15 and paditin and background color from colors that white. Border radius of 12 and border width will be one and border color from color to light gray. And for the image R, font size 12 and color from colors do secondary TextColor and Text Align will be center. For a plot button with background color colors secondary and padding vertical with 20 and or the radius of 12 and flex direction. Raw justify content, center, and align items to be center as well. Let's reduce the badding vertical of the button. Make it 15. I think this spitter 117. Implementing The Product Edit Screen Part 6: And then for a blod button text, it will have color from colors do white and font size 16 and font weight of 600 and for the submit button, with background color from colors primary and adding vertical of 15 and border radius 12 and align items center and margin of ten. And for submit button disabled, it will have opacity of 0.7 and submit button text will be with color from color to white and font size of 16 and font weight will be bold. And for the loader or loading container with flex direction overall and align items to be center and justify content center as well, and the gap will be ten. Then for the error text, Let's make color from colors TxD and font size will be 16 Textaine center and margin top will be ten. Also, let's add product images t because I forgot to add it. And this with width of 100%, also, the height will be 200 or the radius tin and margin bottom will be thin as well. Okay. And also the back a ground color from color to white. And border width will be one or here it should be Let's remove it. And the background color should be dot of white like this. Okay. Also, let's go up because the price should take a default value of zero. Here, it should be dot two string. In order to convert the value to string, as you say, like this. And also for the count in stock but here, it seems that I add category in stock, so it should be count count in stock right here. Sorry. Let's add it now and two string as well. Okay. Now let's try to update our product. So let's rename it and give it a price. Let's now try to upload an image. Upload failed. I should show x two. So let's see what's wrong. Right here, that is correct. Let's also add right here error dot message. And here or we should add. Let's try to upload it. Cannot read propriety of image of undefined. So this image, let's try to add it in a different way. We can also add array, and this will specify whether you want videos, live videos or image. So like this now, it should be work. So let's now try again with price. Let's try to upload the image now. Hope it work. Okay, let's select this one, and here is loading, State Okay, it is uploaded. This should have resize mode in order to see it all. So recise mode contain, we should try again. Skrivabs and plod same image. Okay, it is work now, and as you see, here is our uploaded image, and let's take this number because we make sure it is not repeated the name of product. And this is with respect of time. So let's also add counting stock. And you can also keep the category and sample. You don't have to update them all. And then let's update it is updated. And let's tick it out in our home screen. Okay, it is right here, as you see, with price and 20 as counting in stock. And also, let's try now to edit already exist product. For example, this, let's make it iPhone 16, and here, let's make it 1,500 and let's update it. Okay? So as you see right here, it's updated to be iPhone 16 and with this price. And then for a blood button text, it will have color from colors dot white and font size 16 and font weight of 600 and for the submit button, with background color from colors primary and padding vertical of 15 and border radius 12 and align items center. And margin top of ten. And for submit button disabled, it will have opacity of 0.7 and submit button. Text will be with color from colors to white and font size of 16 and font weight will be bull for the loader or loading container with flex direction of and align items to be center and justify content center as well, and the gap will be ten. Then for the error text, Let's make color from colors textIb and font size will be 16 Textaine center and margin top will be ten. Also, let's add product images ty because I forgot to add it. And this with width of 100%, also, the height will be 200 or the radius tin and margin bottom will be thin as well. Okay. And also the back a ground color from color to white. And poorer width will be one or here it should be. Let's remove it. And the background color should be dot of white like this. Okay. Also, let's go up because the price should take a default value of zero. Here, it should be dot two string. In order to convert the value to string, as you say, like this. And also for the count in stock, but here, it seems that I add category in stock, so it should be count count in stock right here. Sorry. Let's add it now and do two string as well. Okay. Now let's try to update our product. So let's rename it and give it a price. Let's now try to upload an image. Upload failed. I should show text two. So let's see what's wrong. Right here, that is correct. Let's also add right here error that message. And here or we should add. Let's try to upload it. Cannot read propriety of image of undefined. So this image, let's try to add it in a different way. We can also add array, and this will specify whether you want videos, live videos or image. So like this, now, it should be work. So let's now try again with s Let's try to upload the image now. Hope it work. Okay, let's select this one, and here is loading state Okay, it is uploaded. This should have resize mode in order to see it all. So recise mode contain we should try again. Skivabs and aplod same image. Okay, it is work now, and as you see, here is our uploaded image, and let's take this number because we make sure it is not repeated the name of product. And this is with respect of time. So let's also add counting stock. And you can also keep the category and sample. You don't have to update them all. And then let's update it is updated. And let's tick it out in our home screen. Okay, it is right here, as you see, with price and 20 as counting stock. And also, let's try now to edit already exist product. For example, this, let's make it iPhone 16, and here, let's make it 1,500. And let's update it. Okay? So as you see right here, it's updated to be iPhone 16 and with this price. 118. Replacing React Navigation with Expo Router in Our App: Hello, everyone. Like I said in the previous lecture that we will use on the Expo router for navigation. So I think now it is time to correct our code for this. So in the place order screen, so let's comment this out and instead of it, we will import used router and also from Expo Router and use local search forams. Then we will initialize our router instead of navigation right here, so router, equal user router. And we will extract also order ID from use local search PAMs, like this. And here, in this effect, we will use Router dot push to slash shipping, and here Router dot push to our payment screen, and also we will remove this navigation from use effect dependencies. And here instead of use navigation dot push, it will be a router dot push. With path name and the path name will be screens order screen. And right here, we will add params, and this params from Order ID sorest underscore ID, product screen. And let's comment this out and listed, we will import Use Router from Exp Router and use local search grams. Then right here, let's remove this one and then this one. And now we will initialize our router, so Router, equal, use router and we will use local search pams instead of this. So use local search form. And here in the effect, remove this navigation. And instead of using use focus effect, we will use effect, the normal one. And right here, we will add refit like this. Okay. Then right here in the handle add to card, you will add router dot push and also in the F error. Okay, right here, should be router dot back. Like this. Okay. And also right here, outer dot B. Also right here in the main JSX, for this button, we will convert it to be router dot B. In the header component, we will remove this one and remove navigation. Then in the return right here, we will add router dot push. That's it for this correction. Let's also uninstall the Bage. Open the terminal and change the directory to be front end and had the command and install and paste it like this. 119. Layout Screens Fix And Add Loaders in Product List Screen: All right. When you start the application, I think most of you see this warning with no route named screens exist. So in order to fix this warning, we have to layout JSX file inside our screen. So let's do it now, create a new file with layout JSX. And then we will import stack from Export. And then export default function of screens layout. And we will return stuck with screen options of header shown, set it to be false. Okay. So now, if you refresh or reload the app, you will not see this warning again. As you see, there is no warning for now. Also, let's go to Product List screen in order to implement this loading because we don't products screen lectures. So right here, let's add for loading. But first, let's go to products. And if you, if you go to this page, you will not see any loader. So let's add it. If I loading, then we will return view with a style, equal styles dot Loader container, and it seems that we implemented already the style. And right here, you'll have activity indicator with size equal large and the color from colors do primary. So if you go back now and navigate to this, it seems as' loaded. So let's change the tab. Let's refresh our. Okay, as you see, the loader is now working very well, and also we will add or if we delete a product, we will show this loader because it may take sometimes. So first of all, let's remove it and see So if you remove it now, you will see it will take some time in order to make loader indicator. Let's add or here. And now let's create a new product, and let's try to delete it. Okay. And finally, we will implement loader for this button. So let's search for AA product. Right here. And let's cut these, which is the icon and also the text and add curly bracket. Then for loading, create FI statement, we will implement the activity indicator, and this will be with size equally small because it is inside a button and the color from colors dot white and else we will paste our icon and text, but we have to add fragment, react fragment like this and paste it inside it. And let's test it out also. So as you see, it show small activity indicator and create the new product. 120. Outro & Resolving Expo SDK Incompatibility Issues: Hello, everyone, and welcome to this lecture. Now we will talk about a tackle common challenge you may encounter when working with Expo, which is this error message. Project is incompatible with this version of Epogo. This is happen when a new versions of Expo released and you still on the old one like this project, which is one of my old projects in Ragnative the Expo version was 49 at that time, and now it is 53. So in order to solve this error, you can go right here once you run the command MBM start in the front end and open the link and you will be directed to Expo Doc Imentation the first thing you can do is upgrade the Expo SDK by run the command expo install Expo at latest and then you have to upgrade all dependencies to the install SDK versions by hit the command, BX, Ibo Install dash dash fix. For our project, everything is okay now because we are at latest version. But I tell that because you may encounter this error in the future with our app, so you can fix it without any problem. And with that, we bring our comprehensive ecommerce course to a close over these many lectures from setting our environment and building the foundational backing to craft front end components and handling complex admin functionalities. You have gained a robust understanding of our Ecommerce React Native app. Thank you for being a part of this course, and I wish you all the best in your future as developers.