refactor user module

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { Stack } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen, useProfile, useProfileId } from 'app/modules/user';
 import Head from 'expo-router/head';
-import { useProfile, useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
   const [id] = useProfileId();
@@ -24,7 +23,7 @@ const Profile = () => {
           title: userRealName ? `${userRealName}'s Profile` : '',
         }}
       />
-      <ProfileContainer id={id} />
+      <ProfileScreen userId={id} />
     </>
   );
 };

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
-import Settings from 'app/screens/user/Settings';
+import { SettingsScreen } from 'app/modules/user';
 import Head from 'expo-router/head';
 
 export default function SettingsPage() {
@@ -21,7 +21,7 @@ export default function SettingsPage() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Settings />
+      <SettingsScreen />
     </>
   );
 }

apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen } from 'app/modules/user';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -21,7 +21,7 @@ export default function Profile() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <ProfileContainer />
+      <ProfileScreen />
     </>
   );
 }

apps/next/pages/profile/[id].tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
-import { useProfileId } from 'app/hooks/user';
+import { useProfileId } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 
 // export const runtime = 'experimental-edge'

apps/next/pages/profile/settings/index.tsx

@@ -1,12 +1,12 @@
-import Settings from 'app/screens/user/Settings';
+import { SettingsScreen } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 
 // export const runtime = 'experimental-edge'
 
 export default function SettingsPage() {
   return (
     <>
-      <Settings />
+      <SettingsScreen />
     </>
   );
 }

apps/tauri/src/routes/profile/$id.lazy.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
-import { useProfileId } from 'app/hooks/user';
+import { ProfileScreen, useProfileId } from 'app/modules/user';
 
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -13,7 +12,7 @@ export default function Profile() {
 
   return (
     <>
-      <ProfileContainer id={id} />
+      <ProfileScreen userId={id} />
     </>
   );
 }

apps/tauri/src/routes/profile/index.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/profile/')({
 export default function Profile() {
   return (
     <AuthWrapper>
-      <ProfileContainer />
+      <ProfileScreen />
     </AuthWrapper>
   );
 }

apps/tauri/src/routes/profile/settings/index.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Settings from 'app/screens/user/Settings';
+import { SettingsScreen } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/profile/settings/')({
 export default function SettingsPage() {
   return (
     <AuthWrapper>
-      <Settings />
+      <SettingsScreen />
     </AuthWrapper>
   );
 }

apps/vite/src/routes/profile/$id.lazy.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
-import { useProfileId } from 'app/hooks/user';
+import { ProfileScreen, useProfileId } from 'app/modules/user';
 
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -13,7 +12,7 @@ export default function Profile() {
 
   return (
     <>
-      <ProfileContainer id={id} />
+      <ProfileScreen userId={id} />
     </>
   );
 }

apps/vite/src/routes/profile/index.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/profile/')({
 export default function Profile() {
   return (
     <AuthWrapper>
-      <ProfileContainer />
+      <ProfileScreen />
     </AuthWrapper>
   );
 }

apps/vite/src/routes/profile/settings/index.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Settings from 'app/screens/user/Settings';
+import { SettingsScreen } from 'app/modules/user';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/profile/settings/')({
 export default function SettingsPage() {
   return (
     <AuthWrapper>
-      <Settings />
+      <SettingsScreen />
     </AuthWrapper>
   );
 }

packages/app/components/map/Map.native.tsx

@@ -39,7 +39,7 @@ import * as FileSystem from 'expo-file-system';
 import { DOMParser } from 'xmldom';
 import { MapProps } from './models';
 import { useUserQuery } from 'app/modules/auth';
-import { useUpdateUser } from 'app/hooks/user/useUpdateUser';
+import { useUpdateUser } from 'app/modules/user';
 
 interface GeoJsonProperties {
   name?: string;

packages/app/modules/auth/hooks/index.ts

@@ -5,3 +5,4 @@ export { useGoogleAuth } from './useGoogleAuth';
 export { useLogout } from './useLogout';
 export { useUserSetter } from './useUserSetter';
 export { usePasswordResetToken } from './usePasswordResetToken';
+export { useMatchesCurrentUser } from './useMatchesCurrentUser';

packages/app/components/user/UserDataCard.tsx → packages/app/modules/user/components/UserDataCard.tsx

@@ -10,7 +10,7 @@ import {
   RLink,
   RSkeleton,
 } from '@packrat/ui';
-import { truncateString } from '../../utils/truncateString';
+import { truncateString } from 'app/utils/truncateString';
 import { useEditPack } from 'app/modules/pack';
 import { Platform } from 'react-native';
 import { useEditTrips } from 'app/hooks/trips';
@@ -35,7 +35,7 @@ interface UserDataCardProps {
   isFavorite: boolean;
 }
 
-const UserDataCard = ({
+export const UserDataCard = ({
   type, // "pack" or "trip"
   destination,
   id,
@@ -257,5 +257,3 @@ const UserDataCard = ({
     </View>
   );
 };
-
-export default UserDataCard;

packages/app/components/user/UserDetailList.tsx → packages/app/modules/user/components/UserDetailList.tsx

@@ -1,12 +1,10 @@
 import React, { useRef, useMemo, useState } from 'react';
 import { View, FlatList, Platform } from 'react-native';
 import { FeedCard, FeedSearchFilter } from 'app/modules/feed';
-import { fuseSearch } from '../../utils/fuseSearch';
-import { BaseDialog as OriginalBaseDialog, BaseModal } from '@packrat/ui';
+import { fuseSearch } from 'app/utils/fuseSearch';
+import { BaseDialog, BaseModal } from '@packrat/ui';
 // import BottomSheet from '@gorhom/bottom-sheet';
 
-const BaseDialog: any = OriginalBaseDialog;
-
 interface DataItem {
   _id: string;
   type: string;
@@ -16,7 +14,7 @@ interface DataListProps {
   data: DataItem[];
 }
 
-const DataList = ({ data }: DataListProps) => {
+export const UserDataList = ({ data }: DataListProps) => {
   const [searchQuery, setSearchQuery] = useState('');
   const keys = ['name', 'items.name', 'items.category'];
   const options = {
@@ -107,5 +105,3 @@ const DataList = ({ data }: DataListProps) => {
     </>
   );
 };
-
-export default DataList;

packages/app/modules/user/components/index.ts

@@ -0,0 +1,2 @@
+export { UserDataCard } from './UserDataCard';
+export { UserDataList } from './UserDetailList';

packages/app/hooks/user/index.ts → packages/app/modules/user/hooks/index.ts

@@ -2,3 +2,5 @@ export { useGetUser } from './useGetUser';
 export { useProfile } from './useProfile';
 export { useProfileSettings } from './useProfileSettings';
 export { useProfileId } from './useProfileId';
+export { useDeleteProfile } from './useDeleteProfile';
+export { useUpdateUser } from './useUpdateUser';

packages/app/hooks/user/useDeleteProfile.ts → packages/app/modules/user/hooks/useDeleteProfile.ts

@@ -1,4 +1,4 @@
-import { queryTrpc } from '../../trpc';
+import { queryTrpc } from 'app/trpc';
 import { useAuthUser } from 'app/modules/auth';
 import { logoutAuthUser } from 'app/utils/userUtils';
 

packages/app/hooks/user/useGetUser.ts → packages/app/modules/user/hooks/useGetUser.ts

@@ -1,4 +1,4 @@
-import { queryTrpc } from '../../trpc';
+import { queryTrpc } from 'app/trpc';
 
 export const useGetUser = (userId: string) => {
   // If userId is not provided, don’t run the query.

packages/app/hooks/user/useProfile.ts → packages/app/modules/user/hooks/useProfile.ts

@@ -1,8 +1,7 @@
-import { useFetchUserFavorites } from '../favorites';
+import { useFetchUserFavorites } from 'app/hooks/favorites';
 import { useUserPacks } from 'app/modules/pack';
-import { useUserTrips } from '../singletrips';
-import { useMatchesCurrentUser } from '../useMatchesCurrentUser';
-import { useAuthUser } from 'app/modules/auth';
+import { useUserTrips } from 'app/hooks/singletrips';
+import { useAuthUser, useMatchesCurrentUser } from 'app/modules/auth';
 import { useGetUser } from './useGetUser';
 
 export const useProfile = (id = null) => {

packages/app/modules/user/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './screens';

packages/app/modules/user/screens/ProfileScreen.tsx

@@ -0,0 +1,8 @@
+import { ProfileContainer } from '../widgets';
+
+interface ProfileScreenProps {
+  userId?: string;
+}
+export const ProfileScreen = ({ userId }: ProfileScreenProps) => {
+  return <ProfileContainer id={userId} />;
+};

packages/app/screens/user/Settings.tsx → packages/app/modules/user/screens/SettingsScreen.tsx

@@ -17,7 +17,7 @@ import {
   RSpinner,
 } from '@packrat/ui';
 import Avatar from 'app/components/Avatar/Avatar';
-import { useProfileSettings } from 'app/hooks/user';
+import { useProfileSettings, useDeleteProfile } from '../hooks';
 import useTheme from 'app/hooks/useTheme';
 import {
   userSettingsSchema,
@@ -26,7 +26,6 @@ import {
 } from '@packrat/validations';
 import { Platform, View } from 'react-native';
 import { useNavigate } from 'app/hooks/navigation';
-import { useDeleteProfile } from '../../hooks/user/useDeleteProfile';
 
 const weatherOptions = ['celsius', 'fahrenheit'].map((key) => ({
   label: key,
@@ -38,7 +37,7 @@ const weightOptions = ['lb', 'oz', 'kg', 'g'].map((key) => ({
   value: key,
 }));
 
-export default function Settings() {
+export function SettingsScreen() {
   const { user, handleEditUser, handleUpdatePassword } = useProfileSettings();
   const { deleteProfile, isLoading } = useDeleteProfile();
 

packages/app/modules/user/screens/index.ts

@@ -0,0 +1,2 @@
+export { ProfileScreen } from './ProfileScreen';
+export { SettingsScreen } from './SettingsScreen';

packages/app/screens/user/ProfileContainer.tsx → packages/app/modules/user/widgets/ProfileContainer.tsx

@@ -7,14 +7,14 @@ import {
   RSkeleton,
 } from '@packrat/ui';
 import { ScrollView } from 'react-native-gesture-handler';
-import UserDataContainer from '../../components/user/UserDataContainer';
-import useTheme from '../../hooks/useTheme';
+import { UserDataContainer } from './UserDataContainer';
+import useTheme from '../../../hooks/useTheme';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 // import useGetPacks from "../../hooks/useGetPacks";
 import { useRouter } from 'app/hooks/router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import Avatar from '../../components/Avatar/Avatar';
-import { useProfile } from 'app/hooks/user';
+import Avatar from '../../../components/Avatar/Avatar';
+import { useProfile } from '../hooks';
 import Layout from 'app/components/layout/Layout';
 
 const RText: any = OriginalRText;
@@ -186,7 +186,7 @@ const SkeletonUserDataCard = () => {
   );
 };
 
-export default function ProfileContainer({ id = null }) {
+export function ProfileContainer({ id = null }) {
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
   const {

packages/app/components/user/UserDataContainer.tsx → packages/app/modules/user/widgets/UserDataContainer.tsx

@@ -1,14 +1,13 @@
 import { RLink } from '@packrat/ui';
 import { RStack, RText, RButton, RSkeleton } from '@packrat/ui';
 import { VirtualizedList } from 'react-native';
-import UserDataCard from './UserDataCard';
+import { UserDataCard, UserDataList } from '../components';
 import React, { useEffect, useState } from 'react';
-import LargeCard from '../card/LargeCard';
-import useTheme from '../../hooks/useTheme';
+import LargeCard from 'app/components/card/LargeCard';
+import useTheme from 'app/hooks/useTheme';
 import { hexToRGBA } from 'app/utils/colorFunctions';
 import { View } from 'react-native';
 import { useAuthUser } from 'app/modules/auth';
-import DataList from './UserDetailList';
 import Layout from 'app/components/layout/Layout';
 import { SearchProvider } from 'app/modules/feed';
 
@@ -34,7 +33,7 @@ interface UserDataContainerProps {
   SkeletonComponent?: React.ReactElement;
 }
 
-export default function UserDataContainer({
+export function UserDataContainer({
   data = [],
   type,
   userId,
@@ -144,7 +143,7 @@ export default function UserDataContainer({
                 />
 
                 <SearchProvider>
-                  <DataList data={data} />
+                  <UserDataList data={data} />
                 </SearchProvider>
               </>
             ) : currentUser?.id === userId ? (

packages/app/modules/user/widgets/index.ts

@@ -0,0 +1,2 @@
+export { UserDataContainer } from './UserDataContainer';
+export { ProfileContainer } from './ProfileContainer';

packages/ui/src/Bento/elements/list/ChatList.tsx

@@ -13,7 +13,7 @@ import {
 } from 'tamagui';
 
 import useTheme from 'app/hooks/useTheme';
-import { useProfileSettings } from 'app/hooks/user';
+import { useProfileSettings } from 'app/modules/user';
 
 const List = styled(FlatList<Message>, {
   backgroundColor: '$background',