Merge branch 'main' into feature/chat

src/api/snaps/use-add-snap.ts

@@ -33,4 +33,4 @@ export const useAddReply = createMutation<Response, Variables, AxiosError>({
       console.log('response.data by useAddReply', response.data);
       return response.data;
     }),
-});
+});

src/api/snaps/use-snaps.ts

@@ -6,7 +6,10 @@ import type { Snap } from './types';
 
 type Response = Snap[];
 type Variables = { user_id: string | undefined }; // as react-query-kit is strongly typed, we need to specify the type of the variables as void in case we don't need them
-type ReplyVariable = { snap_id: string | undefined, user_id: string | undefined };
+type ReplyVariable = {
+  snap_id: string | undefined;
+  user_id: string | undefined;
+};
 
 export const useSnaps = createQuery<Response, Variables, AxiosError>({
   primaryKey: '/api/feed', // we recommend using  endpoint base url as primaryKey
@@ -27,12 +30,29 @@ export const useSnaps = createQuery<Response, Variables, AxiosError>({
   },
 });
 
+export const getSnapsFrom = createQuery<Response, Variables, AxiosError>({
+  primaryKey: '/api/feed', // we recommend using  endpoint base url as primaryKey
+  queryFn: async ({ queryKey: [primaryKey, variables] }) => {
+    try {
+      // in case if variables is needed, we can use destructuring to get it from queryKey array like this: ({ queryKey: [primaryKey, variables] })
+      // primaryKey is 'posts' in this case
+      const limit = 100;
+      const offset = 0;
+      const response = await client.get(
+        `${primaryKey}/${variables.user_id}/snaps?limit=${limit}&offset=${offset}`
+      );
+      console.log('response.data.snaps', response.data.snaps); // response.data is an array of posts
+      return response.data.snaps;
+    } catch (e) {
+      console.log('error', e);
+    }
+  },
+});
 
 export const userReplySnaps = createQuery<Response, ReplyVariable, AxiosError>({
   primaryKey: '/api/feed', // we recommend using  endpoint base url as primaryKey
   queryFn: async ({ queryKey: [primaryKey, replyVariables] }) => {
     try {
-
       const response = await client.get(
         `${primaryKey}/get_replies?snap_id=${replyVariables.snap_id}&user_id=${replyVariables.user_id}`
       );

src/core/auth/index.tsx

@@ -36,7 +36,7 @@ const _useAuth = create<AuthState>((set, get) => ({
   user: undefined,
   signIn: async (token, userId) => {
     const response = await fetch(
-      `https://api-identity-socializer-luiscusihuaman.cloud.okteto.net/api/auth/users/${userId}`
+      `https://api-identity-socializer-luiscusihuaman.cloud.okteto.net/api/auth/${userId}/users/${userId}`
     );
     const user: UserType = await response.json();
     await setUser(user); // store user and user in phone storage
@@ -78,6 +78,7 @@ const _useAuth = create<AuthState>((set, get) => ({
 
     if (response.status !== 200) {
       console.log('error updating user, status code:', response.status);
+      console.log(user);
       return;
     }
     await setUser(user); // store user and user in phone storage

src/core/auth/utils.tsx

@@ -19,6 +19,8 @@ export type UserType = {
   phone_number: null | string;
   profile_photo_id: null | string;
   username: null | string;
+  ubication: null | string;
+  is_followed?: boolean;
 };
 
 export const getToken = () => getItem<TokenType>(TOKEN);

src/navigation/feed-navigator.tsx

@@ -2,10 +2,10 @@ import { useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 
+import type { Snap as SnapType } from '@/api';
 import { AddSnap, Feed, Snap } from '@/screens';
 import { Pressable, Text } from '@/ui';
-import { UserType } from '@/core/auth/utils';
-import type { Snap as SnapType } from '@/api';
+
 import { GoToLogout } from './auth-navigator';
 
 export type FeedStackParamList = {

src/navigation/root-navigator.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 
 import { useAuth } from '@/core';
 
-import { AuthNavigator, GoToLogout } from './auth-navigator';
+import { AuthNavigator } from './auth-navigator';
 import { NavigationContainer } from './navigation-container';
 import { SignInComplete } from './signin-complete';
 import { TabNavigator } from './tab-navigator';

src/navigation/signin-complete.tsx

@@ -22,6 +22,7 @@ const schema = z.object({
     .min(3, 'Username must be at least 4 characters')
     .max(20, 'Username cannot exceed 20 characters'),
   phone_number: z.string().regex(/^\d{10}$/, 'Invalid phone number format'), // Assuming 10-digit phone number
+  ubication: z.string().max(100, 'Ubication cannot exceed 100 characters'),
   bio_msg: z.string().max(500, 'Bio Message cannot exceed 500 characters'),
   profile_photo_id: z
     .string()
@@ -91,6 +92,13 @@ export const FormForSignInComplete = ({
           keyboardType="numeric"
         />
 
+        <ControlledInput
+          testID="ubication-input"
+          control={control}
+          name="ubication"
+          label="Ubication"
+        />
+
         <ControlledInput
           testID="bio-input"
           control={control}

src/navigation/tab-data.ts

@@ -1,9 +1,14 @@
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { faFeed, faMessage, faPowerOff, faSearch } from '@fortawesome/free-solid-svg-icons';
+import {
+  faFeed,
+  faMessage,
+  faPowerOff,
+  faSearch,
+} from '@fortawesome/free-solid-svg-icons';
 
-import { Search } from '@/screens';
-import { ProfileNavigator } from '@/screens/profile/profile-navigator';
 import { ChatNavigator } from '@/screens/chat/chat-navigator';
+import { ProfileNavigator } from '@/screens/profile/profile-navigator';
+import { SearchNavigator } from '@/screens/search/search-navigator';
 
 import { FeedNavigator } from './feed-navigator';
 
@@ -32,21 +37,21 @@ export const tabs: TabType[] = [
     icon: faFeed,
   },
   {
-    name: 'Search',
-    component: Search, // React Search component screen
+    name: 'SearchNavigator',
+    component: SearchNavigator, // React Search component screen
     label: 'Search',
     icon: faSearch,
   },
   {
     name: 'ChatNavigator',
     component: ChatNavigator, // React Chat component screen
-    label: 'ChatNavigator',
+    label: 'Chat',
     icon: faMessage,
   },
   {
     name: 'ProfileNavigator',
     component: ProfileNavigator, // React Profile component screen
-    label: 'ProfileNavigator',
+    label: 'Profile',
     icon: faPowerOff,
-  }
+  },
 ];

src/navigation/types.tsx

@@ -1,14 +1,20 @@
 import type { RouteProp as NRouteProp } from '@react-navigation/native';
 
 import type { ChatStackParamList } from '@/screens/chat/chat-navigator';
+import type { SearchStackParamList } from '@/screens/search/search-navigator';
+import type { UserStackParamList } from '@/screens/users/user-navigate';
 
+import type { ProfileStackParamList } from '../screens/profile/profile-navigator';
 import type { AuthStackParamList } from './auth-navigator';
 import type { FeedStackParamList } from './feed-navigator';
 
 // TODO: change, this must be dynamic
 export type RootStackParamList = AuthStackParamList &
   FeedStackParamList &
-  ChatStackParamList; //  & FooStackParamList & BarStackParamList
+  ChatStackParamList &
+  ProfileStackParamList &
+  UserStackParamList &
+  SearchStackParamList; //  & FooStackParamList & BarStackParamList
 // very important to type check useNavigation hook
 declare global {
   namespace ReactNavigation {

src/screens/feed/add-snap.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Compose } from './compose';
 
 import { getUserState } from '@/core';
 import { View } from '@/ui';
 
+import { Compose } from './compose';
+
 export const AddSnap = () => {
   const userData = getUserState();
   return (
     <View>
-      <Compose user={userData}></Compose>
+      <Compose user={userData} />
     </View>
   );
 };

src/screens/feed/card.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type { AxiosInstance } from 'axios';
+import React, { useState } from 'react';
 
 import type { Snap } from '@/api';
 import { Image, Pressable, Text, TouchableOpacity, View } from '@/ui';
@@ -7,8 +8,6 @@ import CommentButton from './comment-button';
 import HeartButton from './heart-button';
 import ResnapButton from './re-snap-button';
 import ShareButton from './share-button';
-import axios, { AxiosInstance } from 'axios';
-import { UserType } from '@/core/auth/utils';
 
 type Props = {
   snap: Snap;

src/screens/feed/comment-component.tsx

@@ -1,12 +1,13 @@
-import { showErrorMessage, Button, ControlledInput, View } from '@/ui';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useAddReply } from '@/api';
 import { showMessage } from 'react-native-flash-message';
-import { Snap } from '@/api';
 import { z } from 'zod';
+
+import type { Snap } from '@/api';
+import { useAddReply } from '@/api';
 import { getUserState } from '@/core';
-import { useState } from 'react';
+import { Button, ControlledInput, showErrorMessage, View } from '@/ui';
 
 const schema = z.object({
   content: z.string().max(180),
@@ -67,7 +68,7 @@ export const CommentInput = ({ snap }: { snap: Snap }) => {
         >
           <Button
             label="Publish"
-            className="inline rounded-full text-center bg-blue-300 px-4 py-3 font-bold text-white"
+            className="inline rounded-full bg-blue-500 px-4 py-3 text-center font-bold text-white"
             onPress={handleSubmit(onSubmit)}
             testID="add-post-button"
           />

src/screens/feed/comment-list.tsx

@@ -1,11 +1,14 @@
-import { FocusAwareStatusBar, View, Text, EmptyList } from '@/ui';
-import { Snap, userReplySnaps } from '@/api';
+import { useNavigation } from '@react-navigation/native';
+import type { AxiosInstance } from 'axios';
 import React, { useState } from 'react';
 import { FlatList, RefreshControl } from 'react-native';
-import { AxiosInstance } from 'axios';
-import { useNavigation } from '@react-navigation/native';
-import { Card } from './card';
+
+import type { Snap } from '@/api';
+import { userReplySnaps } from '@/api';
 import { getUserState } from '@/core';
+import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
+
+import { Card } from './card';
 
 const INCREMENT_RENDER = 10;
 const INITIAL_RENDER = 20;

src/screens/feed/compose.tsx

@@ -1,24 +1,22 @@
 import {
   faCalendarAlt,
-  faGlobe,
   faImage,
   faPollH,
   faSmile,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import React, { useState } from 'react';
-
-import { Image, Input, Text, TouchableOpacity, View } from '@/ui';
-import { UserType } from '@/core/auth/utils';
-
 import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { showMessage } from 'react-native-flash-message';
 import { z } from 'zod';
 
 import { useAddSnap } from '@/api';
 import { getUserState } from '@/core';
+import type { UserType } from '@/core/auth/utils';
+import { Image, Text, TouchableOpacity, View } from '@/ui';
 import { Button, ControlledInput, showErrorMessage } from '@/ui';
+
 import DropdownMenu from './snap-visibility-menu';
 
 const schema = z.object({
@@ -117,7 +115,7 @@ export const Compose = ({ user }: { user: UserType | undefined }) => {
           <View>
             <Button
               label="Publish"
-              className="inline rounded-full bg-blue-300 px-4 py-3 font-bold text-white"
+              className="inline rounded-full bg-blue-500 px-4 py-3 font-bold text-white"
               loading={isLoading}
               onPress={handleSubmit(onSubmit)}
               testID="add-post-button"

src/screens/feed/list.tsx

@@ -1,14 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import React, { useState } from 'react';
 import { FlatList, RefreshControl } from 'react-native'; // Import FlatList
+
 import type { Snap } from '@/api';
 import { useSnaps } from '@/api';
 import { getUserState } from '@/core';
 import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
-import axios from 'axios';
 
 import { Card } from './card';
-import { set } from 'zod';
 
 const INCREMENT_RENDER = 10;
 const INITIAL_RENDER = 20;

src/screens/feed/snap-view.tsx

@@ -1,8 +1,9 @@
-import { Snap } from '@/api';
-import { UserType } from '@/core/auth/utils';
-import { Image, Input, Text, TouchableOpacity, View } from '@/ui';
-import { Card } from '../feed/card';
 import axios from 'axios';
+
+import type { Snap } from '@/api';
+import { View } from '@/ui';
+
+import { Card } from '../feed/card';
 import { CommentInput } from './comment-component';
 import { Comments } from './comment-list';
 

src/screens/feed/snap-visibility-menu.tsx

@@ -1,8 +1,7 @@
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
 
 interface DropdownMenuProps {
   replyOption: string;

src/screens/feed/snap.tsx

@@ -1,9 +1,9 @@
 import { useRoute } from '@react-navigation/native';
 import * as React from 'react';
 
-import { useSnap } from '@/api';
 import type { RouteProp } from '@/navigation/types';
-import { ActivityIndicator, FocusAwareStatusBar, Text, View } from '@/ui';
+import { FocusAwareStatusBar, View } from '@/ui';
+
 import { SnapView } from './snap-view';
 
 export const Snap = () => {
@@ -14,7 +14,7 @@ export const Snap = () => {
   return (
     <View className="flex-1 ">
       <FocusAwareStatusBar />
-      <SnapView snap={data}></SnapView>
+      <SnapView snap={data} />
     </View>
   );
 };

src/screens/index.tsx

@@ -1,5 +1,5 @@
 export * from './chat';
 export * from './feed';
 export * from './login';
-export * from './search';
 export * from './profile';
+export * from './search';

src/screens/profile/interaction-view.tsx

@@ -0,0 +1,18 @@
+import { useRoute } from '@react-navigation/native';
+import { View } from 'react-native';
+
+import type { UserType } from '@/core/auth/utils';
+
+import UserList from '../users/user-list';
+
+const InteractionScreen = () => {
+  const users: UserType[] = useRoute().params?.users;
+
+  return (
+    <View>
+      <UserList users={users} />
+    </View>
+  );
+};
+
+export default InteractionScreen;