Merge pull request #1145 from andrew-bierman/fix-some-ui-breaks

hide chat and fix ui breaks
andrew-bierman · Jul 27, 2024 · 4b11cfd · 4b11cfd
2 parents 926e81b + 762fcfa
commit 4b11cfd
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 41 deletions.
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
@@ -15,7 +15,7 @@ interface CustomCardProps {
   type: 'pack' | 'trip';
   destination?: string;
   data: {
-    owner_id: string
+    owner_id: string;
     owners?: Array<{ name: string }> | null;
   };
 }
@@ -35,7 +35,6 @@ export const CustomCard = ({
   if (!data) return null;
 
   const isWeb = Platform.OS === 'web';
-  console.log('CustomCardProps ', data  )
 
   return (
     <View
@@ -94,6 +93,8 @@ export const CustomCard = ({
           style={{
             paddingRight: 16,
             paddingLeft: 16,
+            flex: 1,
+            paddingBottom: 20,
           }}
         >
           {content}
@@ -120,4 +121,4 @@ const loadStyles = (theme) => {
       alignSelf: 'center',
     },
   };
-};
+};
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
@@ -20,7 +20,6 @@ export const DetailsComponent = ({
   additionalComps,
   link,
 }: DetailsComponent) => {
-  console.log('type', type)
   const renderDetails = () => {
     switch (type) {
       case 'pack':

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -198,7 +198,12 @@ const FeedSearchFilter = ({
             </View>
           </RStack>
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
-            <RButton onPress={handleCreateClick}>Create</RButton>
+            <RButton
+              style={{ marginLeft: 'auto', marginTop: 8 }}
+              onPress={handleCreateClick}
+            >
+              Create
+            </RButton>
           )}
         </RStack>
       )}

diff --git a/packages/app/components/item/ImportForm.tsx b/packages/app/components/item/ImportForm.tsx
@@ -5,6 +5,7 @@ import useTheme from '../../hooks/useTheme';
 import * as DocumentPicker from 'expo-document-picker';
 import { useImportPackItem } from 'app/hooks/packs/useImportPackItem';
 import { useImportItem } from 'app/hooks/items/useImportItem';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ImportFormProps {
   showSubmitButton?: boolean;
@@ -40,6 +41,7 @@ export const ImportForm: FC<ImportFormProps> = ({
   const { currentTheme } = useTheme();
   const { handleImportNewItems } = useImportItem();
   const { importPackItem } = useImportPackItem();
+  const { xxs } = useResponsive();
 
   const [selectedType, setSelectedType] = useState<SelectedType>({
     label: 'CSV',
@@ -91,7 +93,7 @@ export const ImportForm: FC<ImportFormProps> = ({
   };
 
   return (
-    <View style={{ minWidth: 320 }}>
+    <View style={{ minWidth: xxs ? 250 : 320 }}>
       <View
         style={{
           flexDirection: 'row',

diff --git a/packages/app/components/item/ItemForm.tsx b/packages/app/components/item/ItemForm.tsx
@@ -102,15 +102,17 @@ export const ItemForm = ({
                   width="100"
                 />
               ) : (
-                <DropdownComponent
-                  value={selectedUnit}
-                  data={data}
-                  onValueChange={handleUnitChange}
-                  placeholder={selectedUnit}
-                  width="50%"
-                  native={true}
-                  zeego={true}
-                />
+                <View style={{ flex: 1 }}>
+                  <DropdownComponent
+                    value={selectedUnit}
+                    data={data}
+                    onValueChange={handleUnitChange}
+                    placeholder={selectedUnit}
+                    width="50%"
+                    native={true}
+                    zeego={true}
+                  />
+                </View>
               ))}
           </View>
           <FormInput

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
@@ -94,7 +94,7 @@ export const ItemsTable = ({
   return (
     <View
       style={{
-        padding: 30,
+        padding: 10,
         backgroundColor: isDark ? '#1A1A1D' : 'white',
         borderRadius: 12,
         margin: 20,

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
@@ -10,7 +10,8 @@ import useResponsive from 'app/hooks/useResponsive';
 import { FlatList, View } from 'react-native';
 import { useFetchSinglePack } from '../../hooks/packs';
 import ScoreContainer from '../ScoreContainer';
-import ChatContainer from '../chat';
+// import ChatContainer from '../chat';
+import { TextLink } from '@packrat/crosspath';
 import { DetailsComponent } from '../details';
 import { TableContainer } from '../pack_table/Table';
 import { AddItemModal } from './AddItemModal';
@@ -110,14 +111,29 @@ export function PackDetails() {
                               }
                             />
                           </View>
-                        ) : null;
+                        ) : (
+                          <RText
+                            style={{ textAlign: 'center', fontWeight: 600 }}
+                          >
+                            <RText style={{ marginRight: 2 }}>
+                              You don't have permission to edit this pack. You
+                              can create your own pack{' '}
+                            </RText>
+                            <TextLink href="/pack/create">
+                              <RText
+                                style={{
+                                  color: 'blue',
+                                  fontWeight: 700,
+                                }}
+                              >
+                                here
+                              </RText>
+                            </TextLink>
+                          </RText>
+                        );
                       case SECTION.SCORECARD:
                         return (
-                          <View
-                            style={{
-                              minHeight: xxs ? 800 : xs ? 800 : xxl ? 100 : 800,
-                            }}
-                          >
+                          <View>
                             <ScoreContainer
                               type="pack"
                               data={currentPack}
@@ -136,7 +152,8 @@ export function PackDetails() {
           />
         </View>
       )}
-      <View
+      {/* Disable Chat */}
+      {/* <View
         style={{
           position: 'absolute',
           right: -40,
@@ -151,7 +168,7 @@ export function PackDetails() {
           trigger="Open Chat"
           type="pack"
         />
-      </View>
+      </View> */}
     </Layout>
   );
 }
diff --git a/packages/app/screens/feed/Feed.tsx b/packages/app/screens/feed/Feed.tsx
@@ -187,7 +187,7 @@ const loadStyles = (theme) => {
       backgroundColor: currentTheme.colors.background,
       fontSize: 18,
       padding: 15,
-      ...(Platform.OS !== 'web' && { paddingVertical: 0 }),
+      ...(Platform.OS !== 'web' && { paddingBottom: 15, paddingTop: 0 }),
     },
     // filterContainer: {
     //   backgroundColor: currentTheme.colors.card,

diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
@@ -73,21 +73,23 @@ export default function Items() {
             <RText style={{ fontWeight: 'bold', textWrap: 'nowrap' }}>
               Sort By:
             </RText>
-            <DropdownComponent
-              value={value}
-              data={optionValues}
-              onValueChange={handleSort}
-              placeholder={value}
-              width="80%"
-              native={true}
-              zeego={true}
-            />
+            <View style={{ flex: 1 }}>
+              <DropdownComponent
+                value={value}
+                data={optionValues}
+                onValueChange={handleSort}
+                placeholder={value}
+                native={true}
+                zeego={true}
+              />
+            </View>
           </RStack>
           <View
             style={{
               marginBottom: 10,
               display: 'flex',
               flexDirection: 'row',
+              justifyContent: 'flex-end',
               gap: 5,
             }}
           >
@@ -100,7 +102,7 @@ export default function Items() {
           </View>
         </RStack>
         {!isError && data?.items && Array.isArray(data.items) && (
-          <View style={{padding:10, width:'100%'}}>
+          <View style={{ padding: 10, width: '100%' }}>
             <ItemsTable
               limit={limit}
               setLimit={handleLimitChange}
@@ -110,7 +112,7 @@ export default function Items() {
               isLoading={isFetching}
               totalPages={data?.totalPages}
             />
-         </View>
+          </View>
         )}
       </RStack>
     </RScrollView>
@@ -137,14 +139,15 @@ const loadStyles = (theme) => {
     },
     container: {
       backgroundColor: currentTheme.colors.card,
-      flexDirection: 'row',
+      flexDirection: xs || xxs ? 'column' : 'row',
+      gap: xs || xxs ? 4 : 0,
       justifyContent: 'space-between',
       width: '100%',
       padding: 30,
       borderRadius: 10,
     },
     sortContainer: {
-      width: xxs ? '50%' : xs ? '50%' : '20%',
+      width: xxs ? '100%' : xs ? '100%' : '20%',
       justifyContent: 'space-between',
       flexDirection: 'row',
       alignItems: 'center',

diff --git a/packages/crosspath/src/adapters/solito/components/Link.tsx b/packages/crosspath/src/adapters/solito/components/Link.tsx
@@ -1 +1 @@
-export { Link } from 'solito/link';
+export { Link, TextLink } from 'solito/link';
diff --git a/packages/crosspath/src/adapters/solito/index.ts b/packages/crosspath/src/adapters/solito/index.ts
@@ -1,3 +1,3 @@
 export { createParam } from './createParam';
 export { useRouter } from './useRouter';
-export { Link } from './components/Link';
+export * from './components/Link';
diff --git a/packages/crosspath/src/adapters/tanstack/components/Link.tsx b/packages/crosspath/src/adapters/tanstack/components/Link.tsx
@@ -6,3 +6,8 @@ export const Link: LinkComponent = (props: LinkProps) => {
   // @ts-ignore
   return <TanstackLink to={props.href} {...props} />;
 };
+
+export const TextLink: LinkComponent = (props: LinkProps) => {
+  // @ts-ignore
+  return <TanstackLink to={props.href} {...props} />;
+};
diff --git a/packages/crosspath/src/lib-interface.ts b/packages/crosspath/src/lib-interface.ts
@@ -4,5 +4,9 @@ export declare function Link(
   props: Parameters<LinkComponent>,
 ): ReturnType<LinkComponent>;
 
+export declare function TextLinks(
+  props: Parameters<LinkComponent>,
+): ReturnType<LinkComponent>;
+
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -108,6 +108,7 @@ export function PaginatedSortedTable({
           alignItems: 'center',
           justifyContent: 'center',
           width: '100%',
+          gap: 10,
           marginBottom: 30,
         }}
       >
@@ -156,6 +157,7 @@ export function PaginatedSortedTable({
             style={{
               flexDirection: 'row',
               alignSelf: 'center',
+              padding: 8,
               fontSize: 15,
             }}
           >
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { Link } from 'solito/link';
		export { Link, TextLink } from 'solito/link';