Merge pull request #4 from Delemangi/feat/faq

Implement FAQ and proper routing
Delemangi · Feb 11, 2024 · 294d19a · 294d19a
2 parents 9697230 + b70c0cb
commit 294d19a
Show file tree

Hide file tree

Showing 19 changed files with 374 additions and 101 deletions.
diff --git a/src/api/hooks.ts b/src/api/hooks.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { getUrl, listUrl } from "./urls";
+import { getUrl, listUrl, questionsUrl } from "./urls";
 import { Post } from "../types/Post";
+import { Question } from "../types/Question";
 
 export const useGetPosts = (type: string | null) => {
   return useQuery<Post[], Error>({
@@ -26,3 +27,11 @@ export const useGetPostTypes = () => {
     staleTime: Infinity,
   });
 };
+
+export const useGetQuestions = () => {
+  return useQuery<Question[], Error>({
+    queryKey: ["questions"],
+    queryFn: () => fetch(questionsUrl()).then((res) => res.json()),
+    staleTime: Infinity,
+  });
+};
diff --git a/src/api/urls.ts b/src/api/urls.ts
@@ -4,3 +4,5 @@ export const getUrl = (scraperType: string) =>
   `${config.BASE_URL}/get/${scraperType}`;
 
 export const listUrl = () => `${config.BASE_URL}/list`;
+
+export const questionsUrl = () => `${config.BASE_URL}/questions`;
diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
@@ -1,11 +1,11 @@
-import AppHeader from "@components/AppHeader";
 import { makeStyles } from "@rneui/themed";
 import { usePostStore } from "@stores/postStore";
+import { useQuestionStore } from "@stores/questionStore";
 import { Slot } from "expo-router";
 import { useEffect } from "react";
 import { View } from "react-native";
 
-import { useGetPostTypes } from "../../api/hooks";
+import { useGetPostTypes, useGetQuestions } from "../../api/hooks";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -23,17 +23,24 @@ const useStyles = makeStyles((theme) => ({
 const HomeLayout = () => {
   const styles = useStyles();
   const { data: typesData } = useGetPostTypes();
+  const { data: questionsData } = useGetQuestions();
   const setTypes = usePostStore((state) => state.setTypes);
+  const setQuestions = useQuestionStore((state) => state.setQuestions);
 
   useEffect(() => {
     if (typesData) {
       setTypes(typesData);
     }
   }, [typesData]);
 
+  useEffect(() => {
+    if (questionsData) {
+      setQuestions(questionsData);
+    }
+  }, [questionsData]);
+
   return (
     <>
-      <AppHeader />
       <View style={styles.container}>
         <Slot />
       </View>

diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
@@ -1,57 +1,49 @@
-import { useGetPosts } from "@api/hooks";
 import { isRouteAuthenticated } from "@auth/routes";
-import LoadingSpinner from "@components/LoadingSpinner";
-import { PostCard } from "@components/PostCard";
 import { Text, makeStyles } from "@rneui/themed";
-import { usePostStore } from "@stores/postStore";
 import { useUserStore } from "@stores/userStore";
 import { Redirect, usePathname } from "expo-router";
-import { ScrollView, View } from "react-native";
+import { View } from "react-native";
 
 const useStyles = makeStyles((theme) => ({
   container: {
-    display: "flex",
+    flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    marginTop: 20,
+    backgroundColor: theme.colors.background,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: theme.colors.white,
   },
   text: {
     color: theme.colors.white,
   },
-  loadingSpinner: {
-    marginTop: 20,
+  user: {
+    color: theme.colors.white,
+    fontWeight: "bold",
   },
 }));
 
 const App = () => {
   const styles = useStyles();
   const { user } = useUserStore();
   const route = usePathname();
-  const postsType = usePostStore((state) => state.type);
-  const { data } = useGetPosts(postsType);
 
   if (!user && isRouteAuthenticated(route)) {
-    return <Redirect href="/login" />;
+    return <Redirect href="/auth/login" />;
   }
 
   return (
-    <ScrollView>
-      {postsType &&
-        data &&
-        data.map((post) => <PostCard key={post.url} post={post} />)}
-
-      {postsType && !data && (
-        <View style={styles.loadingSpinner}>
-          <LoadingSpinner size="large" />
-        </View>
-      )}
-
-      {!postsType && (
-        <View style={styles.container}>
-          <Text style={styles.text}>Please select a type!</Text>
-        </View>
-      )}
-    </ScrollView>
+    <View style={styles.container}>
+      <Text h1 style={styles.title}>
+        Finsight
+      </Text>
+      <Text style={styles.text}>
+        Welcome to Finsight! You are currently logged in as{" "}
+        <Text style={styles.user}>{user?.email}</Text>.
+      </Text>
+    </View>
   );
 };
 

diff --git a/src/app/(app)/logout.tsx b/src/app/(app)/logout.tsx
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,15 +1,75 @@
+import { AntDesign } from "@expo/vector-icons";
 import Providers from "@providers/Providers";
-import { Slot, SplashScreen } from "expo-router";
+import { useUserStore } from "@stores/userStore";
+import { SplashScreen, Tabs } from "expo-router";
 import { useEffect } from "react";
 
 const RootLayout = () => {
+  const user = useUserStore((state) => state.user);
+
   useEffect(() => {
     SplashScreen.preventAutoHideAsync();
   }, []);
 
   return (
     <Providers>
-      <Slot />
+      <Tabs
+        screenOptions={{
+          unmountOnBlur: true,
+          tabBarStyle: {
+            backgroundColor: "#000",
+          },
+          headerShown: false,
+        }}
+      >
+        <Tabs.Screen
+          name="(app)"
+          options={{
+            title: "Home",
+            tabBarIcon: () => <AntDesign name="home" size={20} color="white" />,
+          }}
+        />
+        <Tabs.Screen
+          name="auth/login"
+          options={{
+            href: null,
+          }}
+        />
+        <Tabs.Screen
+          name="auth/register"
+          options={{
+            href: null,
+          }}
+        />
+        <Tabs.Screen
+          name="auth/logout"
+          options={{
+            title: "Logout",
+            tabBarIcon: () => (
+              <AntDesign name="logout" size={20} color="white" />
+            ),
+            href: user ? "/auth/logout" : null,
+          }}
+        />
+        <Tabs.Screen
+          name="posts/index"
+          options={{
+            title: "Posts",
+            tabBarIcon: () => (
+              <AntDesign name="paperclip" size={20} color="white" />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="questions/index"
+          options={{
+            title: "FAQ",
+            tabBarIcon: () => (
+              <AntDesign name="question" size={20} color="white" />
+            ),
+          }}
+        />
+      </Tabs>
     </Providers>
   );
 };

diff --git a/src/app/(app)/login.tsx → src/app/auth/login.tsx b/src/app/(app)/login.tsx → src/app/auth/login.tsx
@@ -18,6 +18,12 @@ const Login = () => {
     !/^[^@]+@[^@]+\.[^@]+$/g.test(email) ||
     password.length < 5;
 
+  const handleLogin = () => {
+    login(email, password);
+    setEmail("");
+    setPassword("");
+  };
+
   return (
     <LoginField
       mode="login"
@@ -26,7 +32,7 @@ const Login = () => {
       password={password}
       onPasswordChange={setPassword}
       disabled={isDisabled}
-      onButtonClick={() => login(email, password)}
+      onButtonClick={handleLogin}
       isLoading={loading ?? false}
       error={error}
     />

diff --git a/src/app/auth/logout.tsx b/src/app/auth/logout.tsx
@@ -0,0 +1,22 @@
+import { useLogoutUser } from "@auth/hooks";
+import LoadingSpinner from "@components/LoadingSpinner";
+import { useUserStore } from "@stores/userStore";
+import { Redirect } from "expo-router";
+import { useEffect } from "react";
+
+const Logout = () => {
+  const { logout } = useLogoutUser();
+  const user = useUserStore((state) => state.user);
+
+  useEffect(() => {
+    logout();
+  }, []);
+
+  if (!user) {
+    return <Redirect href="/auth/login" />;
+  }
+
+  return <LoadingSpinner size="large" />;
+};
+
+export default Logout;
diff --git a/src/app/(app)/register.tsx → src/app/auth/register.tsx b/src/app/(app)/register.tsx → src/app/auth/register.tsx
@@ -18,6 +18,12 @@ const Register = () => {
     !/^[^@]+@[^@]+\.[^@]+$/g.test(email) ||
     password.length < 5;
 
+  const handleRegister = () => {
+    register(email, password);
+    setEmail("");
+    setPassword("");
+  };
+
   return (
     <LoginField
       mode="register"
@@ -26,7 +32,7 @@ const Register = () => {
       password={password}
       onPasswordChange={setPassword}
       disabled={isDisabled}
-      onButtonClick={() => register(email, password)}
+      onButtonClick={handleRegister}
       isLoading={loading ?? false}
       error={error}
     />

diff --git a/src/app/posts/index.tsx b/src/app/posts/index.tsx
@@ -0,0 +1,59 @@
+import { useGetPosts } from "@api/hooks";
+import LoadingSpinner from "@components/LoadingSpinner";
+import PostCard from "@components/PostCard";
+import PostsHeader from "@components/PostsHeader";
+import { makeStyles } from "@rneui/themed";
+import { usePostStore } from "@stores/postStore";
+import { useUserStore } from "@stores/userStore";
+import { ScrollView, View, Text } from "react-native";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+    height: "100%",
+  },
+  postContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+  },
+  text: {
+    color: theme.colors.white,
+  },
+  loadingSpinner: {
+    marginTop: 20,
+  },
+}));
+
+const Posts = () => {
+  const styles = useStyles();
+  const postsType = usePostStore((state) => state.type);
+  const user = useUserStore((state) => state.user);
+  const { data } = useGetPosts(postsType);
+
+  return (
+    <View style={styles.container}>
+      <PostsHeader />
+      <ScrollView>
+        {postsType &&
+          data &&
+          data.map((post) => <PostCard key={post.url} post={post} />)}
+
+        {postsType && !data && (
+          <View style={styles.loadingSpinner}>
+            <LoadingSpinner size="large" />
+          </View>
+        )}
+
+        {!postsType && user && (
+          <View style={styles.postContainer}>
+            <Text style={styles.text}>Please select a type!</Text>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default Posts;