@chem-po/react-web 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,8 +40,8 @@
     "react-window-infinite-loader": "^1.0.9",
     "@hello-pangea/dnd": "^18.0.1",
     "zustand": "^4.3.3",
-    "@chem-po/react": "0.0.11",
-    "@chem-po/core": "0.0.11"
+    "@chem-po/core": "0.0.12",
+    "@chem-po/react": "0.0.12"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/box/MobileFrame/index.tsx

@@ -1,11 +1,12 @@
 import { Box, Center, Flex, useColorModeValue } from '@chakra-ui/react'
 import { cssGradients } from '@chem-po/core'
-import { MobileFrameProvider, useScreen, useViews, View, ViewsProvider } from '@chem-po/react'
+import { MobileFrameProvider, useScreen, View } from '@chem-po/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import React, { PropsWithChildren, ReactNode, useMemo, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { matchRoutes, useLocation, useOutlet } from 'react-router-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
+import { useViews, ViewsProvider } from '../../../contexts/view'
 import { ForceMobile } from '../../modal/ForceMobile'
 import { NAV_BAR_HEIGHT, NavBar } from '../../nav/NavBar'
 import { ErrorView } from '../../view/ErrorView'

package/src/components/list/DataList.tsx

@@ -12,7 +12,7 @@ import { ListViewProps } from './types'
 
 export const DataList = <T extends AnyObject>({
   list,
-  basePath,
+  // basePath,
   flexProps,
   infiniteScroll,
   ...rest
@@ -21,7 +21,7 @@ export const DataList = <T extends AnyObject>({
     adapter: { db },
   } = useBackendBase()
   const { baseQuery } = list
-  const state = useDataListData(list, infiniteScroll, basePath)
+  const state = useDataListData(list, infiniteScroll)
   const data = usePaginatedQuery<T>(db, baseQuery, !!infiniteScroll)
   return (
     <PaginatedListProvider<T> state={state} data={data}>

package/src/components/list/types.ts

@@ -23,7 +23,4 @@ export type ListViewProps<T extends AnyObject> = ListProviderProps<T> & {
   modals?: ReactNode
 }
 
-export type ListContentProps<T extends AnyObject> = Omit<
-  ListViewProps<T>,
-  'list' | 'basePath' | 'flexProps'
->
+export type ListContentProps<T extends AnyObject> = Omit<ListViewProps<T>, 'list' | 'flexProps'>

package/src/components/nav/NavBar.tsx

@@ -1,8 +1,9 @@
 import { Button, Flex, Image, useColorModeValue } from '@chakra-ui/react'
 import { palette } from '@chem-po/core'
-import { useViews, View } from '@chem-po/react'
+import { View } from '@chem-po/react'
 import React, { PropsWithChildren, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { useViews } from '../../contexts/view'
 
 export const NAV_BAR_HEIGHT = 50
 

package/src/contexts/index.ts

@@ -1 +1,2 @@
 export * from './theme'
+export * from './view'

package/src/contexts/view.tsx

@@ -0,0 +1,26 @@
+import { BaseUserData, getUserViews, getViewRoutes, View } from '@chem-po/core'
+import { useAuth } from '@chem-po/react'
+import React, { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react'
+import { RouteObject } from 'react-router'
+
+export const ViewsContext = createContext<
+  Array<{ view: View<FC, BaseUserData>; routes: RouteObject[] }>
+>([])
+
+export const useViews = () => useContext(ViewsContext)
+
+export const ViewsProvider = ({
+  children,
+  views,
+}: PropsWithChildren & { views: Array<View<FC, BaseUserData>> }) => {
+  const user = useAuth(s => s.user)
+  const value = useMemo(
+    () =>
+      getUserViews(views, user).map(view => ({
+        view,
+        routes: getViewRoutes(view),
+      })),
+    [user, views],
+  )
+  return <ViewsContext.Provider value={value}>{children}</ViewsContext.Provider>
+}