# Components ## Components * [App](#app) * [Register](#register) * [Login](#login) * [Menu](#menu) * [MenuItems](#menuitems) * [ItemDetail](#itemdetail) * [Cart](#cart) * [Payment](#payment) * [MyOrders](#myorders) * [RateAndReview](#rateandreview) * [Profile](#profile) * [Addresses](#addresses) * [OrderDetail](#orderdetail) ### App * Location: The UI can be found under `src/App.js` * Working: Configures Native base, Fonts, Push Notification, Apollo, Authentication and Navigation. * Result: Everything is configured loads the next view depending on if the user is authenticated or not. If the user is not authenticated will show tutorial screen first else it will show Menu Screen. ### Register * Location: The UI can be found under `src/screens/Register/Register.js` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `createUser` * Working: Registers User using Google, Facebook or Manual Registration * Result: Registers User if a user registers with Facebook or Google will get their picture too automatically. In any selected option an auth token is generated on backend and sent backend to frontend. ### Login * Location: The UI can be found under `src/screens/Login/Login.js` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `login` * Working: Logins User using Google, Facebook or Manual Registration. A separate component for ForgotPassword is also present its component can be found `src/components/ForgotPassword` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `forgotPassword` * Result: Logins User with validation. If a user uses forgotPassword an email will be sent to him with reset link for changing his/her password. ### Menu * Location: The UI can be found under `src/screens/Menu/Menu.js` Its [query](https://graphql.org/learn/queries/) can be found under `src/apollo/server.js` with constant `categories` * Result: Fetches categories of the items ### MenuItems * Location: The UI can be found under `src/screens/MenuItems/MenuItems.js` Its mutations and queries can be found under `src/apollo/server.js` with constant `foods` and `src/apollo/client.js` with constants `foodItem` and `getCartItems` * Working: `apollo` is divided into two main files `server.js` and `client.js` The first file is used to interact with the api server while the second is used for internal application level state management. Constants `foods` and `getCartItems` is a query while `foodItem` is a [fragment](https://graphql.org/learn/queries/#fragments). * Result: `foods` is queried with the selected category in the previous screen. If a user clicks add button inside the MenuItems screen `foodItem` [fragment](https://graphql.org/learn/queries/#fragments) is executed which also updated query `getCartItems` which updated the quantity inside cart item as well as the adds the food item if it exists previously will only update its quantity. ### ItemDetail * Location: The UI can be found under `src/screens/ItemDetail/ItemDetail.js` Its mutations and queries can be found under `src/apollo/server.js` with constant `like` and `src/apollo/server.js` with constant `foodItems` and `getCartItems` * Working: Constants `foodItems` and `getCartItems` have been described above `like` is a mutation which adds it to like food with parameter food id. ### Cart * Location: The UI can be found under `src/screens/Cart/Cart.js` It has Apollo constants of `getCartItems` and `getProfile` . `getProfile` is located at `src/apollo/client.js` * Working: Constant `getProfile` is a type of query that gets user details name, email, phone, location and picture. * Result: The `getProfile` is used to get the user delivery location. ### Payment * Location: The UI can be found under `src/screens/Payment/Payment.js` It has Apollo constants `placeOrder` and `getCartItems` . `placeOrder` is located at `src/apollo/server.js` Its a mutation. * Working: Constant `placeOrder` send the details to the server with item delivery address payment status and user profile. * Result: User payment is made by selecting either Paypal or Stripe. If the selected option is Cash on delivery payment is not made and the status of the payment is still pending. Its status is changed from the admin panel. An email is also sent to the user with the order detail information. ### MyOrders * Location: The UI can be found under `src/screens/MyOrders/MyOrders.js` It has Apollo constant of `myOrders` located at `src/apollo/server.js` its of type query * Result: All the users orders are queried with an option to reorder it for the user. ### RateAndReview * Location: The UI can be found under `src/screens/RateAndReview/RateAndReview.js` It has Apollo constant of `reviewOrder` its of type mutation * Result: The user can give ratings with stars for his order made. ### Profile * Location: The UI can be found under `src/screens/Settings/Settings.js` It has Apollo constants of `updateUser` , `profile` and `getProfile` . Constants `updateUser` and `profile` are located in `src/apollo/server.js` while constant `getProfile` is located at `src/apollo/client.js` * Working: `updateUser` is of type mutation where the user information is updated. `profile` is of type query where the user profile is queried. * Result: User profile is updated. All the fields in settings are required to place order. ### Addresses * Location: The UI can be found under `src/screens/`Addresses`/`Addresses`.js` It has Apollo constants of `profile` its of type query located in `src/apollo/client.js` * Results: `profile.addresses` gets all the address that the user added in addresses list. ### OrderDetail * Location: The UI can be found under `src/screens/PastOrderDetail/PastOrderDetail.js` It has Apollo constants of `orderItem` its of type fragment located in `src/apollo/client.js` * Working: `orderItem` has all the details for item as well as the status of the order based on the status the timeline is rendered dynamically