profile scren fixes

andrew-bierman · Dec 18, 2024 · d173b04 · d173b04
1 parent 64c21c5
commit d173b04
Show file tree

Hide file tree

Showing 21 changed files with 210 additions and 112 deletions.
diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
@@ -5,6 +5,7 @@ import {
   FormSelect as OriginalFormSelect,
   YStack,
   SubmitButton,
+  FormSwitch,
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
 import { useAddTrip, useEditTrips } from 'app/hooks/trips';
@@ -27,11 +28,6 @@ interface TripFormProps {
   tripId?: string;
 }
 
-const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
-  label: key,
-  value: String(index),
-}));
-
 export const TripForm = ({
   tripStore,
   dateRange,
@@ -63,7 +59,7 @@ export const TripForm = ({
       defaultValues={{
         name: initialState?.name,
         description: initialState?.description,
-        is_public: initialState?.is_public ? '1' : '0',
+        is_public: initialState?.is_public,
         activity: initialState?.activity || ActivityOptions[0].value,
       }}
     >
@@ -78,13 +74,7 @@ export const TripForm = ({
           fullWidth
           name="activity"
         />
-        <FormSelect
-          options={isPublicOptions}
-          label="Access"
-          placeholder="Is Public"
-          fullWidth
-          name="is_public"
-        />
+        <FormSwitch labelLeft="Visible For Everyone" name="is_public" />
         <SubmitButton disabled={!isValid} onSubmit={handleCreateTrip}>
           Save Trip
         </SubmitButton>

diff --git a/packages/app/hooks/trips/useSetTripVisibility.ts b/packages/app/hooks/trips/useSetTripVisibility.ts
@@ -0,0 +1,26 @@
+import { queryTrpc } from '../../trpc';
+
+export const useSetTripVisibility = () => {
+  const utils = queryTrpc.useUtils();
+  const mutation = queryTrpc.setTripVisibility.useMutation();
+
+  const setTripVisibility = (
+    updatedTrip,
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
+    mutation.mutate(updatedTrip, {
+      onSuccess: () => {
+        utils.getTrips.invalidate();
+        utils.getUserTripsFeed.invalidate();
+        utils.getSingleTrip.invalidate();
+        utils.getUserTrips.invalidate();
+        options?.onSuccess?.(utils);
+      },
+    });
+  };
+
+  return {
+    setTripVisibility,
+    ...mutation,
+  };
+};
diff --git a/packages/app/modules/feed/hooks/useFetchUserFavorites.ts b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
@@ -12,8 +12,19 @@ import {
 
 export const useFetchUserFavorites = (
   userId: string,
-  { queryEnabled = true, isPreview = false, searchTerm = '', isPublic } = {},
+  options: {
+    queryEnabled: boolean;
+    isPreview: boolean;
+    searchTerm: string;
+    isPublic: boolean;
+  },
 ) => {
+  const {
+    queryEnabled = true,
+    isPreview = false,
+    searchTerm = '',
+    isPublic,
+  } = options || {};
   const enabled = !!userId && queryEnabled;
   const [pagination, setPagination] = useState<PaginationParams>(
     getPaginationInitialParams(),
@@ -68,13 +79,15 @@ export const useFetchUserFavoritesWithPreview = (
 ): FetchUserFavoritesReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } =
-    useFetchUserFavorites(userId, { isPreview: true, isPublic });
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useFetchUserFavorites(userId, { isPreview: true, isPublic });
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
-    totalCount,
     fetchPrevPage,
     fetchNextPage,
     totalPages,
@@ -84,6 +97,7 @@ export const useFetchUserFavoritesWithPreview = (
   } = useFetchUserFavorites(userId, {
     queryEnabled: isAllQueryEnabled,
     searchTerm,
+    isPublic,
   });
 
   return {

diff --git a/packages/app/modules/pack/hooks/useEditPack.ts b/packages/app/modules/pack/hooks/useEditPack.ts
@@ -12,6 +12,7 @@ export const useEditPack = () => {
     mutation.mutate(updatedPack, {
       onSuccess: () => {
         utils.getPacks.invalidate();
+        utils.getUserPacksFeed.invalidate();
         options?.onSuccess?.(utils);
       },
     });

diff --git a/packages/app/modules/pack/hooks/useUserPacks.ts b/packages/app/modules/pack/hooks/useUserPacks.ts
@@ -97,19 +97,17 @@ export const useUserPacksWithPreview = (
 ): FetchUserPacksPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } = useUserPacks(
-    userId,
-    { isPreview: true, isPublic },
-    'Most Recent',
-    true,
-  );
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useUserPacks(userId, { isPreview: true, isPublic }, 'Most Recent', true);
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
     fetchPrevPage,
     fetchNextPage,
-    totalCount,
     hasPrevPage,
     hasNextPage,
     currentPage,

diff --git a/packages/app/modules/pack/useSetPackVisibility.ts b/packages/app/modules/pack/useSetPackVisibility.ts
@@ -0,0 +1,25 @@
+import { queryTrpc } from '../../trpc';
+
+export const useSetPackVisibility = () => {
+  const utils = queryTrpc.useUtils();
+  const mutation = queryTrpc.editPack.useMutation();
+
+  const setPackVisibility = (
+    updatePack: { id: string; is_public: boolean; name: string },
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
+    mutation.mutate(updatePack, {
+      onSuccess: () => {
+        utils.getUserFavorites.invalidate();
+        utils.getUserPacksFeed.invalidate();
+        utils.getPublicFeed.invalidate();
+        options?.onSuccess?.(utils);
+      },
+    });
+  };
+
+  return {
+    setPackVisibility,
+    ...mutation,
+  };
+};
diff --git a/packages/app/modules/trip/hooks/useUserTrips.ts b/packages/app/modules/trip/hooks/useUserTrips.ts
@@ -82,16 +82,15 @@ export const useUserTripsWithPreview = (
 ): FetchUserTripsPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } = useUserTrips(
-    userId,
-    { isPublic, isPreview: true, searchTerm },
-    true,
-  );
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useUserTrips(userId, { isPublic, isPreview: true, searchTerm }, true);
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
-    totalCount,
     fetchPrevPage,
     fetchNextPage,
     currentPage,

diff --git a/packages/app/modules/trip/utils.ts b/packages/app/modules/trip/utils.ts
@@ -0,0 +1,5 @@
+import moment from 'moment';
+
+export const formatTripDate = (date: string) => {
+  return moment(date, 'MM/DD/YYYY');
+};
diff --git a/packages/app/modules/user/components/UserDataCard.tsx b/packages/app/modules/user/components/UserDataCard.tsx
@@ -19,6 +19,7 @@ const cardComponentsByType = {
 
 interface UserDataCardProps {
   feedType: UserDataResource;
+  isAuthUserProfile?: boolean;
   cardType: CardType;
   item: UserData;
 }
@@ -27,6 +28,7 @@ export const UserDataCard: FC<UserDataCardProps> = ({
   item,
   cardType,
   feedType,
+  isAuthUserProfile,
 }) => {
   const { addFavorite } = useAddFavorite();
   const user = useAuthUser();
@@ -56,6 +58,7 @@ export const UserDataCard: FC<UserDataCardProps> = ({
       {...cardProps}
       cardType={cardType}
       toggleFavorite={handleAddToFavorite}
+      isAuthUserProfile={isAuthUserProfile}
     />
   );
 };
diff --git a/packages/app/modules/user/components/UserPackCard.tsx b/packages/app/modules/user/components/UserPackCard.tsx
@@ -1,45 +1,28 @@
-import { Card, RButton, RStack, RSwitch, RText } from '@packrat/ui';
+import { Card, RButton, RStack, RSwitch, RText, Switch } from '@packrat/ui';
 import React, { useEffect, useState, type FC } from 'react';
 import { PackImage } from 'app/modules/pack/components/PackCard/PackImage';
-import {
-  FavoriteButton,
-  useFetchUserFavorites,
-  type FeedCardProps,
-} from 'app/modules/feed';
+import { FavoriteButton } from 'app/modules/feed';
 import { type PackDetails } from 'app/modules/pack/model';
-import { useEditPack } from 'app/modules/pack/hooks';
 import useTheme from 'app/hooks/useTheme';
 import { useUserPacks } from 'app/modules/pack/hooks';
 import { ScoreLabel } from 'app/components/ScoreLabel';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import { type UserDataCardProps } from './model';
+import { useSetPackVisibility } from 'app/modules/pack/useSetPackVisibility';
 
-interface PackCardProps extends FeedCardProps<PackDetails> {}
+interface PackCardProps extends UserDataCardProps<PackDetails> {}
 
 export const UserPackCard: FC<PackCardProps> = (props) => {
-  const { editPack } = useEditPack();
-  const [isPublic, setIsPublic] = useState(props.is_public);
+  const { setPackVisibility, isLoading } = useSetPackVisibility();
 
   const { currentTheme } = useTheme();
 
   const { refetch } = useUserPacks(props.ownerId, {}, '', true);
-  const { refetch: refetchFavorites } = useFetchUserFavorites(props.ownerId);
 
   const updateIsPublic = (value) => {
-    setIsPublic(value);
-    editPack(
-      { id: props.id, name: props.title, is_public: value },
-      {
-        onSuccess: () => {
-          refetch();
-          refetchFavorites();
-        },
-      },
-    );
+    setPackVisibility({ id: props.id, name: props.title, is_public: value });
   };
 
-  useEffect(() => {
-    setIsPublic(props.is_public);
-  }, [props.is_public]);
-
   return (
     <Card
       title={props.title}
@@ -55,7 +38,36 @@ export const UserPackCard: FC<PackCardProps> = (props) => {
         />
       }
       actions={
-        <RStack style={{ flexDirection: 'row', gap: 12 }}>
+        <RStack
+          style={{
+            flexDirection: 'row',
+            gap: 12,
+            alignItems: 'center',
+            marginTop: 8,
+          }}
+        >
+          {props.isAuthUserProfile && (
+            <RButton
+              style={{
+                backgroundColor: 'transparent',
+                borderWidth: 0,
+                padding: 0,
+                opacity: isLoading ? 0.4 : 1,
+              }}
+              unstyled
+              onPress={() => updateIsPublic(!props.isPublic)}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              {props.isPublic ? (
+                <Eye style={{ pointerEvents: 'none' }} />
+              ) : (
+                <EyeOff style={{ pointerEvents: 'none' }} />
+              )}
+            </RButton>
+          )}
           <FavoriteButton
             count={props.favoriteCount}
             isAuthUserFavorite={props.isUserFavorite}
@@ -66,29 +78,11 @@ export const UserPackCard: FC<PackCardProps> = (props) => {
               refetch();
             }}
           />
-          <RButton
-            style={{
-              backgroundColor: currentTheme.colors.background,
-              borderRadius: 20,
-              height: 20,
-              width: 30,
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-          >
-            <RSwitch
-              checked={isPublic}
-              onCheckedChange={updateIsPublic}
-              size="$1.5"
-            />
-          </RButton>
         </RStack>
       }
       type={props.cardType}
       style={{
-        borderColor: isPublic
+        borderColor: props.isPublic
           ? currentTheme.colors.secondaryBlue
           : currentTheme.colors.background,
         borderWidth: 2,