Components

Components

• App

• Register

• Login

• Menu

• MenuItems

• ItemDetail

• Cart

• Payment

• MyOrders

• Settings

• Notifications

• 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 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 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 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 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.

• Result: foods is queried with the selected category in the previous screen. If a user clicks add button inside the MenuItems screen foodItem fragment 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.

Settings

• Location: The UI can be found under src/screens/Settings/Settings.js It has Apollo constants of updateUser , uploadPicture , profile and getProfile . Constants updateUser , uploadPicture 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. uploadPicture is of type mutation where the users profile pic is updated on server. profile is of type query where the user profile is queried.

• Result: User profile is updated with image uploaded. All the fields in settings are required to place order.

Notifications

• Location: The UI can be found under src/screens/Notifications/Notifications.js It has Apollo constants of getNotifications its of type query located in src/apollo/client.js

• Results: getNotifications gets all the notification that the user has notification are generated when the order status is changed from admin panel.

OrderDetail

• Location: The UI can be found under src/screens/OrderDetail/OrderDetail.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