Merge branch 'update-env' into 'staging'

Fix absolute url and fetch API bug, update README.md for environment config

See merge request !50

.env.example

-# localhost
-API_BASE_URL=http://localhost:8000/
-GOOGLE_CLIENT_ID=813112248680-ulv0amtocut652j31qbpvubtclbd2c7o.apps.googleusercontent.com
-
-# staging
-API_BASE_URL=https://dietela-backend.herokuapp.com/
-GOOGLE_CLIENT_ID=
-
-# production
 API_BASE_URL=
 GOOGLE_CLIENT_ID=

.env.local.example

+API_BASE_URL=http://localhost:8000
+GOOGLE_CLIENT_ID=813112248680-ulv0amtocut652j31qbpvubtclbd2c7o.apps.googleusercontent.com

.env.staging.example

+API_BASE_URL=https://dietela-backend.herokuapp.com
+GOOGLE_CLIENT_ID=813112248680-ulv0amtocut652j31qbpvubtclbd2c7o.apps.googleusercontent.com

README.md

@@ -8,7 +8,14 @@
 Dietela is an Android-based application that provides personalised diet and online nutritionist consultation services.
 Check out Dietela app by downloading the APK file [here](https://drive.google.com/drive/folders/1Irc2aiSuvhysRSDDd6pwAAfbgUkkobmk?usp=sharing)!
 
-## Installation Manual
+## Table of Contents
+
+- [Getting Started](#getting-started)
+- [Environment Configuration](#environment-configuration)
+- [Current Features (PBIs)](#current-features-pbis)
+- [Developers](#developers)
+
+## Getting Started
 
 * Install npm (version 6 or later).
 * Install yarn by `npm install --global yarn`.
@@ -16,43 +23,32 @@ Check out Dietela app by downloading the APK file [here](https://drive.google.co
 * Clone the repository.
 * Enter the project directory with `cd dietela-mobile`.
 * Build the dependencies with `yarn install`.
-* Create `.env` file based on `.env.example`.
+* Create `.env` file by following the [environment configuration](#environment-configuration) instructions.
 * Run and build the app in development node by running `yarn android`.
 * View it in your Android emulator or physical device.
 
-## Current Features
-
-- PBI 1: Dietela Quiz & Profile Dietku (Client)
-
-    Clients are required to fill out a quiz related to the design needs of the diet program that will be made by Dietela team
-
-- PBI 2: Dietela Quiz & Profile Dietku (Dietela team)
-
-    Dietela team can store client data to provide quiz results containing programs and nutritionists recommendation to clients
-
-- PBI 3: Choose Plan
-    
-    Clients can continue by choosing recommended diet program that is suitable for their needs
-
-- PBI 4: Registration
-
-    Clients can register an account to access Dietela's authenticated-only features
-
-- PBI 5: Login
-
-    Clients can do authentication using a registered account to access Dietela's authenticated-only features
-
-- PBI 6: Logout
+## Environment Configuration
 
-    Clients can sign out from the Dietela app
+We have three different environment settings:
 
-- PBI 7: Checkout
+| Environment   | Branch     | Example file             | Which env should I use?                                               |
+| ------------- | ---------- | ------------------------ | --------------------------------------------------------------------- |
+| Localhost     | -          | `.env.local.example`     | You are a backend developer wanting to test your code changes locally |
+| Staging       | staging    | `.env.staging.example`   | You are a mobile developer wanting to update the app codebase         |
+| Production    | master     | -                        | NOT for development purposes                                          |
 
-    Clients can choose a diet program and a nutritionist then proceed to do the payment
+For more granular configurations, use `.env.example` to get all needed environment variables and insert the missing values.
 
-- PBI 8: Payment Integration
+## Current Features (PBIs)
 
-    Clients can perform payment using a third party payment gateway (Midtrans)
+1. Dietela Quiz & Profile Dietku (Client) - Clients are required to fill out a quiz related to the design needs of the diet program that will be made by Dietela team.
+2. Dietela Quiz & Profile Dietku (Dietela team) -  Dietela team can provide results containing diet assessment and program recommendations based on the clients' quiz answers.
+3. Choose Plan - Clients can choose recommended diet program and nutritionist suitable for their needs.
+4. Registration - Clients can create an account to access Dietela's premium features.
+5. Login - Clients can sign in with a registered account or via Google authentication to access Dietela's premium features.
+6. Logout - Clients can sign out from the Dietela app.
+7. Checkout - Clients can view their chosen diet program and nutritionist and proceed to pay.
+8. Payment Integration - Clients can perform payment using a third-party payment gateway (Midtrans).    
 
 ## Developers
 

src/hooks/useApi/index.ts

-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ApiResponse, Response } from 'services/api';
 
 import { Toast } from 'components/core';
@@ -13,9 +13,12 @@ const useApi = <T>(
     success: false,
   });
 
+  const fetchApiWrapper = useCallback(fetchApi, []);
+
   useEffect(() => {
     const fetchData = async () => {
-      const apiResponse = await fetchApi();
+      const apiResponse = await fetchApiWrapper();
+      console.log(apiResponse);
       if (!apiResponse.success) {
         Toast.show({
           type: 'error',
@@ -30,7 +33,7 @@ const useApi = <T>(
     };
 
     fetchData();
-  }, [fetchApi]);
+  }, [fetchApiWrapper]);
 
   return response;
 };

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.tsx

@@ -6,13 +6,14 @@ import { WebView } from 'react-native-webview';
 import { InfoCard, Loader } from 'components/core';
 import { layoutStyles, colors } from 'styles';
 import { useDownloadFiles } from 'hooks';
+import { getAbsoluteUrl } from 'utils/format';
 
 import { styles } from './styles';
 import { Props } from './types';
 
 const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   const { download, pdfViewUrl, fileName } = useDownloadFiles(
-    data?.client_plan_meal,
+    getAbsoluteUrl(data?.client_plan_meal),
   );
 
   if (!data) {

src/services/api.ts

@@ -18,7 +18,7 @@ export interface Response<T> {
 export type ApiResponse<T> = Promise<Response<T>>;
 
 const apiInstance = axios.create({
-  baseURL: API_BASE_URL,
+  baseURL: API_BASE_URL + '/',
 });
 
 export async function api<T>(

src/utils/format.ts

 import dayjs from 'dayjs';
+import { API_BASE_URL } from 'env';
 
 export const convertDate = (dateString?: string): string => {
   return dateString ? dayjs(dateString).format('D MMM YYYY') : '';
@@ -6,3 +7,6 @@ export const convertDate = (dateString?: string): string => {
 
 export const dateToString = (date: Date): string =>
   dayjs(date).format('YYYY-MM-DD');
+
+export const getAbsoluteUrl = (path?: string | null) =>
+  path ? API_BASE_URL + path : '';