Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf542678

Browse files
committed
updated
1 parenta3beca7 commitf542678

File tree

11 files changed

+2287
-529
lines changed

11 files changed

+2287
-529
lines changed

‎packages/client/package.json

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,33 @@
33
"version":"0.1.0",
44
"private":true,
55
"dependencies": {
6-
"@hookform/resolvers":"^2.9.3",
7-
"@testing-library/jest-dom":"^5.16.4",
8-
"@testing-library/react":"^13.3.0",
9-
"@testing-library/user-event":"^13.5.0",
10-
"@trpc/client":"^9.25.3",
11-
"@trpc/react":"^9.25.3",
12-
"@types/jest":"^27.5.2",
13-
"@types/node":"^16.11.41",
14-
"@types/react":"^18.0.14",
15-
"@types/react-dom":"^18.0.5",
6+
"@hookform/resolvers":"^2.9.10",
7+
"@tanstack/react-query":"^4.13.0",
8+
"@tanstack/react-query-devtools":"^4.13.0",
9+
"@testing-library/jest-dom":"^5.16.5",
10+
"@testing-library/react":"^13.4.0",
11+
"@testing-library/user-event":"^14.4.3",
12+
"@trpc/client":"^10.0.0-proxy-beta.26",
13+
"@trpc/react":"^9.27.4",
14+
"@trpc/react-query":"^10.0.0-proxy-beta.26",
15+
"@trpc/server":"^10.0.0-proxy-beta.26",
16+
"@types/jest":"^29.2.0",
17+
"@types/node":"^18.11.6",
18+
"@types/react":"^18.0.23",
19+
"@types/react-dom":"^18.0.7",
1620
"react":"^18.2.0",
1721
"react-cookie":"^4.1.1",
1822
"react-dom":"^18.2.0",
19-
"react-hook-form":"^7.33.0",
20-
"react-query":"^3.39.1",
21-
"react-router-dom":"^6.3.0",
23+
"react-hook-form":"^7.38.0",
24+
"react-router-dom":"^6.4.2",
2225
"react-scripts":"5.0.1",
23-
"react-toastify":"^9.0.5",
24-
"server":"1.0.0",
25-
"tailwind-merge":"^1.3.0",
26-
"typescript":"^4.7.4",
27-
"web-vitals":"^2.1.4",
28-
"zod":"^3.17.3",
29-
"zustand":"^4.0.0-rc.1"
26+
"react-toastify":"^9.0.8",
27+
"server":"^1.0.37",
28+
"tailwind-merge":"^1.7.0",
29+
"typescript":"^4.8.4",
30+
"web-vitals":"^3.0.4",
31+
"zod":"^3.19.1",
32+
"zustand":"^4.1.3"
3033
},
3134
"scripts": {
3235
"start":"react-scripts start",
@@ -53,8 +56,8 @@
5356
]
5457
},
5558
"devDependencies": {
56-
"autoprefixer":"^10.4.7",
57-
"postcss":"^8.4.14",
58-
"tailwindcss":"^3.1.4"
59+
"autoprefixer":"^10.4.12",
60+
"postcss":"^8.4.18",
61+
"tailwindcss":"^3.2.1"
5962
}
6063
}

‎packages/client/src/App.tsx

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import{useState}from'react';
2-
import{QueryClientProvider,QueryClient}from'react-query';
3-
import{ReactQueryDevtools}from'react-query/devtools';
4-
import{useRoutes}from'react-router-dom';
5-
import{getFetch}from'@trpc/client';
6-
importroutesfrom'./router';
7-
import{trpc}from'./trpc';
8-
importAuthMiddlewarefrom'./middleware/AuthMiddleware';
1+
import{useState}from"react";
2+
import{QueryClientProvider,QueryClient}from"@tanstack/react-query";
3+
import{ReactQueryDevtools}from"@tanstack/react-query-devtools";
4+
import{useRoutes}from"react-router-dom";
5+
import{getFetch,httpBatchLink,loggerLink}from"@trpc/client";
6+
importroutesfrom"./router";
7+
import{trpc}from"./trpc";
8+
importAuthMiddlewarefrom"./middleware/AuthMiddleware";
99

1010
functionAppContent(){
1111
constcontent=useRoutes(routes);
@@ -23,16 +23,22 @@ function App() {
2323
},
2424
})
2525
);
26+
2627
const[trpcClient]=useState(()=>
2728
trpc.createClient({
28-
url:'http://localhost:8000/api/trpc',
29-
fetch:async(input,init?)=>{
30-
constfetch=getFetch();
31-
returnfetch(input,{
32-
...init,
33-
credentials:'include',
34-
});
35-
},
29+
links:[
30+
loggerLink(),
31+
httpBatchLink({
32+
url:"http://localhost:8000/api/trpc",
33+
fetch:async(input,init?)=>{
34+
constfetch=getFetch();
35+
returnfetch(input,{
36+
...init,
37+
credentials:"include",
38+
});
39+
},
40+
}),
41+
],
3642
})
3743
);
3844
return(

‎packages/client/src/components/Header.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import{useQueryClient}from'react-query';
2-
import{Link}from'react-router-dom';
3-
importuseStorefrom'../store';
4-
import{trpc}from'../trpc';
1+
import{useQueryClient}from"@tanstack/react-query";
2+
import{Link}from"react-router-dom";
3+
importuseStorefrom"../store";
4+
import{trpc}from"../trpc";
55

66
constHeader=()=>{
77
conststore=useStore();
88
constuser=store.authUser;
99

1010
constqueryClient=useQueryClient();
11-
const{mutate:logoutUser}=trpc.useMutation(['auth.logout'],{
11+
const{mutate:logoutUser}=trpc.logoutUser.useMutation({
1212
onSuccess(data){
1313
queryClient.clear();
14-
document.location.href='/login';
14+
document.location.href="/login";
1515
},
1616
onError(error){
1717
queryClient.clear();
18-
document.location.href='/login';
18+
document.location.href="/login";
1919
},
2020
});
2121

@@ -24,28 +24,28 @@ const Header = () => {
2424
};
2525

2626
return(
27-
<headerclassName='bg-white h-20'>
28-
<navclassName='h-full flex justify-between container items-center'>
27+
<headerclassName="bg-white h-20">
28+
<navclassName="h-full flex justify-between container items-center">
2929
<div>
30-
<Linkto='/'className='text-ct-dark-600 text-2xl font-semibold'>
30+
<Linkto="/"className="text-ct-dark-600 text-2xl font-semibold">
3131
CodevoWeb
3232
</Link>
3333
</div>
34-
<ulclassName='flex items-center gap-4'>
34+
<ulclassName="flex items-center gap-4">
3535
<li>
36-
<Linkto='/'className='text-ct-dark-600'>
36+
<Linkto="/"className="text-ct-dark-600">
3737
Home
3838
</Link>
3939
</li>
4040
{!user&&(
4141
<>
4242
<li>
43-
<Linkto='/register'className='text-ct-dark-600'>
43+
<Linkto="/register"className="text-ct-dark-600">
4444
SignUp
4545
</Link>
4646
</li>
4747
<li>
48-
<Linkto='/login'className='text-ct-dark-600'>
48+
<Linkto="/login"className="text-ct-dark-600">
4949
Login
5050
</Link>
5151
</li>
@@ -54,12 +54,12 @@ const Header = () => {
5454
{user&&(
5555
<>
5656
<li>
57-
<Linkto='/profile'className='text-ct-dark-600'>
57+
<Linkto="/profile"className="text-ct-dark-600">
5858
Profile
5959
</Link>
6060
</li>
61-
<liclassName='cursor-pointer'>Create Post</li>
62-
<liclassName='cursor-pointer'onClick={handleLogout}>
61+
<liclassName="cursor-pointer">Create Post</li>
62+
<liclassName="cursor-pointer"onClick={handleLogout}>
6363
Logout
6464
</li>
6565
</>

‎packages/client/src/components/requireUser.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import{useCookies}from'react-cookie';
2-
import{Navigate,Outlet,useLocation}from'react-router-dom';
3-
import{IUser}from'../libs/types';
4-
importuseStorefrom'../store';
5-
import{trpc}from'../trpc';
6-
importFullScreenLoaderfrom'./FullScreenLoader';
1+
import{useCookies}from"react-cookie";
2+
import{Navigate,Outlet,useLocation}from"react-router-dom";
3+
import{IUser}from"../libs/types";
4+
importuseStorefrom"../store";
5+
import{trpc}from"../trpc";
6+
importFullScreenLoaderfrom"./FullScreenLoader";
77

88
constRequireUser=({ allowedRoles}:{allowedRoles:string[]})=>{
9-
const[cookies]=useCookies(['logged_in']);
9+
const[cookies]=useCookies(["logged_in"]);
1010
constlocation=useLocation();
1111
conststore=useStore();
1212

1313
const{
1414
isLoading,
1515
isFetching,
1616
data:user,
17-
}=trpc.useQuery(['users.me'],{
17+
}=trpc.getMe.useQuery(undefined,{
1818
retry:1,
1919
select:(data)=>data.data.user,
2020
onSuccess:(data)=>{
2121
store.setAuthUser(dataasIUser);
2222
},
2323
onError:(error)=>{
2424
console.log(error);
25-
if(error.message.includes('Could not refresh access token')){
26-
document.location.href='/login';
25+
if(error.message.includes("Could not refresh access token")){
26+
document.location.href="/login";
2727
}
2828
},
2929
});
@@ -38,9 +38,9 @@ const RequireUser = ({ allowedRoles }: { allowedRoles: string[] }) => {
3838
allowedRoles.includes(user?.roleasstring) ?(
3939
<Outlet/>
4040
) :cookies.logged_in&&user ?(
41-
<Navigateto='/unauthorized'state={{from:location}}replace/>
41+
<Navigateto="/unauthorized"state={{from:location}}replace/>
4242
) :(
43-
<Navigateto='/login'state={{from:location}}replace/>
43+
<Navigateto="/login"state={{from:location}}replace/>
4444
);
4545
};
4646

‎packages/client/src/middleware/AuthMiddleware.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import{useCookies}from'react-cookie';
2-
importFullScreenLoaderfrom'../components/FullScreenLoader';
3-
importReactfrom'react';
4-
import{trpc}from'../trpc';
5-
import{IUser}from'../libs/types';
6-
import{useQueryClient}from'react-query';
7-
importuseStorefrom'../store';
1+
import{useCookies}from"react-cookie";
2+
importFullScreenLoaderfrom"../components/FullScreenLoader";
3+
importReactfrom"react";
4+
import{trpc}from"../trpc";
5+
import{IUser}from"../libs/types";
6+
import{useQueryClient}from"@tanstack/react-query";
7+
importuseStorefrom"../store";
88

99
typeAuthMiddlewareProps={
1010
children:React.ReactElement;
1111
};
1212

1313
constAuthMiddleware:React.FC<AuthMiddlewareProps>=({ children})=>{
14-
const[cookies]=useCookies(['logged_in']);
14+
const[cookies]=useCookies(["logged_in"]);
1515
conststore=useStore();
1616

1717
constqueryClient=useQueryClient();
18-
const{ refetch}=trpc.useQuery(['auth.refresh'],{
18+
const{ refetch}=trpc.refreshToken.useQuery(undefined,{
1919
retry:1,
2020
enabled:false,
2121
onSuccess:(data)=>{
22-
queryClient.invalidateQueries('users.me');
22+
queryClient.invalidateQueries([["getMe"]]);
2323
},
2424
});
2525

26-
constquery=trpc.useQuery(['users.me'],{
26+
constquery=trpc.getMe.useQuery(undefined,{
2727
enabled:!!cookies.logged_in,
2828
retry:1,
2929
select:(data)=>data.data.user,
@@ -32,21 +32,21 @@ const AuthMiddleware: React.FC<AuthMiddlewareProps> = ({ children }) => {
3232
},
3333
onError:(error)=>{
3434
letretryRequest=true;
35-
if(error.message.includes('must be logged in')&&retryRequest){
35+
if(error.message.includes("must be logged in")&&retryRequest){
3636
retryRequest=false;
3737
try{
3838
refetch({throwOnError:true});
3939
}catch(err:any){
4040
console.log(err);
41-
if(err.message.includes('Could not refresh access token')){
42-
document.location.href='/login';
41+
if(err.message.includes("Could not refresh access token")){
42+
document.location.href="/login";
4343
}
4444
}
4545
}
4646
},
4747
});
4848

49-
if(query.isLoading){
49+
if(query.isLoading&&cookies.logged_in){
5050
return<FullScreenLoader/>;
5151
}
5252

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp