From cf08dab685a17a5276f4f91a5e1f1d219ae615e0 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 6 Jul 2023 16:04:57 +0800
Subject: [PATCH] Added content to onboarding and improved button to be
 responsive if disabled

---
 package-lock.json                    | 10 ++++++++++
 package.json                         |  5 +++--
 src/components/Button/Button.tsx     | 15 +++++++++++++--
 src/routes/Onboarding/Onboarding.tsx | 26 ++++++++++++++++++++++++++
 src/styles.tsx                       |  1 +
 5 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bc946b2..85b5680 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
+        "react-native-dropdown-picker": "^5.4.6",
         "react-native-gesture-handler": "~2.9.0",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
@@ -12160,6 +12161,15 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-dropdown-picker": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
+      "integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
diff --git a/package.json b/package.json
index 5c2ccd0..d6d1135 100644
--- a/package.json
+++ b/package.json
@@ -16,18 +16,19 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
+    "expo-linking": "~4.0.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1",
-    "expo-linking": "~4.0.1"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6a843c7..3375a7e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,20 +1,31 @@
 import * as React from "react";
 import { Pressable, GestureResponderEvent } from "react-native";
 import styles from "../../styles";
+import { colors } from "../../styles";
 
 export interface props {
   children: React.ReactNode;
   onPress: (event: GestureResponderEvent) => void;
   color: string;
+  disabled?: boolean;
 }
 
-export default function Button(props: props) {
+export default function Button({ disabled = false, ...props }: props) {
+  const rgb = props.color.match(/\d+/g);
   return (
     <Pressable
+      disabled={disabled}
       onPress={props.onPress}
       style={{
         ...styles.button_template,
-        ...{ backgroundColor: props.color, width: "50%" },
+        ...{
+          backgroundColor: disabled
+            ? rgb
+              ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`
+              : "rgba(0, 0, 0, 0)"
+            : props.color,
+          width: "50%",
+        },
       }}
     >
       {props.children}
diff --git a/src/routes/Onboarding/Onboarding.tsx b/src/routes/Onboarding/Onboarding.tsx
index 9a150b3..22a225d 100644
--- a/src/routes/Onboarding/Onboarding.tsx
+++ b/src/routes/Onboarding/Onboarding.tsx
@@ -6,6 +6,7 @@ import { RootDrawerParamList } from "../../interfaces/Interfaces";
 import { colors } from "../../styles";
 import { AnimatePresence, MotiView } from "moti";
 import { useEffect, useState } from "react";
+import Button from "../../components/Button/Button";
 export default function Onboarding() {
   const navigation = useNavigation<RootDrawerParamList>();
   // const dispatch = useDispatch();
@@ -15,6 +16,17 @@ export default function Onboarding() {
     course: "",
     semester: "",
   });
+  function isStringEmpty(str: string) {
+    return str === "" || str === null || str === undefined;
+  }
+  const [complete, setComplete] = useState(false);
+  useEffect(() => {
+    setComplete(
+      !isStringEmpty(student_info.year_level) &&
+        !isStringEmpty(student_info.course) &&
+        !isStringEmpty(student_info.semester)
+    );
+  }, [student_info]);
   function Introduction() {
     const [shown, setShown] = useState(true);
     useEffect(() => {
@@ -72,6 +84,20 @@ export default function Onboarding() {
         >
           <Text style={styles.text_white_medium}>Academic Info</Text>
         </MotiView>
+        <MotiView
+          from={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ type: "timing", duration: 900, delay: 2000 }}
+          style={styles.button_template}
+        >
+          <Button
+            disabled={!complete}
+            onPress={() => console.log(complete)}
+            color={colors.blue_3}
+          >
+            <Text style={styles.text_white_small}>Proceed</Text>
+          </Button>
+        </MotiView>
       </View>
     </View>
   );
diff --git a/src/styles.tsx b/src/styles.tsx
index 7d80160..d3dfd15 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -11,6 +11,7 @@ export const colors = {
   text_error: "#e32d1e",
   text_success: "green",
   icon_color: "white",
+  blue_disabled: "#C07624",
 };
 
 export const font_sizes = {