11// dashboard.tsx
22import { 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" ;
105import { sdkFromKey , validateTrieveAuth } from "app/auth" ;
116import {
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
4743export 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}
0 commit comments