nandi.uk
This repository has no description
refactor: migrate useContext to "use" api
author
pdelfan
date
(May 21, 2026, 10:26 AM -0700)
commit
ac1b258d
ac1b258db97e472ee8e6582bf4c94ab0037eab61
parent
e7df79be
e7df79be1e5eeae128dc082ee14f7c7e1aa49135
+45
-58
+4
-4
src/webapp/features/cards/components/cardFilters/CardFilters.tsx
+4
-4
src/webapp/features/cards/components/cardFilters/CardFilters.tsx
···
4
4
import { useRouter, useSearchParams } from 'next/navigation';
5
5
import {
6
6
createContext,
7
-
useContext,
7
+
use,
8
8
useState,
9
9
ReactNode,
10
10
useOptimistic,
···
30
30
const FilterContext = createContext<FilterContextValue | null>(null);
31
31
32
32
const useFilterContext = () => {
33
-
const ctx = useContext(FilterContext);
33
+
const ctx = use(FilterContext);
34
34
if (!ctx)
35
35
throw new Error('CardFilter components must be wrapped in CardFiltersRoot');
36
36
return ctx;
···
42
42
const router = useRouter();
43
43
44
44
return (
45
-
<FilterContext.Provider
45
+
<FilterContext
46
46
value={{
47
47
router,
48
48
searchParams,
···
56
56
</Menu.Target>
57
57
<Menu.Dropdown w={200}>{props.children}</Menu.Dropdown>
58
58
</Menu>
59
-
</FilterContext.Provider>
59
+
</FilterContext>
60
60
);
61
61
}
62
62
+2
-2
src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx
+2
-2
src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx
···
64
64
component: ImageCard,
65
65
decorators: [
66
66
(Story) => (
67
-
<AuthContext.Provider value={mockAuthValue}>
67
+
<AuthContext value={mockAuthValue}>
68
68
<div style={{ maxWidth: 360 }}>
69
69
<Story />
70
70
</div>
71
-
</AuthContext.Provider>
71
+
</AuthContext>
72
72
),
73
73
],
74
74
args: {
+2
-2
src/webapp/features/cards/components/textCard/TextCard.stories.tsx
+2
-2
src/webapp/features/cards/components/textCard/TextCard.stories.tsx
···
62
62
component: TextCard,
63
63
decorators: [
64
64
(Story) => (
65
-
<AuthContext.Provider value={mockAuthValue}>
65
+
<AuthContext value={mockAuthValue}>
66
66
<div style={{ maxWidth: 360 }}>
67
67
<Story />
68
68
</div>
69
-
</AuthContext.Provider>
69
+
</AuthContext>
70
70
),
71
71
],
72
72
args: {
+2
-2
src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx
+2
-2
src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx
···
69
69
component: UrlCard,
70
70
decorators: [
71
71
(Story) => (
72
-
<AuthContext.Provider value={mockAuthValue}>
72
+
<AuthContext value={mockAuthValue}>
73
73
<div style={{ maxWidth: 400 }}>
74
74
<Story />
75
75
</div>
76
-
</AuthContext.Provider>
76
+
</AuthContext>
77
77
),
78
78
],
79
79
args: {
+4
-4
src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx
+4
-4
src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx
···
4
4
import { useRouter, useSearchParams } from 'next/navigation';
5
5
import {
6
6
createContext,
7
-
useContext,
7
+
use,
8
8
ReactNode,
9
9
Fragment,
10
10
useOptimistic,
···
26
26
const FilterContext = createContext<FilterContextValue | null>(null);
27
27
28
28
const useFilterContext = () => {
29
-
const ctx = useContext(FilterContext);
29
+
const ctx = use(FilterContext);
30
30
if (!ctx)
31
31
throw new Error(
32
32
'CollectionFilter components must be wrapped in CollectionFiltersRoot',
···
40
40
const router = useRouter();
41
41
42
42
return (
43
-
<FilterContext.Provider value={{ router, searchParams }}>
43
+
<FilterContext value={{ router, searchParams }}>
44
44
<Menu shadow="sm">
45
45
<Menu.Target>
46
46
<Button variant="light" color="gray" leftSection={<MdFilterList />}>
···
49
49
</Menu.Target>
50
50
<Menu.Dropdown w={200}>{props.children}</Menu.Dropdown>
51
51
</Menu>
52
-
</FilterContext.Provider>
52
+
</FilterContext>
53
53
);
54
54
}
55
55
+4
-4
src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
+4
-4
src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
···
3
3
import { Group, Button, Menu } from '@mantine/core';
4
4
import {
5
5
createContext,
6
-
useContext,
6
+
use,
7
7
ReactNode,
8
8
useOptimistic,
9
9
useTransition,
···
22
22
const FilterContext = createContext<FilterContextValue | null>(null);
23
23
24
24
const useFilterContext = () => {
25
-
const ctx = useContext(FilterContext);
25
+
const ctx = use(FilterContext);
26
26
if (!ctx)
27
27
throw new Error(
28
28
'ConnectionFilter components must be wrapped in ConnectionFilters.Root',
···
39
39
40
40
export function Root(props: RootProps) {
41
41
return (
42
-
<FilterContext.Provider
42
+
<FilterContext
43
43
value={{
44
44
connectionType: props.connectionType,
45
45
onConnectionTypeChange: props.onConnectionTypeChange,
···
55
55
{props.children}
56
56
</Menu.Dropdown>
57
57
</Menu>
58
-
</FilterContext.Provider>
58
+
</FilterContext>
59
59
);
60
60
}
61
61
+1
-4
src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
+1
-4
src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
···
85
85
<Group gap="xs" wrap="nowrap">
86
86
{notification.item.collections.map((collection) => (
87
87
<Box key={collection.id} miw={'100%'} w={'100%'}>
88
-
<CollectionCard
89
-
collection={collection}
90
-
size="compact"
91
-
/>
88
+
<CollectionCard collection={collection} size="compact" />
92
89
</Box>
93
90
))}
94
91
</Group>
+4
-4
src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx
+4
-4
src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx
···
43
43
component: ProfileMenu,
44
44
decorators: [
45
45
(Story) => (
46
-
<AuthContext.Provider value={mockAuthContext}>
46
+
<AuthContext value={mockAuthContext}>
47
47
<QueryCacheSeed profile={mockProfile}>
48
48
<Suspense
49
49
fallback={<MantineSkeleton w={38} h={38} radius="md" ml={4} />}
···
53
53
</div>
54
54
</Suspense>
55
55
</QueryCacheSeed>
56
-
</AuthContext.Provider>
56
+
</AuthContext>
57
57
),
58
58
],
59
59
};
···
69
69
export const BotAccount: Story = {
70
70
decorators: [
71
71
(Story) => (
72
-
<AuthContext.Provider value={mockAuthContext}>
72
+
<AuthContext value={mockAuthContext}>
73
73
<QueryCacheSeed
74
74
profile={{
75
75
...mockProfile,
···
95
95
</div>
96
96
</Suspense>
97
97
</QueryCacheSeed>
98
-
</AuthContext.Provider>
98
+
</AuthContext>
99
99
),
100
100
],
101
101
};
+4
-4
src/webapp/features/search/components/searchFilters/SearchFilters.tsx
+4
-4
src/webapp/features/search/components/searchFilters/SearchFilters.tsx
···
26
26
import { useDebouncedValue, upperFirst } from '@mantine/hooks';
27
27
import { useQuery } from '@tanstack/react-query';
28
28
import { useRouter, useSearchParams } from 'next/navigation';
29
-
import { createContext, useContext, useState, ReactNode } from 'react';
29
+
import { createContext, use, useState, ReactNode } from 'react';
30
30
import { searchBlueskyUsers } from '@/features/platforms/bluesky/lib/dal';
31
31
import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
32
32
import { UrlType, CollectionAccessType } from '@semble/types';
···
58
58
const FilterContext = createContext<FilterContextValue | null>(null);
59
59
60
60
const useFilterContext = () => {
61
-
const ctx = useContext(FilterContext);
61
+
const ctx = use(FilterContext);
62
62
if (!ctx)
63
63
throw new Error(
64
64
'SearchFilter components must be wrapped in SearchFilter.Root',
···
114
114
) : null;
115
115
116
116
return (
117
-
<FilterContext.Provider
117
+
<FilterContext
118
118
value={{
119
119
opened,
120
120
setOpened,
···
156
156
<Stack gap="xl">{props.children}</Stack>
157
157
</Container>
158
158
</Drawer>
159
-
</FilterContext.Provider>
159
+
</FilterContext>
160
160
);
161
161
}
162
162
+3
-5
src/webapp/hooks/useAuth.tsx
+3
-5
src/webapp/hooks/useAuth.tsx
···
3
3
import {
4
4
createContext,
5
5
useCallback,
6
-
useContext,
6
+
use,
7
7
useEffect,
8
8
useMemo,
9
9
ReactNode,
···
99
99
[query.data, query.isLoading, refreshAuth, logout],
100
100
);
101
101
102
-
return (
103
-
<AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
104
-
);
102
+
return <AuthContext value={contextValue}>{children}</AuthContext>;
105
103
};
106
104
107
105
export const useAuth = (): AuthContextType => {
108
-
const context = useContext(AuthContext);
106
+
const context = use(AuthContext);
109
107
if (!context) {
110
108
throw new Error('useAuth must be used within an AuthProvider');
111
109
}
+3
-7
src/webapp/lib/embed/rpcSessionProvider.tsx
+3
-7
src/webapp/lib/embed/rpcSessionProvider.tsx
···
1
1
'use client';
2
2
3
-
import { createContext, useContext, useEffect, useRef, useState } from 'react';
3
+
import { createContext, use, useEffect, useRef, useState } from 'react';
4
4
import { newMessagePortRpcSession, type RpcStub } from 'capnweb';
5
5
6
6
type EmbedBlockData =
···
68
68
};
69
69
}, [session]);
70
70
71
-
return (
72
-
<RpcSessionContext.Provider value={session}>
73
-
{children}
74
-
</RpcSessionContext.Provider>
75
-
);
71
+
return <RpcSessionContext value={session}>{children}</RpcSessionContext>;
76
72
}
77
73
78
74
export function useRpcSession() {
79
-
return useContext(RpcSessionContext);
75
+
return use(RpcSessionContext);
80
76
}
+1
-1
src/webapp/next-env.d.ts
+1
-1
src/webapp/next-env.d.ts
···
1
1
/// <reference types="next" />
2
2
/// <reference types="next/image-types/global" />
3
-
import "./.next/dev/types/routes.d.ts";
3
+
import "./.next/types/routes.d.ts";
4
4
5
5
// NOTE: This file should not be edited
6
6
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+3
-7
src/webapp/providers/settings.tsx
+3
-7
src/webapp/providers/settings.tsx
···
1
1
import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
2
-
import { createContext, useContext } from 'react';
2
+
import { createContext, use } from 'react';
3
3
4
4
const SettingsContext = createContext<ReturnType<
5
5
typeof useUserSettings
···
11
11
12
12
export function SettingsProvider(props: Props) {
13
13
const settings = useUserSettings();
14
-
return (
15
-
<SettingsContext.Provider value={settings}>
16
-
{props.children}
17
-
</SettingsContext.Provider>
18
-
);
14
+
return <SettingsContext value={settings}>{props.children}</SettingsContext>;
19
15
}
20
16
21
17
export function useSettings() {
22
-
const ctx = useContext(SettingsContext);
18
+
const ctx = use(SettingsContext);
23
19
if (!ctx) throw new Error('useSettings must be used inside SettingsProvider');
24
20
return ctx;
25
21
}