Merge pull request #1 from Delemangi/feat/notification-ui

Feat/notification UI

.gitignore

@@ -38,4 +38,4 @@ yarn-error.*
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli

.hintrc

@@ -5,4 +5,4 @@
   "hints": {
     "typescript-config/consistent-casing": "off"
   }
-}
+}

package.json

@@ -7,30 +7,32 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "format": "eslint --fix ."
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "1.21.0",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.1.10",
     "@rneui/base": "^0.0.0-edge.2",
     "@rneui/themed": "^0.0.0-edge.2",
-    "@tanstack/react-query": "^5.17.0",
-    "expo": "~50.0.5",
+    "@tanstack/react-query": "^5.20.1",
+    "expo": "~50.0.6",
     "expo-constants": "~15.4.5",
     "expo-font": "~11.10.2",
     "expo-linking": "~6.2.2",
-    "expo-router": "~3.4.6",
+    "expo-router": "~3.4.7",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
     "expo-web-browser": "~12.8.2",
     "firebase": "^10.7.1",
     "i18next": "^23.7.14",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^14.0.0",
-    "react-native": "0.73.2",
+    "react-i18next": "^14.0.5",
+    "react-native": "0.73.4",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
@@ -41,8 +43,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@tanstack/eslint-plugin-query": "^5.14.6",
-    "@types/react": "^18.2.52",
+    "@tanstack/eslint-plugin-query": "^5.20.1",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.55",
     "eslint": "^8.56.0",
     "eslint-config-universe": "^12.0.0",
     "prettier": "^3.1.1",

src/api/hooks.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getUrl, listUrl } from "./urls";
+import { Post } from "../types/Post";
+
+export const useGetPosts = (type: string | null) => {
+  return useQuery<Post[], Error>({
+    queryKey: ["posts", type],
+    enabled: Boolean(type),
+    queryFn: () =>
+      fetch(getUrl(type!))
+        .then((res) => res.json())
+        .then((data) => data.posts),
+    staleTime: 1000 * 60 * 5,
+  });
+};
+
+export const useGetPostTypes = () => {
+  return useQuery<string[], Error>({
+    queryKey: ["types"],
+    queryFn: () =>
+      fetch(listUrl())
+        .then((res) => res.json())
+        .then((data) => data.scrapers),
+    staleTime: Infinity,
+  });
+};

src/api/urls.ts

@@ -0,0 +1,6 @@
+import { config } from "@config/config";
+
+export const getUrl = (scraperType: string) =>
+  `${config.BASE_URL}/get/${scraperType}`;
+
+export const listUrl = () => `${config.BASE_URL}/list`;

src/app/(app)/_layout.tsx

@@ -1,7 +1,44 @@
+import AppHeader from "@components/AppHeader";
+import { makeStyles } from "@rneui/themed";
+import { usePostStore } from "@stores/postStore";
 import { Slot } from "expo-router";
+import { useEffect } from "react";
+import { View } from "react-native";
+
+import { useGetPostTypes } from "../../api/hooks";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  title: {
+    margin: "auto",
+  },
+}));
 
 const HomeLayout = () => {
-  return <Slot />;
+  const styles = useStyles();
+  const { data: typesData } = useGetPostTypes();
+  const setTypes = usePostStore((state) => state.setTypes);
+
+  useEffect(() => {
+    if (typesData) {
+      setTypes(typesData);
+    }
+  }, [typesData]);
+
+  return (
+    <>
+      <AppHeader />
+      <View style={styles.container}>
+        <Slot />
+      </View>
+    </>
+  );
 };
 
 export default HomeLayout;

src/app/(app)/index.tsx

@@ -1,23 +1,29 @@
+import { useGetPosts } from "@api/hooks";
+import { isRouteAuthenticated } from "@auth/routes";
+import { PostCard } from "@components/PostCard";
+import { usePostStore } from "@stores/postStore";
 import { useUserStore } from "@stores/userStore";
 import { usePathname } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import { View } from "react-native";
+import { ScrollView } from "react-native";
 
 import Login from "./login";
 
 const App = () => {
   const { user } = useUserStore();
   const route = usePathname();
+  const postsType = usePostStore((state) => state.type);
+  const { data } = useGetPosts(postsType);
 
-  if (!user && route !== "/login" && route !== "/register") {
+  if (!user && isRouteAuthenticated(route)) {
     return <Login />;
   }
 
   return (
-    <View>
+    <ScrollView>
       <StatusBar style="auto" />
-      Hello {user?.email}
-    </View>
+      {data?.map((post) => <PostCard key={post.url} post={post} />)}
+    </ScrollView>
   );
 };
 

src/app/(app)/login.tsx

@@ -1,7 +1,7 @@
-import LoginField from "@components/CredentialsForm";
-import Error from "@components/Error";
+import { useLoginUser } from "@auth/hooks";
+import ErrorScreen from "@components/ErrorScreen";
 import LoadingSpinner from "@components/LoadingSpinner";
-import { useLoginUser } from "@hooks/auth";
+import LoginField from "@components/LoginField";
 import { Redirect } from "expo-router";
 import { useState } from "react";
 
@@ -19,7 +19,7 @@ const Login = () => {
   }
 
   if (error) {
-    return <Error error={error.message} />;
+    return <ErrorScreen error={error.message} />;
   }
 
   return (

src/app/(app)/register.tsx

@@ -1,7 +1,7 @@
-import LoginField from "@components/CredentialsForm";
-import Error from "@components/Error";
+import { useRegisterUser } from "@auth/hooks";
+import ErrorScreen from "@components/ErrorScreen";
 import LoadingSpinner from "@components/LoadingSpinner";
-import { useRegisterUser } from "@hooks/auth";
+import LoginField from "@components/LoginField";
 import { Redirect } from "expo-router";
 import { useState } from "react";
 
@@ -19,7 +19,7 @@ const Register = () => {
   }
 
   if (error) {
-    return <Error error={error.message} />;
+    return <ErrorScreen error={error.message} />;
   }
 
   return (

src/auth/routes.ts

@@ -0,0 +1,5 @@
+const UNAUTHENTICATED_ROUTES = ["login", "register"];
+
+export const isRouteAuthenticated = (route: string) => {
+  return !UNAUTHENTICATED_ROUTES.includes(route);
+};

src/components/AppHeader.tsx

@@ -0,0 +1,55 @@
+import { Header, Text, makeStyles } from "@rneui/themed";
+import { usePostStore } from "@stores/postStore";
+import React from "react";
+import { ScrollView, TouchableOpacity } from "react-native";
+
+const useStyles = makeStyles((theme) => ({
+  headerContainer: {
+    backgroundColor: theme.colors.primary,
+    justifyContent: "space-around",
+    height: 100,
+  },
+  scrollView: {
+    flexGrow: 0,
+  },
+  option: {
+    paddingHorizontal: 10,
+  },
+  optionText: {
+    color: theme.colors.white,
+  },
+}));
+
+const AppHeader = () => {
+  const styles = useStyles();
+  const { setType, types } = usePostStore((state) => state);
+
+  const handlePostTypeSelect = (type: string) => {
+    setType(type);
+  };
+
+  return (
+    <Header
+      centerComponent={
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.scrollView}
+        >
+          {types.map((type, index) => (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handlePostTypeSelect(type)}
+              style={styles.option}
+            >
+              <Text style={styles.optionText}>{type.toUpperCase()}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      }
+      containerStyle={styles.headerContainer}
+    />
+  );
+};
+
+export default AppHeader;

src/components/Error.tsx → src/components/ErrorScreen.tsx

@@ -1,10 +1,6 @@
 import { makeStyles, Text } from "@rneui/themed";
 import { View } from "react-native";
 
-type Props = {
-  error: string;
-};
-
 const useStyles = makeStyles((theme) => ({
   container: {
     display: "flex",
@@ -19,15 +15,19 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Error = ({ error }: Props) => {
-  const classes = useStyles();
+type Props = {
+  error: string;
+};
+
+const ErrorScreen = ({ error }: Props) => {
+  const styles = useStyles();
 
   return (
-    <View style={classes.container}>
+    <View style={styles.container}>
       <Text h3>The application has crashed.</Text>
-      <Text style={classes.errorText}>{error}</Text>
+      <Text style={styles.errorText}>{error}</Text>
     </View>
   );
 };
 
-export default Error;
+export default ErrorScreen;