YOMA-201, YOMA-202,YOMA-203 - feat(Cv page, Profile page, About me): …

…Muliple pages (#6)

* added bottom tab bar with icons

* added UI cards with styles

* ran prettier

* added profile photo component

* Added custom textinputs

* added rn fetch blob and image picker package

* added props for header component

* Profile page update

* initial about us page setup

* about updation completed

* added test for rnfetchblob and added modal

* format:ran prettier

* chore: sorting import files and folder name changes

* chore: optimizing import statements

* refactor(colors): removing inline colors and adding into common file

* refactor(colors): removing inline colors in progress circle component

* refactor(Typography): adding text into pages

* refactor(inline styles): adding styles into styles dedicated files

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,9 @@
   package="com.yomamobile">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <application
       android:name=".MainApplication"

android/build.gradle

@@ -15,7 +15,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath("com.android.tools.build:gradle:4.0.1")
         classpath 'com.google.gms:google-services:4.1.0' 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

ios/YomaMobile.xcodeproj/project.pbxproj

@@ -40,6 +40,10 @@
 		DB34D07D12F2422FA4E56407 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 79452EC823EA4B78AB66E7A6 /* Foundation.ttf */; };
 		E1A725E8563149CC8EBFC848 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3FCB222A10EF401F923C345E /* Zocial.ttf */; };
 		EA7BA24E333E42A3BE909D7B /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4351D2B595B94C0BA34BEEFA /* AntDesign.ttf */; };
+		3BC4A7008AB345D599E3C907 /* Montserrat-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A06793D71E7B4107AF40C799 /* Montserrat-Bold.ttf */; };
+		22250B4D344E47609F391592 /* Montserrat-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 33E1203FEC5E464D8D5AC8A0 /* Montserrat-Medium.ttf */; };
+		8A2314C289B544D795147496 /* Montserrat-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 148E78B6D7A34DD1AD96737A /* Montserrat-Regular.ttf */; };
+		FA5986E3D7114AB09A46D12E /* Montserrat-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7FAD18112A79403494B993E5 /* Montserrat-SemiBold.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -107,6 +111,10 @@
 		E9D626E3120F0CB338E64544 /* libPods-YomaMobile-tvOSTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-YomaMobile-tvOSTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		A06793D71E7B4107AF40C799 /* Montserrat-Bold.ttf */ = {isa = PBXFileReference; name = "Montserrat-Bold.ttf"; path = "../src/assets/fonts/Montserrat-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		33E1203FEC5E464D8D5AC8A0 /* Montserrat-Medium.ttf */ = {isa = PBXFileReference; name = "Montserrat-Medium.ttf"; path = "../src/assets/fonts/Montserrat-Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		148E78B6D7A34DD1AD96737A /* Montserrat-Regular.ttf */ = {isa = PBXFileReference; name = "Montserrat-Regular.ttf"; path = "../src/assets/fonts/Montserrat-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		7FAD18112A79403494B993E5 /* Montserrat-SemiBold.ttf */ = {isa = PBXFileReference; name = "Montserrat-SemiBold.ttf"; path = "../src/assets/fonts/Montserrat-SemiBold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -212,6 +220,10 @@
 				CC6A941697AB47F8BC433643 /* Octicons.ttf */,
 				A1DDCA38A033420EB081D91C /* SimpleLineIcons.ttf */,
 				3FCB222A10EF401F923C345E /* Zocial.ttf */,
+				A06793D71E7B4107AF40C799 /* Montserrat-Bold.ttf */,
+				33E1203FEC5E464D8D5AC8A0 /* Montserrat-Medium.ttf */,
+				148E78B6D7A34DD1AD96737A /* Montserrat-Regular.ttf */,
+				7FAD18112A79403494B993E5 /* Montserrat-SemiBold.ttf */,
 			);
 			name = Resources;
 			path = "";
@@ -431,6 +443,10 @@
 				D7FBCD785F134024B8A8E52D /* Octicons.ttf in Resources */,
 				9732617EE2674274AF978ED0 /* SimpleLineIcons.ttf in Resources */,
 				E1A725E8563149CC8EBFC848 /* Zocial.ttf in Resources */,
+				3BC4A7008AB345D599E3C907 /* Montserrat-Bold.ttf in Resources */,
+				22250B4D344E47609F391592 /* Montserrat-Medium.ttf in Resources */,
+				8A2314C289B544D795147496 /* Montserrat-Regular.ttf in Resources */,
+				FA5986E3D7114AB09A46D12E /* Montserrat-SemiBold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-google-signin/google-signin": "^6.0.0",
+    "@react-navigation/bottom-tabs": "^5.11.9",
     "@react-navigation/native": "^5.9.3",
     "@react-navigation/stack": "^5.14.3",
     "@reduxjs/toolkit": "^1.5.0",
@@ -45,6 +46,7 @@
     "react-native-flash-message": "^0.1.23",
     "react-native-flipper": "^0.81.0",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-image-crop-picker": "^0.36.0",
     "react-native-localize": "^2.0.2",
     "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^3.2.0",
@@ -54,14 +56,15 @@
     "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
+    "rn-fetch-blob": "^0.12.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
     "@babel/runtime": "^7.8.4",
-    "@react-native-community/eslint-config": "^1.1.0",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-native": "^7.2.0",
+    "@react-native-community/eslint-config": "^1.1.0",
     "@trivago/prettier-plugin-sort-imports": "^1.4.4",
     "@types/jest": "^25.2.3",
     "@types/react-native": "^0.63.2",
@@ -98,7 +101,8 @@
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|@?react-navigation)"
+      "node_modules/(?!(jest-)?react-native|@?react-navigation)",
+      "node_modules/(?!rn-fetch-blob)"
     ],
     "setupFiles": [
       "./node_modules/react-native-gesture-handler/jestSetup.js"
@@ -118,4 +122,4 @@
       "pre-push": "npm run _git:pre-push"
     }
   }
-}
+}

react-native.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  assets: ['./src/assets/Fonts'],
+  assets: ['./src/assets/fonts'],
 }

src/api/index.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { AUTH_TOKEN, BASE_URL } from 'helpers/helpers'
 
 import Env from '../env.json'
 import auth from './auth'
@@ -20,7 +21,7 @@ instance.interceptors.request.use(
     request.headers = {
       ...request.headers,
       'Content-Type': 'application/json',
-      // Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${AUTH_TOKEN}`,
     }
     return request
   },

src/api/users/index.ts

@@ -1,9 +1,19 @@
 import { AxiosInstance } from 'axios'
 
 import password from './password'
+import photo from './photo'
 
 export default function (instance: AxiosInstance) {
   return {
+    edit(userId: string, body: any, config = {}) {
+      return instance.patch(`users/${userId}`, body, config)
+    },
+
+    getById(userId: string, config = {}) {
+      return instance.get(`users/${userId}`, config)
+    },
+
     password: password(instance),
+    photo: photo(),
   }
 }

src/api/users/photo/index.ts

@@ -0,0 +1,21 @@
+import { AUTH_TOKEN, BASE_URL } from 'helpers/helpers'
+import RNFetchBlob from 'rn-fetch-blob'
+
+export default function () {
+  return {
+    create(userId: string, photo: object) {
+      return RNFetchBlob.fetch(
+        'POST',
+        `${BASE_URL}users/${userId}/photo`,
+        {
+          Authorization: `Bearer ${AUTH_TOKEN}`,
+          'Content-Type': 'multipart/form-data',
+        },
+        [photo],
+      ).catch(err => {
+        console.log('err', err)
+        throw err
+      })
+    },
+  }
+}

src/assets/images/index.ts

@@ -0,0 +1,47 @@
+import BackIcon from './BackIcon.svg'
+import BlueRightCircle from './BlueRightCircle.svg'
+import BlueTick from './BlueTick.svg'
+import FacebookIcon from './FacebookIcon.svg'
+import GoogleIcon from './GoogleIcon.svg'
+import LightYellowPattern from './LightYellowPattern.svg'
+import Message from './Message.svg'
+import PurpleQuarter from './PurpleQuarter.svg'
+import PurpleSemiCircle from './PurpleSemiCircle.svg'
+import RLabsLogo from './RLabsLogo.svg'
+import RedSemiCircle from './RedSemiCircle.svg'
+import WhiteLogo from './WhiteLogo.svg'
+import YellowCircleLeft from './YellowCircleLeft.svg'
+import YellowCircleRight from './YellowCircleRight.svg'
+import BackIconGrey from './icon-back-grey.svg'
+import ChallengesIcon from './icon-challenges.svg'
+import CoursesIcon from './icon-courses.svg'
+import DigitalCvIcon from './icon-digital-cv.svg'
+import EditIcon from './icon-edit.svg'
+import ProfileIcon from './icon-profile.svg'
+import MarketplaceIcon from './marketplaceIcon.svg'
+import ZIcon from './zIcon.svg'
+
+export {
+  BackIcon,
+  BackIconGrey,
+  BlueRightCircle,
+  BlueTick,
+  ChallengesIcon,
+  CoursesIcon,
+  DigitalCvIcon,
+  EditIcon,
+  FacebookIcon,
+  GoogleIcon,
+  LightYellowPattern,
+  MarketplaceIcon,
+  Message,
+  ProfileIcon,
+  PurpleQuarter,
+  PurpleSemiCircle,
+  RedSemiCircle,
+  RLabsLogo,
+  WhiteLogo,
+  YellowCircleLeft,
+  YellowCircleRight,
+  ZIcon,
+}