add global contexts

zaknesler · Jun 1, 2024 · fe71541 · fe71541
1 parent 6c9b634
commit fe71541
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 35 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full overflow-hidden">
+<html lang="en" class="size-full overflow-hidden">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,9 +9,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap" rel="stylesheet">
     <title>Blend</title>
   </head>
-  <body class="h-full bg-gray-100 dark:bg-gray-950 text-gray-800 dark:text-gray-200 relative overflow-hidden">
+  <body class="size-full bg-gray-100 dark:bg-gray-950 text-gray-800 dark:text-gray-200 relative overflow-hidden">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="h-full overflow-hidden"></div>
+    <div id="root" class="size-full overflow-hidden"></div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>
diff --git a/ui/src/components/entry/entry-item.tsx b/ui/src/components/entry/entry-item.tsx
@@ -5,8 +5,8 @@ import { type Component, Show, splitProps } from 'solid-js';
 import { getEntry } from '~/api/entries';
 import { DATA_ATTRIBUTES } from '~/constants/attributes';
 import { QUERY_KEYS } from '~/constants/query';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useFeeds } from '~/hooks/queries/use-feeds';
-import { useQueryState } from '~/hooks/use-query-state';
 import type { Entry } from '~/types/bindings';
 import { formatDate } from '~/utils/date';
 

diff --git a/ui/src/components/feed/feed-item.tsx b/ui/src/components/feed/feed-item.tsx
@@ -4,8 +4,8 @@ import { cx } from 'class-variance-authority';
 import { HiSolidRss } from 'solid-icons/hi';
 import { type Component, type JSX, Match, type Setter, Show, Switch, createMemo, createSignal } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useFeedsStats } from '~/hooks/queries/use-feeds-stats';
-import { useQueryState } from '~/hooks/use-query-state';
 import type { Feed } from '~/types/bindings';
 
 type FeedItemProps = {

diff --git a/ui/src/components/feed/feed-list.tsx b/ui/src/components/feed/feed-list.tsx
@@ -1,9 +1,9 @@
 import { useLocation } from '@solidjs/router';
 import { HiOutlineSquare3Stack3d } from 'solid-icons/hi';
 import { For, Match, Show, Switch, createSignal } from 'solid-js';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useFeeds } from '~/hooks/queries/use-feeds';
 import { useFeedsStats } from '~/hooks/queries/use-feeds-stats';
-import { useQueryState } from '~/hooks/use-query-state';
 import { BaseFeedItem, FeedItem } from './feed-item';
 
 export const FeedList = () => {

diff --git a/ui/src/components/nav/nav-row.tsx b/ui/src/components/nav/nav-row.tsx
@@ -5,7 +5,7 @@ import { cx } from 'class-variance-authority';
 import { HiOutlineQueueList, HiSolidArrowLeft, HiSolidXMark } from 'solid-icons/hi';
 import { type Component, type Setter, Show, createSignal } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
-import { useQueryState } from '~/hooks/use-query-state';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useViewport } from '~/hooks/use-viewport';
 import { LogoSquare } from '../layout/logo';
 import { MenuSettings } from '../menus/settings-menu';

diff --git a/ui/src/components/nav/nav-view-switcher.tsx b/ui/src/components/nav/nav-view-switcher.tsx
@@ -2,7 +2,7 @@ import { Tabs } from '@kobalte/core/tabs';
 import { cx } from 'class-variance-authority';
 import { For } from 'solid-js';
 import { VIEWS, VIEW_LABELS } from '~/constants/views';
-import { useQueryState } from '~/hooks/use-query-state';
+import { useQueryState } from '~/contexts/query-state-context';
 import type { View } from '~/types/bindings';
 
 export const NavViewSwitcher = () => {

diff --git a/ui/src/components/panels/entry-panel.tsx b/ui/src/components/panels/entry-panel.tsx
@@ -6,8 +6,8 @@ import { updateEntryAsRead } from '~/api/entries';
 import { EntryView } from '~/components/entry/entry-view';
 import { Panel } from '~/components/layout/panel';
 import { QUERY_KEYS } from '~/constants/query';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useInvalidateStats } from '~/hooks/queries/use-invalidate-stats';
-import { useQueryState } from '~/hooks/use-query-state';
 import { useViewport } from '~/hooks/use-viewport';
 import { Empty } from '../ui/empty';
 import { Spinner } from '../ui/spinner';

diff --git a/ui/src/components/panels/list-panel.tsx b/ui/src/components/panels/list-panel.tsx
@@ -12,7 +12,7 @@ import { Panel } from '~/components/layout/panel';
 import { MenuFeeds } from '~/components/menus/feeds-menu';
 import { NavRow } from '~/components/nav/nav-row';
 import { NavViewSwitcher } from '~/components/nav/nav-view-switcher';
-import { useQueryState } from '~/hooks/use-query-state';
+import { useQueryState } from '~/contexts/query-state-context';
 import { useViewport } from '~/hooks/use-viewport';
 
 export const ListPanel = () => {

diff --git a/ui/src/hooks/use-notifications.ts → ui/src/contexts/notifications-context.ts b/ui/src/hooks/use-notifications.ts → ui/src/contexts/notifications-context.ts
@@ -1,10 +1,20 @@
 import { WebSocket } from 'partysocket';
-import { createEffect, createSignal } from 'solid-js';
+import { createContext, createEffect, createSignal, useContext } from 'solid-js';
 import type { Notification } from '~/types/bindings';
 import { wsUrl } from '~/utils/url';
-import { useInvalidateFeed } from './queries/use-invalidate-feed';
+import { useInvalidateFeed } from '../hooks/queries/use-invalidate-feed';
+
+type NotificationsContextType = ReturnType<typeof makeNotificationsContext>;
+export const NotificationsContext = createContext<NotificationsContextType>();
 
 export const useNotifications = () => {
+  const notifications = useContext(NotificationsContext);
+  if (!notifications) throw new Error('NotificationsContext has not been initialized.');
+
+  return notifications;
+};
+
+export const makeNotificationsContext = () => {
   const [feedsRefreshing, setFeedsRefreshing] = createSignal<string[]>([]);
   const invalidateFeed = useInvalidateFeed();
 
@@ -45,4 +55,8 @@ export const useNotifications = () => {
         break;
     }
   });
+
+  return {
+    feedsRefreshing,
+  };
 };
diff --git a/ui/src/hooks/use-query-state.ts → ui/src/contexts/query-state-context.ts b/ui/src/hooks/use-query-state.ts → ui/src/contexts/query-state-context.ts
@@ -1,6 +1,16 @@
 import { useParams, useSearchParams } from '@solidjs/router';
+import { createContext, useContext } from 'solid-js';
 import { type FilterEntriesParams, SortDirection, View } from '~/types/bindings';
 
+type QueryStateContext = ReturnType<typeof makeQueryStateContext>;
+export const QueryStateContext = createContext<QueryStateContext>();
+
+export const useQueryState = () => {
+  const state = useContext(QueryStateContext);
+  if (!state) throw new Error('QueryStateContext has not been initialized.');
+  return state;
+};
+
 type RouterParams = {
   feed_uuid?: string;
   entry_uuid?: string;
@@ -11,10 +21,7 @@ type QueryParams = Partial<Pick<FilterEntriesParams, 'view' | 'sort'>>;
 export const DEFAULT_VIEW = View.Unread;
 export const DEFAULT_DIRECTION = SortDirection.Newest;
 
-/**
- * App state derived from query parameters.
- */
-export const useQueryState = () => {
+export const makeQueryStateContext = () => {
   const params = useParams<RouterParams>();
   const [query, setQuery] = useSearchParams<QueryParams>();
 

diff --git a/ui/src/hooks/queries/use-infinite-entries.ts b/ui/src/hooks/queries/use-infinite-entries.ts
@@ -4,7 +4,7 @@ import type { ApiPaginatedResponse } from '~/api';
 import { getEntries } from '~/api/entries';
 import { QUERY_KEYS } from '~/constants/query';
 import type { Entry } from '~/types/bindings';
-import { useQueryState } from '../use-query-state';
+import { useQueryState } from '../../contexts/query-state-context';
 
 export const useInfiniteEntries = () => {
   const state = useQueryState();

diff --git a/ui/src/hooks/queries/use-invalidate-feed.ts b/ui/src/hooks/queries/use-invalidate-feed.ts
@@ -1,7 +1,7 @@
 import { debounce, leadingAndTrailing } from '@solid-primitives/scheduled';
 import { useQueryClient } from '@tanstack/solid-query';
 import { QUERY_KEYS } from '~/constants/query';
-import { useQueryState } from '../use-query-state';
+import { useQueryState } from '../../contexts/query-state-context';
 
 const DEBOUNCE_MS = 500;
 

diff --git a/ui/src/hooks/use-list-nav.ts b/ui/src/hooks/use-list-nav.ts
@@ -4,7 +4,7 @@ import { useNavigate } from '@solidjs/router';
 import { createEffect } from 'solid-js';
 import type { Entry } from '~/types/bindings';
 import { findEntryItem } from '~/utils/entries';
-import { useQueryState } from './use-query-state';
+import { useQueryState } from '../contexts/query-state-context';
 import { useViewport } from './use-viewport';
 
 type UseListNavParams = {

diff --git a/ui/src/layouts/base.tsx b/ui/src/layouts/base.tsx
@@ -1,8 +1,3 @@
 import type { RouteSectionProps } from '@solidjs/router';
-import { useNotifications } from '~/hooks/use-notifications';
 
-export default (props: RouteSectionProps) => {
-  useNotifications();
-
-  return <div class="relative flex size-full">{props.children}</div>;
-};
+export default (props: RouteSectionProps) => <div class="relative flex size-full">{props.children}</div>;
diff --git a/ui/src/routes/feed.tsx b/ui/src/routes/feed.tsx
@@ -1,14 +1,30 @@
 import { Sidebar } from '~/components/layout/sidebar';
 import { EntryPanel } from '~/components/panels/entry-panel';
 import { ListPanel } from '~/components/panels/list-panel';
+import { NotificationsContext, makeNotificationsContext } from '~/contexts/notifications-context';
+import { QueryStateContext, makeQueryStateContext } from '~/contexts/query-state-context';
 
-export default () => (
-  <>
-    <Sidebar class="hidden xl:flex xl:w-sidebar xl:shrink-0" />
+export default () => {
+  const queryState = makeQueryStateContext();
 
-    <div class="flex size-full flex-1 flex-col overflow-hidden md:flex-row md:gap-4 md:p-4">
-      <ListPanel />
-      <EntryPanel />
-    </div>
-  </>
-);
+  return (
+    <QueryStateContext.Provider value={queryState}>
+      <Inner />
+    </QueryStateContext.Provider>
+  );
+};
+
+const Inner = () => {
+  const notifications = makeNotificationsContext();
+
+  return (
+    <NotificationsContext.Provider value={notifications}>
+      <Sidebar class="hidden xl:flex xl:w-sidebar xl:shrink-0" />
+
+      <div class="flex size-full flex-1 flex-col overflow-hidden md:flex-row md:gap-4 md:p-4">
+        <ListPanel />
+        <EntryPanel />
+      </div>
+    </NotificationsContext.Provider>
+  );
+};
diff --git a/ui/src/utils/entries.ts b/ui/src/utils/entries.ts
@@ -1,5 +1,5 @@
 import { DATA_ATTRIBUTES } from '~/constants/attributes';
-import { DEFAULT_DIRECTION } from '~/hooks/use-query-state';
+import { DEFAULT_DIRECTION } from '~/contexts/query-state-context';
 import { type Entry, SortDirection } from '~/types/bindings';
 
 /**