Skip to content

Commit 1a73f5b

Browse files
skeptrunedevcdxker
authored andcommitted
cleanup(shopify): move to offical NavMenu usage
1 parent 3a8c868 commit 1a73f5b

File tree

6 files changed

+96
-183
lines changed

6 files changed

+96
-183
lines changed

clients/trieve-shopify-extension/app/auth.ts

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,27 @@ export const validateTrieveAuth = async <S extends boolean = true>(
1717
});
1818

1919
if (!key) {
20-
throw json({ message: "No Key" }, 401);
20+
throw new Response(
21+
JSON.stringify({ message: "No key matching the current user" }),
22+
{
23+
headers: {
24+
"Content-Type": "application/json; charset=utf-8",
25+
},
26+
status: 401,
27+
},
28+
);
2129
}
2230

2331
if (strict && !key.currentDatasetId) {
24-
throw json({ message: "No dataset selected" }, 401);
32+
throw new Response(
33+
JSON.stringify({ message: "No dataset selected" }),
34+
{
35+
headers: {
36+
"Content-Type": "application/json; charset=utf-8",
37+
},
38+
status: 401,
39+
},
40+
);
2541
}
2642

2743
return {

clients/trieve-shopify-extension/app/components/analytics/GraphComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const GraphComponent = <T extends Record<string, any>>({
4949
{loading ? (
5050
<SkeletonDisplayText size="large" />
5151
) : (
52-
<Text as="span" variant="heading3xl" fontWeight="bold">
52+
<Text as="span" variant="heading2xl" fontWeight="bold">
5353
{dataType === "percentage" ? (
5454
`${((topLevelMetric ?? 0) * 100).toFixed(2)}%`
5555
) : dataType === "time" ? (

clients/trieve-shopify-extension/app/routes/app._dashboard.test.tsx

Lines changed: 0 additions & 50 deletions
This file was deleted.
Lines changed: 26 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
// dashboard.tsx
22
import { LoaderFunctionArgs, redirect } from "@remix-run/node";
3-
import {
4-
Outlet,
5-
useLoaderData,
6-
useLocation,
7-
useNavigate,
8-
} from "@remix-run/react";
9-
import { Page, Tabs, Layout, SkeletonBodyText, Frame } from "@shopify/polaris";
3+
import { Outlet, useLoaderData } from "@remix-run/react";
4+
import { Page, Layout, SkeletonBodyText, Frame } from "@shopify/polaris";
105
import { sdkFromKey, validateTrieveAuth } from "app/auth";
116
import {
127
QueryClient,
@@ -26,6 +21,7 @@ export const loader = async (args: LoaderFunctionArgs) => {
2621
const { session } = await authenticate.admin(args.request);
2722
const key = await validateTrieveAuth(args.request, false);
2823
if (!key.currentDatasetId) {
24+
console.log("No dataset selected, redirecting to /app/setup");
2925
throw redirect("/app/setup");
3026
}
3127

@@ -45,92 +41,8 @@ export const loader = async (args: LoaderFunctionArgs) => {
4541
};
4642

4743
export default function Dashboard() {
48-
const location = useLocation();
49-
const navigate = useNavigate();
5044
const { dataset, organization, key } = useLoaderData<typeof loader>();
5145

52-
// Determine selected tab based on current path
53-
const selected = useMemo(() => {
54-
if (location.pathname.includes("/settings")) {
55-
return 5; // Settings tab index
56-
}
57-
if (location.pathname.includes("/recommendations")) {
58-
return 4; // Recommendations tab index
59-
}
60-
if (location.pathname.includes("/chat")) {
61-
return 3; // Settings tab index
62-
}
63-
if (location.pathname.includes("/search")) {
64-
return 2; // Search tab index
65-
}
66-
if (location.pathname.includes("/component")) {
67-
return 1; // Component tab index
68-
}
69-
return 0; // Homepage tab index (default)
70-
}, [location.pathname]);
71-
72-
const handleTabChange = useCallback(
73-
(selectedTabIndex: number) => {
74-
if (selectedTabIndex === 0) {
75-
navigate("/app/"); // Navigate to homepage
76-
} else if (selectedTabIndex === 1) {
77-
navigate("/app/component"); // Navigate to component
78-
} else if (selectedTabIndex === 2) {
79-
navigate("/app/search"); // Navigate to search
80-
} else if (selectedTabIndex === 3) {
81-
navigate("/app/chat"); // Navigate to chat
82-
} else if (selectedTabIndex === 4) {
83-
navigate("/app/recommendations"); // Navigate to recommendations
84-
} else if (selectedTabIndex === 5) {
85-
navigate("/app/settings"); // Navigate to settings
86-
}
87-
},
88-
[navigate],
89-
);
90-
91-
const tabs = [
92-
{
93-
id: "homepage",
94-
content: "Home",
95-
accessibilityLabel: "Homepage",
96-
panelID: "homepage-panel",
97-
},
98-
{
99-
id: "component",
100-
content: "Component",
101-
accessibilityLabel: "Component",
102-
panelID: "component-panel",
103-
},
104-
{
105-
id: "search",
106-
content: "Search",
107-
accessibilityLabel: "Search",
108-
panelID: "search",
109-
},
110-
{
111-
id: "chat",
112-
content: "Chat",
113-
accessibilityLabel: "chat",
114-
panelID: "chat",
115-
},
116-
{
117-
id: "recommendations ",
118-
content: "Recommendations",
119-
accessibilityLabel: "recommendations",
120-
panelID: "recommendations",
121-
},
122-
{
123-
id: "settings",
124-
content: "Settings",
125-
accessibilityLabel: "Settings",
126-
panelID: "settings-panel",
127-
},
128-
];
129-
130-
// Get current tab title for page title
131-
const currentTabName =
132-
tabs[selected]?.id.charAt(0).toUpperCase() + tabs[selected]?.id.slice(1);
133-
13446
const [queryClient] = useState(
13547
() =>
13648
new QueryClient({
@@ -146,36 +58,28 @@ export default function Dashboard() {
14658
const dehydratedState = useDehydratedState();
14759

14860
return (
149-
<Frame>
150-
<Page fullWidth title={`Hi ${organization.organization.name} 👋`}>
151-
<Tabs
152-
fitted
153-
tabs={tabs}
154-
selected={selected}
155-
onSelect={handleTabChange}
156-
/>
157-
<Layout>
158-
<Layout.Section>
159-
<Suspense fallback={<SkeletonBodyText lines={3} />}>
160-
<TrieveProvider
161-
queryClient={queryClient}
162-
dataset={dataset as Dataset}
163-
organization={organization as OrganizationWithSubAndPlan}
164-
trieveKey={key}
165-
>
166-
<QueryClientProvider client={queryClient}>
167-
<ReactQueryDevtools initialIsOpen={false} />
168-
<HydrationBoundary state={dehydratedState}>
169-
<div style={{ minHeight: "300px" }}>
170-
<Outlet />
171-
</div>
172-
</HydrationBoundary>
173-
</QueryClientProvider>
174-
</TrieveProvider>
175-
</Suspense>
176-
</Layout.Section>
177-
</Layout>
178-
</Page>
179-
</Frame>
61+
<Page fullWidth>
62+
<Layout>
63+
<Layout.Section>
64+
<Suspense fallback={<SkeletonBodyText lines={3} />}>
65+
<TrieveProvider
66+
queryClient={queryClient}
67+
dataset={dataset as Dataset}
68+
organization={organization as OrganizationWithSubAndPlan}
69+
trieveKey={key}
70+
>
71+
<QueryClientProvider client={queryClient}>
72+
<ReactQueryDevtools initialIsOpen={false} />
73+
<HydrationBoundary state={dehydratedState}>
74+
<div style={{ minHeight: "300px" }}>
75+
<Outlet />
76+
</div>
77+
</HydrationBoundary>
78+
</QueryClientProvider>
79+
</TrieveProvider>
80+
</Suspense>
81+
</Layout.Section>
82+
</Layout>
83+
</Page>
18084
);
18185
}

clients/trieve-shopify-extension/app/routes/app.setup.tsx

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,24 +114,40 @@ export const loader = async (args: LoaderFunctionArgs) => {
114114
},
115115
);
116116
};
117-
// You've been redirected here from app._dashboard.tsx because your trieve <-> shopify connection doesn't have a database
118-
const { admin, session, sessionToken } = await authenticate.admin(
119-
args.request,
120-
);
117+
const { session, sessionToken } = await authenticate.admin(args.request);
121118

122119
let key = await prisma.apiKey.findFirst({
123120
where: {
124121
userId: (sessionToken.sub as string) ?? "",
125122
},
126123
});
127124
if (!key) {
128-
throw json({ message: "No Key" }, 401);
125+
throw new Response(
126+
JSON.stringify({
127+
message: "No key matching the current user (sessionToken.sub)",
128+
}),
129+
{
130+
headers: {
131+
"Content-Type": "application/json; charset=utf-8",
132+
},
133+
status: 401,
134+
},
135+
);
129136
}
130137

131138
if (!key.organizationId) {
132-
throw new Response("Unautorized, no organization tied to user session", {
133-
status: 401,
134-
});
139+
throw new Response(
140+
JSON.stringify({
141+
message:
142+
"No organization matching the current key (key.organizationId)",
143+
}),
144+
{
145+
headers: {
146+
"Content-Type": "application/json; charset=utf-8",
147+
},
148+
status: 401,
149+
},
150+
);
135151
}
136152

137153
const trieve = new TrieveSDK({
@@ -162,6 +178,18 @@ export const loader = async (args: LoaderFunctionArgs) => {
162178
tracking_id: session.shop,
163179
});
164180

181+
key = await prisma.apiKey.update({
182+
data: {
183+
currentDatasetId: shopDataset.id,
184+
},
185+
where: {
186+
userId_shop: {
187+
userId: sessionToken.sub as string,
188+
shop: `https://${session.shop}`,
189+
},
190+
},
191+
});
192+
} else {
165193
key = await prisma.apiKey.update({
166194
data: {
167195
currentDatasetId: shopDataset.id,

clients/trieve-shopify-extension/app/routes/app.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,21 @@ export default function App() {
4343
<Link to="/app" rel="home">
4444
Home
4545
</Link>
46+
<Link to="/app/component" rel="component">
47+
Component
48+
</Link>
49+
<Link to="/app/search" rel="search">
50+
Search
51+
</Link>
52+
<Link to="/app/chat" rel="chat">
53+
Chat
54+
</Link>
55+
<Link to="/app/recommendations" rel="recommendations">
56+
Recommendations
57+
</Link>
58+
<Link to="/app/settings" rel="settings">
59+
Settings
60+
</Link>
4661
</NavMenu>
4762
<Outlet />
4863
</AppProvider>

0 commit comments

Comments
 (0)