Merge branch 'andrew_testing' into fix-add-item-modal-close

andrew-bierman · Apr 2, 2024 · 1ec7325 · 1ec7325
2 parents f4305bd + 260185b
commit 1ec7325
Show file tree

Hide file tree

Showing 22 changed files with 98 additions and 115 deletions.
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -139,8 +139,7 @@
     "togpx": "^0.5.4",
     "uuid": "3.4.0",
     "xmldom": "^0.6.0",
-    "zeego": "^1.7.2",
-    "zod": "^3.22.2"
+    "zeego": "^1.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

diff --git a/packages/app/atoms/progressStore/progressStore.ts b/packages/app/atoms/progressStore/progressStore.ts
@@ -55,8 +55,7 @@ export const useProgressListener = () => {
 
   useEffect(() => {
     const handler = (evt) => dispatch(evt);
-    progressEvents.addListener('dispatch', handler);
-
+    progressEvents.once('dispatch', handler);
     return () => {
       progressEvents.removeListener('dispatch', handler);
     };

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
@@ -217,7 +217,9 @@ export default function Card({
                       gap: 8,
                     }}
                   >
-                    <Link href={`/profile/${owner?._id}`}>
+                    <Link
+                      href={`/profile/${type === 'pack' ? owner_id : owner?._id}`}
+                    >
                       <RText color={currentTheme.colors.textColor}>
                         View {owner?.username ? '@' + owner?.username : 'Owner'}
                       </RText>

diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
@@ -19,6 +19,9 @@ export const NavigationList = ({
           style={ {
             width: '100%',
             borderRadius: 8,
+            marginBottom: isMobileView ? 25 : 0,
+            backgroundColor: currentTheme.colors.background,
+            color: currentTheme.colors.white
           }}
           hoverStyle={ {
             bg: currentTheme.colors.secondaryBlue,

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform, View } from 'react-native';
 import {
   RButton,
@@ -14,7 +15,7 @@ import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAddNewPack } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
-import { z } from 'zod';
+import { addPackSchema } from '@packrat/validations';
 
 export const AddPack = ({ isCreatingTrip = false }) => {
   // Hooks
@@ -78,7 +79,10 @@ export const AddPack = ({ isCreatingTrip = false }) => {
             accessibilityLabel="Choose Service"
             placeholder={'Is Public'}
           />
-          <SubmitButton style={{ width: '100%', marginTop: 40 }} onSubmit={handleAddPack}>
+          <SubmitButton
+            style={{ width: '100%', marginTop: 40 }}
+            onSubmit={handleAddPack}
+          >
             <RText style={{ color: currentTheme.colors.text }}>
               {isLoading ? 'Loading...' : 'Add Pack'}
             </RText>
@@ -152,10 +156,3 @@ const loadStyles = (theme, appTheme) => {
     },
   };
 };
-
-// TODO move to validations workspace
-
-export const addPackSchema = z.object({
-  name: z.string().nonempty(),
-  isPublic: z.union([z.literal('0'), z.literal('1')]),
-});
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
@@ -30,7 +30,7 @@ export default function PackContainer({ isCreatingTrip = false }) {
     error,
     isLoading,
     refetch: refetchQuery,
-  } = useUserPacks((ownerId = user?._id));
+  } = useUserPacks(user?._id);
 
   useEffect(() => {
     refetchQuery();

diff --git a/packages/app/components/password-reset/RequestEmailModal.tsx b/packages/app/components/password-reset/RequestEmailModal.tsx
@@ -16,8 +16,6 @@ export const RequestPasswordResetEmailModal = () => {
 
   const [formRef, triggerSubmit] = useFormSubmitTrigger();
 
-  console.log(formRef);
-
   return (
     <BaseModal
       title="Reset Password"
@@ -38,7 +36,7 @@ export const RequestPasswordResetEmailModal = () => {
       ]}
     >
       <Form
-        formRef={formRef}
+        ref={formRef}
         onSubmit={handleResetPasswordEmail}
         validationSchema={emailExists}
       >

diff --git a/packages/app/components/trip/createTripModal.tsx b/packages/app/components/trip/createTripModal.tsx
@@ -19,7 +19,7 @@ import { DropdownComponent } from '../Dropdown';
 import { useAuthUser } from 'app/auth/hooks';
 import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
 import { useFormSubmitTrigger } from '@packrat/ui/src/form';
-import { usePackId } from 'app/hooks/packs/usePackId';
+import { usePackId } from 'app/hooks/packs';
 
 interface SaveTripContainerProps {
   dateRange: {
@@ -154,7 +154,7 @@ export const SaveTripContainer = ({
     >
       <Form
         validationSchema={addTripForm}
-        formRef={formRef}
+        ref={formRef}
         onSubmit={handleCreateTrip}
         defaultValues={{ isPublic: '0' }}
       >

diff --git a/packages/app/context/FontLoader.tsx b/packages/app/context/FontLoader.tsx
@@ -19,11 +19,13 @@ import {
   SimpleLineIcons,
   Zocial,
 } from '@expo/vector-icons';
+import Inter from '@tamagui/font-inter/otf/Inter-Medium.otf';
+import InterBold from '@tamagui/font-inter/otf/Inter-Bold.otf';
 
 const FontLoader = ({ children }) => {
   const [loaded] = useFonts({
-    // Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
-    // InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
+    Inter,
+    InterBold,
     // Cache all icon fonts
     ...AntDesign.font,
     ...Entypo.font,

diff --git a/packages/app/hooks/common/useIsMobileView/index.ts b/packages/app/hooks/common/useIsMobileView/index.ts
@@ -6,5 +6,5 @@ export const useIsMobileView = () => {
 
   const { screenWidth } = useScreenWidth();
 
-  return screenWidth < 1900; // hard coded for now, will be replaced with media queries
+  return screenWidth < 768; // hard coded for now, will be replaced with media queries
 };
diff --git a/packages/app/hooks/packs/useEditPackItem.ts b/packages/app/hooks/packs/useEditPackItem.ts
@@ -1,4 +1,3 @@
-import { util } from 'zod';
 import { queryTrpc } from '../../trpc';
 import { useItemsUpdater } from 'app/hooks/items';
 import { useOfflineQueue } from 'app/hooks/offline';

diff --git a/packages/app/hooks/storage/useStorage.ts b/packages/app/hooks/storage/useStorage.ts
@@ -30,8 +30,8 @@ export function useStorage(key: string): UseStateHook<string> {
       setState(null);
     };
 
-    storageEvents.addListener('change', handleChange);
-    storageEvents.addListener('remove', handleRemove);
+    storageEvents.once('change', handleChange);
+    storageEvents.once('remove', handleRemove);
 
     return () => {
       storageEvents.removeListener('change', handleChange);

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -132,8 +132,7 @@
     "tamagui": "^1.91.3",
     "togpx": "^0.5.4",
     "uuid": "3.4.0",
-    "xmldom": "^0.6.0",
-    "zod": "^3.22.2"
+    "xmldom": "^0.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
@@ -71,7 +71,7 @@ const Header = ({
               <>
                 <RSkeleton
                   style={{
-                    borderRadius: '100%',
+                    borderRadius: 100,
                     height: 100,
                     width: 100,
                   }}
@@ -101,18 +101,10 @@ const Header = ({
       <RStack style={{ flexDirection: 'row', ...styles.card }}>
         {isLoading ? (
           <>
-            <RSkeleton
-              style={{ borderRadius: '100%', width: 50, height: 50 }}
-            />
-            <RSkeleton
-              style={{ borderRadius: '100%', width: 50, height: 50 }}
-            />
-            <RSkeleton
-              style={{ borderRadius: '100%', width: 50, height: 50 }}
-            />
-            <RSkeleton
-              style={{ borderRadius: '100%', width: 50, height: 50 }}
-            />
+            <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
+            <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
+            <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
+            <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
           </>
         ) : (
           <>

diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
@@ -13,10 +13,11 @@ import {
   ImageUpload,
   FormInput,
   FormSelect,
+  SubmitButton,
 } from '@packrat/ui';
 import Avatar from 'app/components/Avatar/Avatar';
 import { useProfileSettings } from 'app/hooks/user';
-import { z } from 'zod';
+import { userSettingsSchema, passwordChangeSchema } from '@packrat/validations';
 
 const weatherOptions = ['celsius', 'fahrenheit'].map((key) => ({
   label: key,
@@ -44,11 +45,7 @@ export default function Settings() {
           <RH2>Profile</RH2>
           <RSeparator marginVertical={8} />
         </RStack>
-        <Form
-          onSubmit={handleEditUser}
-          validationSchema={userSettingsSchema}
-          defaultValues={{ ...user }}
-        >
+        <Form validationSchema={userSettingsSchema} defaultValues={{ ...user }}>
           <RStack space="$3" width="fit-content" marginHorizontal="auto">
             <ImageUpload
               label="Profile Picture"
@@ -90,9 +87,13 @@ export default function Settings() {
                 </RStack>
               </RStack>
             </RStack>
-            <RButton color="white" style={{ backgroundColor: '#0284c7' }}>
+            <SubmitButton
+              onSubmit={handleEditUser}
+              color="white"
+              style={{ backgroundColor: '#0284c7' }}
+            >
               Update profile
-            </RButton>
+            </SubmitButton>
           </RStack>
         </Form>
 
@@ -136,30 +137,3 @@ export default function Settings() {
     </RScrollView>
   ) : null;
 }
-
-// TODO move to validations workspace
-
-const userSettingsSchema = z.object({
-  name: z.string().min(1).nonempty(),
-  email: z.string().email().nonempty(),
-  username: z.string().nonempty(),
-  profileImage: z.string().optional(),
-  preferredWeather: z.union([z.literal('celsius'), z.literal('fahrenheit')]),
-  preferredWeight: z.union([
-    z.literal('lb'),
-    z.literal('oz'),
-    z.literal('kg'),
-    z.literal('g'),
-  ]),
-});
-
-const passwordChangeSchema = z
-  .object({
-    oldPassword: z.string().min(1, 'Old password is required'),
-    newPassword: z.string().nonempty(),
-    confirmPassword: z.string().nonempty(),
-  })
-  .refine((data) => data.newPassword === data.confirmPassword, {
-    message: 'New password and confirmation must match',
-    path: ['confirmPassword'], // This will attach the error to `passwordConfirm` field
-  });
diff --git a/packages/ui/src/form/components/Form.tsx b/packages/ui/src/form/components/Form.tsx
@@ -1,15 +1,12 @@
-import { type ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, type ReactNode } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   FieldValues,
-  Form as RHFForm,
   FormProvider,
   FormSubmitHandler,
   UseFormProps,
   useForm,
-  useFormContext,
 } from 'react-hook-form';
-import { Platform } from 'react-native';
 export { useFormContext as useAppFormContext } from 'react-hook-form';
 
 interface Props extends Omit<UseFormProps, 'resolver'> {
@@ -19,34 +16,29 @@ interface Props extends Omit<UseFormProps, 'resolver'> {
   children: ReactNode;
 }
 
-// TODO change the name to "Form" after handling tamagui all components export,
-// which is cause of a name collision
-export const Form = ({
-  validationSchema,
-  onSubmit,
-  children,
-  formRef,
-  ...formProps
-}: Props) => {
-  const form = useForm({
-    ...formProps,
-    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
-  });
+export const Form = forwardRef<any, Props>(
+  ({ validationSchema, onSubmit, children, ...formProps }, ref) => {
+    const form = useForm({
+      ...formProps,
+      resolver: validationSchema ? zodResolver(validationSchema) : undefined,
+    });
 
-  if (formRef && !formRef?.current && typeof onSubmit === 'function') {
-    formRef.current = {
-      submit: (...params) =>
-        form.handleSubmit(onSubmit.bind(null, ...params))(),
-    };
-  }
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          submit: (...params) =>
+            typeof onSubmit === 'function' &&
+            form.handleSubmit(onSubmit.bind(null, ...params))(),
+        };
+      },
+      [form, onSubmit],
+    );
 
-  return (
-    <FormProvider {...form}>
-      {Platform.OS === 'web' ? (
-        <RHFForm onSubmit={form.handleSubmit(onSubmit)}>{children}</RHFForm>
-      ) : (
+    return (
+      <FormProvider {...form}>
         <>{children}</>
-      )}
-    </FormProvider>
-  );
-};
+      </FormProvider>
+    );
+  },
+);
diff --git a/packages/ui/src/form/components/SubmitButton.tsx b/packages/ui/src/form/components/SubmitButton.tsx
@@ -1,7 +1,7 @@
 import { LmSubmitButtonRhf, type LmButtonRhfProps } from '../lib';
 
 interface Props<T extends {}> extends LmButtonRhfProps<T> {
-  onSubmit: (values: T) => void;
+  onSubmit?: (values: T) => void;
 }
 
 export const SubmitButton = <T extends {}>({

diff --git a/packages/ui/src/form/useFormSubmitTrigger.ts b/packages/ui/src/form/useFormSubmitTrigger.ts
@@ -1,10 +1,9 @@
 import { useRef } from 'react';
 
 export const useFormSubmitTrigger = () => {
-  const formRef = useRef(null);
+  const formRef = useRef<{ submit: (...params: any) => void }>(null);
 
   const triggerFormSubmit = (...params) => {
-    console.log(params);
     formRef.current?.submit?.(...params);
   };
 

diff --git a/packages/validations/src/validations/packRoutesValidator.ts b/packages/validations/src/validations/packRoutesValidator.ts
@@ -39,3 +39,8 @@ export const getPublicPacks = z.object({
 export const sendMessage = z.object({
   message: z.string().nonempty(),
 });
+
+export const addPackSchema = z.object({
+  name: z.string().nonempty(),
+  isPublic: z.union([z.literal('0'), z.literal('1')]),
+});