From 163be38d132e903136b3b216ada4a578cf0c43f1 Mon Sep 17 00:00:00 2001
From: Grant Forrest <gaforres@gmail.com>
Date: Tue, 28 May 2024 11:26:01 -0400
Subject: [PATCH] fix onboarding first check

---
 .../groceries/items/GroceryListItem.tsx       | 23 ++++++++-----------
 .../web/src/onboarding/firstTimeOnboarding.ts |  5 +---
 packages/client/src/components/onboarding.tsx | 13 +++++++----
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/apps/gnocchi/web/src/components/groceries/items/GroceryListItem.tsx b/apps/gnocchi/web/src/components/groceries/items/GroceryListItem.tsx
index bbf15d56..57dcf3b0 100644
--- a/apps/gnocchi/web/src/components/groceries/items/GroceryListItem.tsx
+++ b/apps/gnocchi/web/src/components/groceries/items/GroceryListItem.tsx
@@ -72,12 +72,11 @@ export interface GroceryListItemProps {
   isDragActive?: boolean;
   style?: CSSProperties;
   menuProps?: any;
-  first?: boolean;
 }
 
 export const GroceryListItem = forwardRef<HTMLDivElement, GroceryListItemProps>(
   function GroceryListItem(
-    { item, isDragActive, menuProps, className, first, ...rest },
+    { item, isDragActive, menuProps, className, ...rest },
     ref,
   ) {
     const { purchasedAt, comment, id, food, textOverride } =
@@ -198,18 +197,14 @@ export const GroceryListItem = forwardRef<HTMLDivElement, GroceryListItemProps>(
               // onContextMenu={preventDefault}
               {...menuProps}
             >
-              {first ? (
-                <OnboardingTooltip
-                  onboarding={categorizeOnboarding}
-                  step="categorize"
-                  content="Tap and hold to change category"
-                  disableNext
-                >
-                  <DragHandleDots2Icon className="text-gray-5 hover:text-white" />
-                </OnboardingTooltip>
-              ) : (
-                <DragHandleDots2Icon className="text-gray-5 hover:text-white" />
-              )}
+              <OnboardingTooltip
+                onboarding={categorizeOnboarding}
+                step="categorize"
+                content="Tap and hold to change category"
+                disableNext
+              >
+                <Icon name="grabby" className="text-gray-5" />
+              </OnboardingTooltip>
             </div>
           </div>
           <CollapsibleTrigger asChild>
diff --git a/apps/gnocchi/web/src/onboarding/firstTimeOnboarding.ts b/apps/gnocchi/web/src/onboarding/firstTimeOnboarding.ts
index 27d21526..f263563e 100644
--- a/apps/gnocchi/web/src/onboarding/firstTimeOnboarding.ts
+++ b/apps/gnocchi/web/src/onboarding/firstTimeOnboarding.ts
@@ -1,6 +1,3 @@
 import { createOnboarding } from '@biscuits/client';
 
-export const firstTimeOnboarding = createOnboarding('firstTime', [
-  'welcome',
-  'settings',
-]);
+export const firstTimeOnboarding = createOnboarding('firstTime', ['welcome']);
diff --git a/packages/client/src/components/onboarding.tsx b/packages/client/src/components/onboarding.tsx
index 5a881fd3..025aa576 100644
--- a/packages/client/src/components/onboarding.tsx
+++ b/packages/client/src/components/onboarding.tsx
@@ -82,10 +82,15 @@ export function createOnboarding<Steps extends StringTuple>(
     // a unique ID for this invocation of this hook. useful if there
     // are multiple mounted components using this same hook and name.
     const id = useId();
-    if (stepClaims[name] === undefined) {
-      stepClaims[name] = id;
-    }
-    const hasClaim = true; // stepClaims[name] === id;
+    const hasClaim = stepClaims[name] === id;
+    useEffect(() => {
+      if (!stepClaims[name]) {
+        stepClaims[name] = id;
+        return () => {
+          delete stepClaims[name];
+        };
+      }
+    }, [id]);
 
     const active = useSnapshot(state).active;