Add shimmer loader and refresh token

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

app.json

@@ -4,7 +4,6 @@
     "slug": "IITK-Coin",
     "version": "1.0.0",
     "orientation": "portrait",
-    "entryPoint": "./src/App.tsx",
     "icon": "./src/assets/icon.png",
     "splash": {
       "image": "./src/assets/splash.png",

package.json

@@ -1,5 +1,5 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "src/App.tsx",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -10,33 +10,37 @@
     "lint-fix": "eslint --ext .tsx --ext .ts --ext .js --ext .jsx . --fix"
   },
   "dependencies": {
-    "@expo-google-fonts/merriweather-sans": "^0.2.0",
-    "@expo-google-fonts/open-sans": "^0.2.0",
-    "@expo/ngrok": "^4.1.0",
-    "@expo/vector-icons": "^12.0.5",
-    "@gorhom/bottom-sheet": "^4.1.0",
+    "@expo-google-fonts/merriweather-sans": "^0.2.3",
+    "@expo-google-fonts/open-sans": "^0.2.3",
+    "@expo/ngrok": "^4.1.1",
+    "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^4.5.1",
     "axios": "^0.21.4",
-    "expo": "~42.0.1",
-    "expo-app-loading": "^1.1.2",
-    "expo-secure-store": "^10.2.0",
-    "expo-status-bar": "~1.0.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "expo": "~48.0.13",
+    "expo-app-loading": "^1.3.0",
+    "expo-linear-gradient": "~12.1.2",
+    "expo-secure-store": "~12.1.1",
+    "expo-status-bar": "~1.4.4",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.8",
     "react-native-animatable": "^1.3.3",
-    "react-native-flash-message": "^0.2.0",
+    "react-native-flash-message": "^0.2.1",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-material-kit": "^0.6.0-beta.1",
     "react-native-material-ripple": "^0.9.1",
-    "react-native-svg": "^12.1.1",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-svg": "13.4.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-native-web": "~0.13.12",
-    "react-redux": "^7.2.5",
+    "react-native-web": "~0.18.10",
+    "react-redux": "^7.2.9",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@types/react": "~16.9.35",
+    "@types/react": "~18.0.27",
     "@types/react-native": "~0.63.2",
     "@types/react-native-material-ripple": "^0.9.2",
     "@types/react-redux": "^7.1.18",
@@ -48,7 +52,7 @@
     "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.11.0",
-    "typescript": "~4.0.0"
+    "typescript": "^4.9.4"
   },
   "private": true
 }

src/App.tsx

@@ -4,8 +4,10 @@ import { Provider, useDispatch } from "react-redux";
 import { StyleSheet, View } from "react-native";
 import AppLoading from "expo-app-loading";
 import { useFonts, OpenSans_400Regular, OpenSans_600SemiBold, OpenSans_700Bold } from "@expo-google-fonts/open-sans";
-import { FontAwesome, AntDesign, Ionicons } from "@expo/vector-icons";
+import { FontAwesome, AntDesign, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import FlashMessage from "react-native-flash-message";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 import { COLORS } from "styles";
 import store from "redux-store";
@@ -24,22 +26,26 @@ function App() {
 		...FontAwesome.font,
 		...AntDesign.font,
 		...Ionicons.font,
+		...MaterialIcons.font,
 	});
 
 	const dispatch = useDispatch();
 	const [checkLoggedIn, setCheckLoggedIn] = useState(false);
-	
+
 	useEffect(() => {
-		isLoggedIn().then(({Status, RollNo}) => {
+		setCheckLoggedIn(false);
+		dispatch(setCurrentScreen(ScreenType.LOGIN));
+		dispatch(setIsAuthenticated(false));
+		isLoggedIn().then(({ Status, RollNo }) => {
 			setCheckLoggedIn(true);
 			if (Status) {
 				dispatch(setCurrentScreen(ScreenType.HOME));
 				dispatch(setIsAuthenticated(true));
 				dispatch(setRollNo(RollNo));
 			}
 		});
-	});
-	
+	}, [dispatch]);
+
 	return (
 		(fontsLoaded && checkLoggedIn) ? 
 			(
@@ -62,14 +68,19 @@ const styles = StyleSheet.create({
 	flash: {
 		alignItems: "center",
 		borderRadius: 20,
-	}
+	},
 });
 
 const AppWrapper = () => {
 	return (
-		<Provider store={store}>
-			<App />
-		</Provider>
+		// eslint-disable-next-line react-native/no-inline-styles
+		<GestureHandlerRootView style={{ flex: 1 }}>
+			<BottomSheetModalProvider>
+				<Provider store={store}>
+					<App />
+				</Provider>
+			</BottomSheetModalProvider>
+		</GestureHandlerRootView>
 	);
 };
 

src/api/auth.ts

@@ -129,13 +129,37 @@ const postLoginStatus = async (token: string): Promise<Response> => {
 	return response;
 };
 
+const getTokenRefreshed = async (accessToken: string, refreshToken: string): Promise<Response> => {
+	let payload, status, token;
+	await axios.get(API.BACKEND.BASE_URL + API.BACKEND.ENDPOINT.REFRESH_TOKEN, {
+		headers: {
+			"cookie": accessToken + ";" + refreshToken
+		}
+	}).then(res => {
+		token = res.headers["set-cookie"][0];
+		payload = res.data;
+		status = res.status;
+	}).catch(err => {
+		payload = err?.response?.data.error ?? API.BACKEND.ERROR.NETWORK.PAYLOAD;
+		status = err?.response?.status ?? API.BACKEND.ERROR.NETWORK.STATUS;
+	});
+	const response: Response = {
+		Payload: payload,
+		Status: status,
+		Token: token
+	};
+	return response;
+};
+
 export {
 	OTPParams,
 	SignupParams,
 	LoginParams,
+	Response,
 	postOTP,
 	postSignup,
 	postLogin,
 	postLogout,
-	postLoginStatus
+	postLoginStatus,
+	getTokenRefreshed
 };

src/callbacks/auth/checkLogin.ts

@@ -1,13 +1,16 @@
 import { postLoginStatus } from "api/auth";
-import { getToken } from "secure-store";
+import { getAccessToken } from "secure-store";
+
+import { refreshToken } from "./refresh";
 
 interface CheckStatus {
 	RollNo: string;
 	Status: boolean;
 }
 
 export const isLoggedIn = async (): Promise<CheckStatus> => {
-	const token = await getToken();
+	await refreshToken();
+	const token = await getAccessToken();
 	let rollNo = "";
 	let status = false;
 	if (token) {

src/callbacks/auth/login.ts

@@ -1,16 +1,12 @@
 import { showMessage } from "react-native-flash-message";
 
-import { saveToken } from "secure-store";
+import { saveAccessToken, saveRefreshToken } from "secure-store";
 import { auth } from "api";
 
 export const login = async (params: auth.LoginParams): Promise<boolean> => {
 	const response = await auth.postLogin(params);
 	if (response.Status === 200) {
-		const tokenArr = response.Token.split(";");
-		if (tokenArr.length > 0) {
-			saveToken(tokenArr[0]); // Save new token
-		}
-		return true;
+		return await saveToken(response.Token);
 	} else {
 		showMessage({
 			message: response.Payload,
@@ -19,3 +15,14 @@ export const login = async (params: auth.LoginParams): Promise<boolean> => {
 		return false;
 	}
 };
+
+export const saveToken = async (tokens: string): Promise<boolean> => {
+	const tokenArr = tokens.split(";");
+	if (tokenArr.length > 0) {
+		await saveAccessToken(tokenArr[0]);
+		await saveRefreshToken(tokenArr[3]);
+		return true;
+	} else {
+		return false;
+	}
+};

src/callbacks/auth/refresh.ts

@@ -0,0 +1,22 @@
+import { getTokenRefreshed, Response } from "api/auth";
+import { getAccessToken, getRefreshToken } from "secure-store";
+
+import { saveToken } from "./login";
+
+export const refreshToken = async (): Promise<boolean> => {
+	const accessToken = await getAccessToken();
+	const refreshToken = await getRefreshToken();
+	let res: Response;
+
+	if (accessToken && refreshToken) {
+		res = await getTokenRefreshed(accessToken, refreshToken);
+	} else {
+		return false;
+	}
+
+	if (res.Status === 200) {
+		return await saveToken(res.Token);
+	}
+
+	return false;
+};

src/callbacks/history/history.ts

@@ -1,15 +1,28 @@
 import { showMessage } from "react-native-flash-message";
 
 import { history } from "api";
-import { getToken } from "secure-store";
+import { getAccessToken } from "secure-store";
+import { refreshToken } from "callbacks/auth/refresh";
+import { API } from "constant";
 
 export const getHistory = async (rollNo: string): Promise<history.TransactionHistory[]> => {
-	const token = await getToken();
+	const token = await getAccessToken();
 	if(token) {
 		const res = await history.getTransactionHistory({ RollNo: rollNo }, token);
 		if(res.Status == 200){
 			return res.Payload;
-		} else {
+		} else if(res.Status == 401) {
+			const ok = await refreshToken();
+			if(ok) {
+				return getHistory(rollNo);
+			} else {
+				showMessage({
+					message: API.BACKEND.ERROR.EXPIRED.PAYLOAD,
+					type: "danger",
+				});
+			}
+		}
+		else {
 			showMessage({
 				message: res.Error,
 				type: "danger",

src/callbacks/user/name.ts

@@ -1,14 +1,26 @@
 import { showMessage } from "react-native-flash-message";
 
 import { user } from "api";
-import { getToken } from "secure-store";
+import { getAccessToken } from "secure-store";
+import { API } from "constant";
+import { refreshToken } from "callbacks/auth/refresh";
 
 export const getName = async (rollNo: string): Promise<string> => {
-	const token = await getToken();
+	const token = await getAccessToken();
 	if(token) {
 		const res = await user.getUsername(rollNo, token);
 		if(res.Status == 200){
 			return res.Payload;
+		} else if(res.Status == 401) {
+			const ok = await refreshToken();
+			if(ok) {
+				return getName(rollNo);
+			} else {
+				showMessage({
+					message: API.BACKEND.ERROR.EXPIRED.PAYLOAD,
+					type: "danger",
+				});
+			}
 		} else {
 			showMessage({
 				message: res.Payload,

src/callbacks/wallet/balance.ts

@@ -1,14 +1,26 @@
 import { showMessage } from "react-native-flash-message";
 
 import { wallet } from "api";
-import { getToken } from "secure-store";
+import { getAccessToken } from "secure-store";
+import { refreshToken } from "callbacks/auth/refresh";
+import { API } from "constant";
 
 export const getBalance = async (rollNo: string): Promise<number> => {
-	const token = await getToken();
+	const token = await getAccessToken();
 	if(token) {
 		const res = await wallet.getWalletBalance(rollNo, token);
 		if(res.Status == 200){
 			return parseInt(res.Payload);
+		} else if(res.Status == 401) {
+			const ok = await refreshToken();
+			if(ok) {
+				return getBalance(rollNo);
+			} else {
+				showMessage({
+					message: API.BACKEND.ERROR.EXPIRED.PAYLOAD,
+					type: "danger",
+				});
+			}
 		} else {
 			showMessage({
 				message: res.Payload,

src/callbacks/wallet/redeem.ts

@@ -1,14 +1,26 @@
 import { showMessage } from "react-native-flash-message";
 
 import { wallet } from "api";
-import { getToken } from "secure-store";
+import { getAccessToken } from "secure-store";
+import { refreshToken } from "callbacks/auth/refresh";
+import { API } from "constant";
 
 export const redeemRequest = async (params: wallet.RedeemNewParams): Promise<string> => {
-	const token = await getToken();
+	const token = await getAccessToken();
 	if (token) {
 		const res = await wallet.postNewRedeem(params, token);
 		if (res.Status === 200) {
 			return res.Payload;
+		} else if(res.Status == 401) {
+			const ok = await refreshToken();
+			if(ok) {
+				return redeemRequest(params);
+			} else {
+				showMessage({
+					message: API.BACKEND.ERROR.EXPIRED.PAYLOAD,
+					type: "danger",
+				});
+			}
 		}else {
 			showMessage({
 				message: res.Payload,