Merge pull request #963 from andrew-bierman/fix/screen_type

Fix type inside app directory

packages/app/api/getParks.ts

@@ -10,7 +10,7 @@ import osmtogeojson from 'osmtogeojson';
  * @return {Array<string>} An array of park names.
  */
 export const getParksRapid = async (state: string): Promise<string[]> => {
-  let parksArray = [];
+  let parksArray: any[] = [];
   const abbrState = abbrRegion(state, 'abbr') ?? '';
   if (abbrState) {
     await fetch(`${api}/getparks?abbrState=${abbrState}`)

packages/app/auth/hooks/useGoogleAuth.ts

@@ -40,7 +40,7 @@ export const useGoogleAuth = () => {
   useEffect(() => {
     if (response?.type === 'success') {
       const { id_token } = response.params;
-      setToken(id_token);
+      setToken(id_token || '');
     }
   }, [response]);
 

packages/app/auth/ts/interfaces.ts

@@ -11,5 +11,5 @@ export interface User {
   token: string;
   updatedAt: string;
   username: string;
-  id: string;
+  // id: string;
 }

packages/app/components/DialogDemo/DialogDemo.tsx

@@ -1,20 +1,24 @@
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import {
-  Button,
+  Button as OriginalButton,
   Dialog,
   Fieldset,
-  Input,
-  Label,
+  Input as OriginalInput,
+  Label as OriginalLabel,
   Paragraph,
   TooltipSimple,
   Unspaced,
-  XStack,
-  YStack,
+  XStack as OriginalXStack,
 } from 'tamagui';
 
 import { BaseDialog } from '@packrat/ui';
 import { SelectDemoItem } from '../select';
 
+const Label: any = OriginalLabel;
+const XStack: any = OriginalXStack;
+const Button: any = OriginalButton;
+const Input: any = OriginalInput;
+
 export const DialogDemo = () => {
   return (
     <BaseDialog

packages/app/components/Dropdown.tsx

@@ -120,7 +120,14 @@ import React from 'react';
 import { View, Platform } from 'react-native';
 import { RSelect } from '@packrat/ui';
 
-export const DropdownComponent = ({
+interface DropdownComponentProps {
+  width?: string | number;
+  style?: any;
+  placeholder?: string;
+  [x: string]: any; // for the rest of the props
+}
+
+export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   width,
   style = {},
   placeholder,

packages/app/components/DuplicateIcon/index.tsx

@@ -3,7 +3,7 @@ import { Pressable } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useRouter } from 'app/hooks/router';
 
-export const DuplicateIcon = ({ link = null }: { link: string }) => {
+export const DuplicateIcon = ({ link }: { link?: string }) => {
   if (!link) return null;
 
   const router = useRouter();

packages/app/components/GearList/GearList.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import { RStack, RText } from '@packrat/ui';
+import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { AddPackContainer } from '../pack/AddPack';
 import useTheme from '../../hooks/useTheme';
 import PackContainer from '../pack/PackContainer';
 
+const RStack: any = OriginalRStack;
+const RText: any = OriginalRText;
+
 export const GearList = () => {
   const { currentTheme } = useTheme();
   return (

packages/app/components/ItemRow/ItemRow.tsx

@@ -1,5 +1,5 @@
 import { Container } from 'native-base';
-import { RText } from '@packrat/ui';
+import { RText, RStack } from '@packrat/ui';
 import Checkbox from 'expo-checkbox';
 import { FontAwesome } from '@expo/vector-icons';
 import useCustomStyles from 'app/hooks/useCustomStyles';

packages/app/components/MultistepForm/MultistepForm.tsx

@@ -5,6 +5,11 @@ import { useMultiStepForm } from './useMultiStepForm';
 import { ProgressBar } from './ProgressBar';
 import { Sidebar } from './Sidebar';
 
+interface StepData {
+  component?: React.ComponentType;
+  [key: string]: any;
+}
+
 // TODO move to packages, we need to inject styles in this component, need to think what is the best way to do it
 
 export const MultiStepForm = ({ steps = [] }) => {
@@ -19,7 +24,7 @@ export const MultiStepForm = ({ steps = [] }) => {
     isFirstStep,
   } = useMultiStepForm(steps);
 
-  const { component: CurrentComponent, ...props } = currentStepData;
+  const { component: CurrentComponent, ...props } = currentStepData as StepData;
 
   if (!steps.length) return null;
 

packages/app/components/MultistepForm/useMultiStepForm.ts

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 
-export const useMultiStepForm = (steps = []) => {
+interface Step {
+  sidebarData?: any;
+}
+
+export const useMultiStepForm = (steps: Step[] = []) => {
   const [currentStep, setCurrentStep] = useState(0);
 
   const nextStep = () => {

packages/app/components/PackOptions/index.tsx

@@ -1,7 +1,9 @@
-import { useState } from 'react';
 import { Text } from 'react-native';
-import { useRouter } from 'app/hooks/router';
-import { RStack, RIconButton, BaseModal } from '@packrat/ui';
+import {
+  RStack,
+  RIconButton,
+  BaseModal as OriginalBaseModal,
+} from '@packrat/ui';
 import { Entypo } from '@expo/vector-icons';
 import { useModalState } from './useModalState';
 import { View } from 'react-native';
@@ -11,7 +13,7 @@ interface PackOptionsProps {
   Delete: React.ReactNode;
   Ignore: React.ReactNode;
 }
-
+const BaseModal: any = OriginalBaseModal;
 export const PackOptions: React.FC<PackOptionsProps> = ({
   Edit,
   Delete,

packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx

@@ -1,42 +1,49 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { type TextInput } from 'react-native';
 import { SearchInput } from '../SearchInput';
-import { RStack, RText } from '@packrat/ui';
+import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
 
 import { usePlacesAutoComplete } from './usePlacesAutoComplete';
 
-export const PlacesAutocomplete = forwardRef<any>(function PlacesAutoComplete(
-  { onSelect, placeholder },
-  ref,
-) {
-  const { data, handleSelect, search, setSearch } =
-    usePlacesAutoComplete(onSelect);
-  const inputRef = useRef<TextInput>();
+const RStack: any = OriginalRStack;
+const RText: any = OriginalRText;
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      searchText: search,
-      focus: () => inputRef.current?.focus(),
-    }),
-    [search],
-  );
+interface PlacesAutocompleteProps {
+  onSelect?: (geoJSON: any) => void;
+  placeholder?: string;
+}
 
-  return (
-    <SearchInput
-      onSelect={handleSelect}
-      placeholder={placeholder}
-      results={data}
-      resultItemComponent={<PlaceItem />}
-      onChange={setSearch}
-      searchString={search}
-      ref={inputRef}
-    />
-  );
-});
+export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
+  function PlacesAutoComplete({ onSelect, placeholder }, ref) {
+    const { data, handleSelect, search, setSearch } =
+      usePlacesAutoComplete(onSelect);
+    const inputRef = useRef<TextInput>();
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        searchText: search,
+        focus: () => inputRef.current?.focus(),
+      }),
+      [search],
+    );
+
+    return (
+      <SearchInput
+        onSelect={handleSelect}
+        placeholder={placeholder}
+        results={data}
+        resultItemComponent={<PlaceItem />}
+        onChange={setSearch}
+        searchString={search}
+        ref={inputRef}
+      />
+    );
+  },
+);
 
-const PlaceItem = ({ item }) => {
+const PlaceItem = ({ item }: any) => {
   const { currentTheme } = useTheme();
   return (
     <RStack style={{ flexDirection: 'row' }}>

packages/app/components/SearchInput/SearchInput.tsx

@@ -6,22 +6,27 @@ import useTheme from 'app/hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
 import {
-  RStack,
-  RInput,
-  RButton,
-  RText,
-  RScrollView,
+  RStack as OriginalRStack,
+  RInput as OriginalRInput,
+  RButton as OriginalRButton,
+  RScrollView as OriginalRScrollView,
   RIconButton,
 } from '@packrat/ui';
-import { View, Pressable } from 'react-native';
+import { View, Pressable as OriginalPressable } from 'react-native';
+
+const RStack: any = OriginalRStack;
+const RInput: any = OriginalRInput;
+const RScrollView: any = OriginalRScrollView;
+const RButton: any = OriginalRButton;
+const Pressable: any = OriginalPressable;
 
 interface SearchInputProps {
   onSelect: (result: any, index: number) => void;
   results: any[];
   onChange: (text: string) => void;
   searchString?: string;
   placeholder?: string;
-  resultItemComponent: ReactNode;
+  resultItemComponent: React.ReactElement;
 }
 
 export const SearchInput = forwardRef<TextInput, SearchInputProps>(
@@ -200,7 +205,7 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
                 flex: 1,
               }}
             />
-            {searchString.trim().length > 0 && (
+            {searchString && searchString.trim().length > 0 && (
               <RIconButton
                 onPress={handleClearSearch}
                 style={{ backgroundColor: 'transparent' }}

packages/app/components/card/CustomCard.tsx

@@ -68,21 +68,23 @@ export const CustomCard = ({
           {type === 'trip' ? (
             <TripCardHeader data={data} title={title} link={link} />
           ) : (
-            <PackCardHeader data={data} title={title} link={link} />
+            <PackCardHeader data={data} title={title} link={link || ''} />
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser.id === data.owner_id ? (
+        {type === 'pack' && authUser?.id === data.owner_id.id ? (
           <>
             <View
-              style={{
-                alignItems: 'center',
-                justifyContent: 'center',
-                paddingRight: 16,
-                paddingLeft: 16,
-                position:'relative',
-                zIndex:1,
-              }}
+              style={
+                {
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingRight: 16,
+                  paddingLeft: 16,
+                  position: 'relative',
+                  zIndex: '1',
+                } as any
+              }
             >
               <SearchItem />
             </View>

packages/app/components/card/CustomCardHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { RButton, RStack, RText } from '@packrat/ui';
+import { RButton, RStack, RText as OriginalRText } from '@packrat/ui';
 import { View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { RLink } from '@packrat/ui';
@@ -8,6 +8,7 @@ import { useAuthUser } from 'app/auth/hooks';
 import useTheme from '../../hooks/useTheme';
 import { CopyPackModal } from 'app/components/pack/CopyPackModal';
 
+const RText: any = OriginalRText;
 export const CustomCardHeader = ({ data, title, link, actionsComponent }) => {
   const { isCopied, handleCopyLink } = useCopyClipboard(link);
   const user = useAuthUser();

packages/app/components/card/LargeCard.tsx

@@ -13,16 +13,16 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
  */
 
 interface LargeCardProps {
-  title: string;
+  title?: string;
   Icon?: React.ComponentType<any>;
   ContentComponent?: React.ComponentType<any>;
   contentProps?: object;
-  type: 'search' | 'map' | 'mobile';
+  type?: 'search' | 'map' | 'mobile';
   customStyle?: object;
   children?: React.ReactNode;
 }
 
-const getContainerStyle = (type: 'search' | 'map' | 'mobile') => {
+const getContainerStyle = (type?: 'search' | 'map' | 'mobile') => {
   const styles = useCustomStyles(loadStyles);
   switch (type) {
     case 'search':

packages/app/components/card/PackCardHeader/PackCardHeader.tsx

@@ -23,6 +23,7 @@ import { CopyPackModal } from '../../pack/CopyPackModal';
 interface PackCardHeaderProps {
   data: any;
   title: string;
+  link?: string;
 }
 
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {

packages/app/components/carousel/index.tsx

@@ -11,12 +11,17 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 
 interface CarouselProps {
   children?: ReactNode[];
-  itemWidth: number;
+  itemWidth?: number;
+  iconColor?: string;
 }
 
 const { height, width } = Dimensions.get('window');
 
-const Carousel: React.FC<CarouselProps> = ({ children = [], itemWidth }) => {
+const Carousel: React.FC<CarouselProps> = ({
+  children = [],
+  itemWidth,
+  iconColor,
+}) => {
   const scrollViewRef = useRef<ScrollView>(null);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const styles = useCustomStyles(loadStyles);