Merge branch 'andrew_testing' into feat/tamagui_landing_page

andrew-bierman · Aug 14, 2024 · 28e5e02 · 28e5e02
2 parents 32235e8 + 9904d50
commit 28e5e02
Show file tree

Hide file tree

Showing 26 changed files with 769 additions and 22 deletions.
diff --git a/apps/tauri/src/App.tsx b/apps/tauri/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';

diff --git a/apps/tauri/src/routes/__root.tsx b/apps/tauri/src/routes/__root.tsx
@@ -2,16 +2,20 @@ import React from 'react';
 import { MainContentWeb } from '@packrat/ui';
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { Navbar } from 'app/components/navigation';
+import { NavbarTauri } from 'app/components/navigation';
 import { Provider } from 'app/provider';
+import { View } from 'react-native';
+import { FullSideBar } from 'app/components/navigation/SideBar';
 
 export const Route = createRootRoute({
   component: () => (
     <Provider>
-      <Navbar />
-      <MainContentWeb>
-        <Outlet />
-      </MainContentWeb>
+      <NavbarTauri />
+      <View style={{ paddingLeft: 300, paddingRight: 10 }}>
+        <MainContentWeb>
+          <Outlet />
+        </MainContentWeb>
+      </View>
       <TanStackRouterDevtools />
     </Provider>
   ),

diff --git a/apps/tauri/src/routes/index.tsx b/apps/tauri/src/routes/index.tsx
@@ -3,6 +3,7 @@ import Dashboard from 'app/screens/dashboard';
 import LandingPage from 'app/components/landing_page';
 import { useAuthUser } from 'app/auth/hooks';
 import { createFileRoute } from '@tanstack/react-router';
+import { ScrollView } from 'react-native';
 
 export const Route = createFileRoute('/')({
   component: Home,
@@ -11,5 +12,15 @@ export const Route = createFileRoute('/')({
 export default function Home() {
   const user = useAuthUser();
 
-  return <>{!user ? <LandingPage /> : <Dashboard />}</>;
+  return (
+    <>
+      {!user ? (
+        <LandingPage />
+      ) : (
+        <ScrollView horizontal={false}>
+          <Dashboard />
+        </ScrollView>
+      )}
+    </>
+  );
 }
diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
@@ -238,7 +238,7 @@ const loadStyles = (theme: any) => {
       paddingHorizontal: 25,
       marginVertical: 15,
       padding: 26,
-      marginTop:25,
+      marginTop: 25,
       // borderColor: currentTheme.colors.border,
       // borderWidth: 2,
       borderColor: currentTheme.colors.border,
@@ -258,7 +258,6 @@ const loadStyles = (theme: any) => {
       justifyContent: 'center',
       alignItems: 'flex-start',
       width: '60%',
-
     },
     vStackXS: {
       justifyContent: 'center',
@@ -280,7 +279,7 @@ const loadStyles = (theme: any) => {
     },
     buttonText: {
       color: currentTheme.colors.white,
-      fontSize: '1rem',
+      fontSize: 16,
       fontWeight: '500',
     },
     container: {

diff --git a/packages/app/components/feedPreview/FeedPreviewCard.tsx b/packages/app/components/feedPreview/FeedPreviewCard.tsx
@@ -4,7 +4,7 @@ import { RLink } from '@packrat/ui';
 import { LayoutChangeEvent, View } from 'react-native';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import loadStyles from './feedpreview.style';
-import { AntDesign, MaterialIcons } from '@expo/vector-icons';
+import { AntDesign, Fontisto, MaterialIcons } from '@expo/vector-icons';
 import useTheme from 'app/hooks/useTheme';
 import { useItemWeightUnit } from 'app/hooks/items';
 import { convertWeight } from 'app/utils/convertWeight';
@@ -17,22 +17,118 @@ export type FeedItem = any;
 interface FeedPreviewCardProps {
   linkStr: string;
   item: FeedItem;
+  feedType: string;
 }
 
 const RText: any = OriginalRText;
 
-const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
+const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({
+  linkStr,
+  item,
+  feedType,
+}) => {
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
   const [weightUnit] = useItemWeightUnit();
-  const formattedWeight = convertWeight(item.total_weight, 'g', weightUnit);
+  const formattedWeight = convertWeight(
+    item.total_weight ?? item.weight,
+    item.unit ?? 'g',
+    weightUnit,
+  );
   const [cardWidth, setCardWidth] = useState<number | undefined>();
 
   const handleSetCardWidth = (event: LayoutChangeEvent) => {
     const { width } = event.nativeEvent.layout;
     setCardWidth(width);
   };
 
+  if (feedType == 'similarItems') {
+    return (
+      <View style={styles.cardStyles}>
+        <View
+          style={{
+            backgroundColor: currentTheme.colors.cardIconColor,
+            width: '100%',
+            paddingLeft: 16,
+            alignSelf: 'stretch',
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: currentTheme.colors.primary,
+              padding: 4,
+              alignSelf: 'flex-start',
+              borderRadius: 8,
+              position: 'relative',
+              top: 16,
+            }}
+          >
+            <Fontisto
+              name="tent"
+              size={24}
+              color={currentTheme.colors.cardIconColor}
+            />
+          </View>
+        </View>
+        <View style={{ padding: 16 }}>
+          <RText style={[styles.feedItemTitle, { width: cardWidth }]}>
+            {item.name}
+          </RText>
+          <RStack
+            style={{
+              flexDirection: 'row',
+              alignItems: 'start',
+              fontWeight: 500,
+            }}
+            gap="$6"
+            onLayout={handleSetCardWidth}
+          >
+            <RText
+              color={hexToRGBA(currentTheme.colors.text, 0.8)}
+              style={{ fontWeight: 'bold' }}
+            >
+              {formatNumber(formattedWeight)}
+              {weightUnit}
+            </RText>
+
+            <RText
+              color={hexToRGBA(currentTheme.colors.text, 0.8)}
+              style={{ fontWeight: 'bold' }}
+            >
+              Qty: {item.quantity}
+            </RText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <AntDesign
+                name="clockcircle"
+                size={16}
+                color={hexToRGBA(currentTheme.colors.text, 0.8)}
+              />
+              <RText
+                color={hexToRGBA(currentTheme.colors.text, 0.8)}
+                style={{ fontWeight: 'bold' }}
+              >
+                {new Date(item.createdAt).toLocaleString('en-US', {
+                  month: 'short',
+                  day: '2-digit',
+                  ...(new Date(item.createdAt).getFullYear() ==
+                  new Date().getFullYear()
+                    ? {}
+                    : { year: 'numeric' }),
+                })}
+              </RText>
+            </View>
+          </RStack>
+        </View>
+      </View>
+    );
+  }
+
   return (
     <RLink href={linkStr}>
       <View style={styles.cardStyles}>
@@ -76,7 +172,7 @@ const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
           >
             <RText
               color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+              style={{ fontWeight: 'bold' }}
             >
               {formatNumber(formattedWeight)}
               {weightUnit}
@@ -95,7 +191,7 @@ const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
               />
               <RText
                 color={hexToRGBA(currentTheme.colors.text, 0.8)}
-                style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+                style={{ fontWeight: 'bold' }}
               >
                 {item.favorites_count}
               </RText>
@@ -114,7 +210,7 @@ const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
               />
               <RText
                 color={hexToRGBA(currentTheme.colors.text, 0.8)}
-                style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+                style={{ fontWeight: 'bold' }}
               >
                 {new Date(item.createdAt).toLocaleString('en-US', {
                   month: 'short',
@@ -128,7 +224,7 @@ const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
             </View>
             <RText
               color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+              style={{ fontWeight: 'bold' }}
             >
               Ttl Score: {item.total_score}
             </RText>

diff --git a/packages/app/components/feedPreview/index.tsx b/packages/app/components/feedPreview/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Carousel from '../carousel';
 import { useFeed } from 'app/hooks/feed';
 import { default as FeedPreviewCard, type FeedItem } from './FeedPreviewCard';
+import Loader from 'app/components/Loader';
 
 interface FeedPreviewScrollProps {
   itemWidth: number;
@@ -14,16 +15,18 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({
   feedType,
   id,
 }) => {
-  const { data: feedData } = useFeed({ feedType, id });
+  const { data: feedData, isLoading } = useFeed({ feedType, id });
 
-  return (
+  return isLoading ? (
+    <Loader />
+  ) : (
     <Carousel itemWidth={itemWidth}>
       {feedData
         ?.filter((item): item is FeedItem => item.type !== null)
         .map((item: FeedItem) => {
           const linkStr = `/${item.type}/${item.id}`;
           return linkStr ? (
-            <FeedPreviewCard {...{ linkStr, item }} key={linkStr} />
+            <FeedPreviewCard {...{ linkStr, item, feedType }} key={linkStr} />
           ) : null;
         })}
     </Carousel>