Skip to content

Commit 0558ca1

Browse files
relusionrelusion
committed
refactor: Update frontend dependencies
- Remove unused code and imports in backend files - Add bootstrap v5.3.3 as a frontend dependency - Update package-lock.json and package.json - Update App.js to import bootstrap CSS - Improve loading state in App.js - Add error handling and fetch posts functionality in App.js - Add addNewPost functionality in App.js - Update UI in App.js to display user information and posts Related to keystonejs#9322, keystonejs#9320, keystonejs#9262
1 parent eea2457 commit 0558ca1

File tree

3 files changed

+165
-20
lines changed

3 files changed

+165
-20
lines changed

‎examples/custom-session-az-swa/frontend/package-lock.json‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/custom-session-az-swa/frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@testing-library/jest-dom": "^5.17.0",
88
"@testing-library/react": "^13.4.0",
99
"@testing-library/user-event": "^13.5.0",
10+
"bootstrap": "^5.3.3",
1011
"react": "^18.3.1",
1112
"react-dom": "^18.3.1",
1213
"react-scripts": "5.0.1",

‎examples/custom-session-az-swa/frontend/src/App.js‎

Lines changed: 135 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1-
// src/App.js
21
import React, { useState, useEffect } from 'react';
2+
import 'bootstrap/dist/css/bootstrap.min.css';
33

4-
function App() {
4+
export default function App() {
55
const [user, setUser] = useState(null);
66
const [loading, setLoading] = useState(true);
7+
const [posts, setPosts] = useState(null);
8+
const [error, setError] = useState(null);
9+
const [newPostId, setNewPostId] = useState(null);
710

811
useEffect(() => {
912
fetchUserInfo();
1013
}, []);
1114

15+
useEffect(() => {
16+
if (user) {
17+
fetchPosts();
18+
}
19+
}, [user]);
20+
1221
const fetchUserInfo = async () => {
1322
try {
1423
const response = await fetch('/.auth/me');
@@ -23,6 +32,69 @@ function App() {
2332
}
2433
};
2534

35+
const fetchPosts = async () => {
36+
try {
37+
const response = await fetch('/api/graphql', {
38+
method: 'POST',
39+
headers: {
40+
'Content-Type': 'application/json',
41+
},
42+
body: JSON.stringify({
43+
query: `
44+
{
45+
posts {
46+
id, title
47+
}
48+
}
49+
`
50+
}),
51+
});
52+
const result = await response.json();
53+
if (result.errors) {
54+
throw new Error(result.errors[0].message);
55+
}
56+
setPosts(result.data.posts);
57+
} catch (error) {
58+
console.error('Error fetching posts:', error);
59+
setError(error.message);
60+
}
61+
};
62+
63+
const addNewPost = async () => {
64+
try {
65+
const response = await fetch('/api/graphql', {
66+
method: 'POST',
67+
headers: {
68+
'Content-Type': 'application/json',
69+
},
70+
body: JSON.stringify({
71+
query: `
72+
mutation addNewPost($data: PostCreateInput!) {
73+
createPost(data: $data) {
74+
id
75+
}
76+
}
77+
`,
78+
variables: {
79+
data: {
80+
content: "Random Content",
81+
title: "Random Title"
82+
}
83+
}
84+
}),
85+
});
86+
const result = await response.json();
87+
if (result.errors) {
88+
throw new Error(result.errors[0].message);
89+
}
90+
setNewPostId(result.data.createPost.id);
91+
fetchPosts(); // Refresh the posts list
92+
} catch (error) {
93+
console.error('Error adding new post:', error);
94+
setError(error.message);
95+
}
96+
};
97+
2698
const login = () => {
2799
window.location.href = '/.auth/login/aad';
28100
};
@@ -32,27 +104,70 @@ function App() {
32104
};
33105

34106
if (loading) {
35-
return <div>Loading...</div>;
107+
return (
108+
<div className="d-flex justify-content-center align-items-center min-vh-100 bg-light">
109+
<div className="spinner-grow text-primary" role="status">
110+
<span className="visually-hidden">Loading...</span>
111+
</div>
112+
</div>
113+
);
36114
}
37115

38116
return (
39-
<div>
40-
<h1>Azure Static Web Apps Authentication Example</h1>
41-
{user ? (
42-
<div>
43-
<h2>Welcome, {user.userDetails}!</h2>
44-
<p>User ID: {user.userId}</p>
45-
<p>User Roles: {user.userRoles.join(', ')}</p>
46-
<button onClick={logout}>Logout</button>
117+
<div className="min-vh-100 bg-light d-flex align-items-center justify-content-center py-5">
118+
<div className="container">
119+
<div className="row justify-content-center">
120+
<div className="col-md-8 col-lg-6">
121+
<div className="card border-0 shadow-sm rounded-3">
122+
<div className="card-body p-4">
123+
<h2 className="card-title text-center mb-4 fw-bold text-primary">Azure Authentication</h2>
124+
{user ? (
125+
<div className="text-center">
126+
<h4 className="mb-3">Welcome, {user.userDetails}!</h4>
127+
<p className="text-muted mb-1">User ID: {user.userId}</p>
128+
<p className="text-muted mb-4">Roles: {user.userRoles.join(', ')}</p>
129+
<button className="btn btn-outline-danger rounded-pill px-4 mb-4" onClick={logout}>Sign Out</button>
130+
131+
<div className="mt-4 p-3 bg-light rounded">
132+
<h5 className="mb-3">GraphQL Query Results</h5>
133+
{error ? (
134+
<div className="alert alert-danger" role="alert">
135+
Error: {error}
136+
</div>
137+
) : posts ? (
138+
<>
139+
<ul className="list-group mb-3">
140+
{posts.map(post => (
141+
<li key={post.id} className="list-group-item">Post Title: {post.title}</li>
142+
))}
143+
</ul>
144+
<button className="btn btn-success rounded-pill px-4" onClick={addNewPost}>
145+
Add New Post
146+
</button>
147+
{newPostId && (
148+
<div className="alert alert-success mt-3" role="alert">
149+
New post created with ID: {newPostId}
150+
</div>
151+
)}
152+
</>
153+
) : (
154+
<p className="text-muted">Loading posts...</p>
155+
)}
156+
</div>
157+
</div>
158+
) : (
159+
<div className="text-center">
160+
<p className="text-muted mb-4">Please sign in to access your account and view posts.</p>
161+
<button className="btn btn-primary rounded-pill px-4" onClick={login}>
162+
Sign In with Azure AD
163+
</button>
164+
</div>
165+
)}
166+
</div>
167+
</div>
168+
</div>
47169
</div>
48-
) : (
49-
<div>
50-
<p>You are not logged in.</p>
51-
<button onClick={login}>Login with Azure AD</button>
52-
</div>
53-
)}
170+
</div>
54171
</div>
55172
);
56-
}
57-
58-
export default App;
173+
}

0 commit comments

Comments
 (0)