feat: write and listen posts with pagination

.eslintrc.js

@@ -2,11 +2,28 @@ const path = require('path');
 
 module.exports = {
   root: true,
-  extends: [
-    '@dooboo/eslint-config-react-native',
-  ],
+  extends: ['expo', 'prettier', 'plugin:i18n-json/recommended'],
   rules: {
     'eslint-comments/no-unlimited-disable': 0,
     'eslint-comments/no-unused-disable': 0,
+    'i18n-json/identical-keys': [
+      2,
+      {
+        filePath: path.resolve('./assets/langs/ko.json'),
+      },
+    ],
+    'i18n-json/sorted-keys': [
+      2,
+      {
+        order: 'asc',
+        indentSpaces: 2,
+      },
+    ],
+    'i18n-json/valid-message-syntax': [
+      2,
+      {
+        syntax: path.resolve('./custom-syntax-validator.ts'),
+      },
+    ],
   },
 };

.vscode/settings.json

@@ -41,6 +41,7 @@
     "CROSSPLATFORMS",
     "dooboo",
     "lotties",
+    "Onesignal",
     "Pressable",
     "Pretendard"
   ]

app.config.ts

@@ -22,7 +22,6 @@ if (process.env.STAGE) {
 }
 
 const DEEP_LINK_URL = '[firebaseAppId].web.app';
-
 const buildNumber = 1;
 
 export default ({config}: ConfigContext): ExpoConfig => ({

app/(app)/(tabs)/_layout.tsx

@@ -0,0 +1,70 @@
+import {Pressable, View} from 'react-native';
+import {Icon, useDooboo} from 'dooboo-ui';
+import {Link, Redirect, Tabs, useRouter} from 'expo-router';
+import {useRecoilValue} from 'recoil';
+
+import {authRecoilState} from '../../../src/recoil/atoms';
+import {t} from '../../../src/STRINGS';
+
+function SettingsMenu(): JSX.Element {
+  const {theme} = useDooboo();
+  const {push} = useRouter();
+
+  return (
+    <Link asChild href="/settings">
+      <Pressable onPress={() => push('settings')}>
+        {({pressed}) => (
+          <Icon
+            color={theme.text.basic}
+            name="List"
+            size={22}
+            style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
+          />
+        )}
+      </Pressable>
+    </Link>
+  );
+}
+
+export default function TabLayout(): JSX.Element {
+  const {theme} = useDooboo();
+  const {authId} = useRecoilValue(authRecoilState);
+
+  if (!authId) {
+    return <Redirect href="sign-in" />;
+  }
+
+  if (!authId) {
+    return <Redirect href="/sign-in" />;
+  }
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: theme.role.primary,
+        headerStyle: {backgroundColor: theme.bg.basic},
+        headerTitleStyle: {color: theme.text.basic},
+        tabBarStyle: {backgroundColor: theme.bg.basic},
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: t('common.post'),
+          tabBarIcon: ({color}) => (
+            <Icon color={color} name="Article" size={24} />
+          ),
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: t('common.profile'),
+          tabBarIcon: ({color}) => <Icon color={color} name="User" size={24} />,
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+    </Tabs>
+  );
+}

app/(app)/(tabs)/index.tsx

@@ -0,0 +1,164 @@
+import styled, {css} from '@emotion/native';
+import {Fab, LoadingIndicator, Typography} from 'dooboo-ui';
+import StatusBarBrightness from 'dooboo-ui/uis/StatusbarBrightness';
+import {t} from '../../../src/STRINGS';
+import {FlashList} from '@shopify/flash-list';
+import {useRouter} from 'expo-router';
+import {Post, User} from '../../../src/types';
+import PostListItem from '../../../src/components/uis/PostListItem';
+import {useEffect, useState} from 'react';
+import {supabase} from '../../../src/supabase';
+import {PAGE_SIZE} from '../../../src/utils/constants';
+
+const Container = styled.View`
+  flex: 1;
+  align-self: stretch;
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+type PostWithUser = Post & {user: User};
+
+const fetchPosts = async (
+  page: number,
+  pageSize: number,
+): Promise<PostWithUser[]> => {
+  const from = (page - 1) * pageSize;
+  const to = from + pageSize - 1;
+
+  const {data, error} = await supabase
+    .from('posts')
+    .select(
+      `
+      *,
+      user:user_id (
+        *
+      )
+    `,
+    )
+    .order('created_at', {ascending: false})
+    .range(from, to);
+
+  if (error) {
+    throw new Error(error.message);
+  }
+
+  return data as unknown as PostWithUser[];
+};
+
+const fetchPostById = async (id: string): Promise<PostWithUser | null> => {
+  const {data, error} = await supabase
+    .from('posts')
+    .select(
+      `
+      *,
+      user:user_id (
+        *
+      )
+    `,
+    )
+    .eq('id', id)
+    .single();
+
+  if (error) {
+    if (__DEV__) console.error('Error fetching post by ID:', error);
+    return null;
+  }
+
+  return data as unknown as PostWithUser;
+};
+
+export default function Posts(): JSX.Element {
+  const {push} = useRouter();
+  const [posts, setPosts] = useState<PostWithUser[]>([]);
+  const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const loadPosts = async (page: number) => {
+    setLoading(true);
+    try {
+      const newPosts = await fetchPosts(page, PAGE_SIZE);
+      setPosts((prevPosts) => [...prevPosts, ...newPosts]);
+      setPage(page);
+    } catch (error) {
+      if (__DEV__) console.error('Failed to load posts:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPosts(page);
+  }, []);
+
+  useEffect(() => {
+    const channel = supabase
+      .channel('schema-db-changes')
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'posts',
+        },
+        async (payload) => {
+          const newPost = await fetchPostById(payload.new.id);
+          if (newPost) {
+            setPosts((currentPosts) => [newPost, ...currentPosts]);
+          }
+        },
+      )
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'posts',
+        },
+        async (payload) => {
+          const updatedPost = await fetchPostById(payload.new.id);
+          if (updatedPost) {
+            setPosts((currentPosts) =>
+              currentPosts.map((post) =>
+                post.id === updatedPost.id ? updatedPost : post,
+              ),
+            );
+          }
+        },
+      )
+      .subscribe();
+
+    return () => {
+      channel.unsubscribe();
+    };
+  }, []);
+
+  const loadMore = () => {
+    if (!loading) {
+      loadPosts(page + 1);
+    }
+  };
+
+  return (
+    <Container>
+      <StatusBarBrightness />
+      <FlashList
+        data={posts}
+        renderItem={({item}) => <PostListItem post={item} onPress={() => {}} />}
+        estimatedItemSize={208}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.5}
+        ListFooterComponent={loading ? <LoadingIndicator /> : null}
+      />
+      <Fab
+        animationDuration={300}
+        fabIcon="Plus"
+        onPressFab={() => {
+          push('/post/write');
+        }}
+        style={css`
+          bottom: 16px;
+        `}
+      />
+    </Container>
+  );
+}

app/(app)/(tabs)/profile.tsx

@@ -0,0 +1,20 @@
+import {useCallback, useState} from 'react';
+import {View} from 'react-native';
+import {Typography} from 'dooboo-ui';
+import {Stack} from 'expo-router';
+import {useRecoilValue} from 'recoil';
+
+import {authRecoilState} from '../../../src/recoil/atoms';
+import {t} from '../../../src/STRINGS';
+import {supabase} from '../../../src/supabase';
+
+export default function Profile(): JSX.Element {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <View>
+      <Stack.Screen options={{title: t('common.profile')}} />
+      <Typography.Heading3>{t('common.profile')}</Typography.Heading3>
+    </View>
+  );
+}