jshalstr/crud-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
jshalstr
2024-05-21 14:13:25 +08:00
commit 88859a806a
36 changed files with 19806 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

70
README.md Normal file
View File

@@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

18364
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

63
package.json Normal file
View File

@@ -0,0 +1,63 @@
{
"name": "example-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@mantine/core": "^7.9.0",
"@mantine/form": "^7.9.0",
"@mantine/hooks": "^7.9.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.8",
"moment": "^2.30.1",
"nanoid": "^5.0.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.51.4",
"react-router-dom": "^6.23.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@types/axios": "^0.14.0",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@types/recoil": "^0.0.9",
"source-map-loader": "^5.0.0",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5"
},
"overrides": {
"react-scripts": {
"typescript": "^5"
}
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

43
public/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
src/App.css Normal file
View File

@@ -0,0 +1,38 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

147
src/App.jsx Normal file
View File

@@ -0,0 +1,147 @@
import {
// RouterProvider,
Routes,
Route,
useNavigate,
// createBrowserRouter,
// redirect,
} from "react-router-dom";
import Posts from "./routes/Posts";
import ErrorPage from "./routes/ErrorPage";
import Profile from "./routes/Profile";
import Login from "./routes/Login";
import Root from "./routes/Root";
import { useEffect, useRef, useState } from "react";
import ProtectedRoute from "./components/ProtectedRoute";
import { http } from "./middleware/axiosConfig";
import { UserContext } from "./middleware/userContext";
import { MantineProvider } from "@mantine/core";
import { useRecoilState } from "recoil";
import { userState } from "./states/userState";
export default function App() {
//NEW-------------------
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
// Keep track of if the user is logged in; initial value is based on the session storage
// useRef for its synchronous nature; errors when using useState
const loggedIn = useRef(
sessionStorage.getItem("loggedIn") == "true" || false
);
// Initial value is based on the session storage
//OLD--------------
// const [user, setUser] = useState(sessionStorage.getItem("user") || {})
//NEW------------------
const [user, setUser] = useRecoilState(userState);
// On mount, check if the user is logged in and update the user state based on the session storage
// useEffect(() => {
// if (loggedIn.current) {
// setUser(JSON.parse(sessionStorage.getItem("user")))
// }
// if (!loggedIn.current) {
// setUser({})
// }
// }, [])
// On successful login, update the user state, login status and session storage
const login = async () => {
try {
// Send a GET request to the /api/user route and retrieve the user
const res = await http.get("/api/user");
sessionStorage.setItem("loggedIn", true);
loggedIn.current = true;
sessionStorage.setItem("user", JSON.stringify(res.data));
setUser(res.data);
} catch (error) {
console.error(error);
}
};
// Refresh the user state and session storage
const refreshUser = async () => {
setLoading(true);
try {
// Send a GET request to the /api/user route and retrieve the user
const res = await http.get("/api/user");
setUser(res.data);
// sessionStorage.setItem("user", JSON.stringify(res.data))
} catch (error) {
console.error(error);
setUser(null);
navigate("/login");
}
setLoading(false);
};
// On logout, update the user state, login status and session storage
const logout = async () => {
try {
const res = await http.post("/api/logout");
sessionStorage.setItem("loggedIn", false);
loggedIn.current = false;
sessionStorage.setItem("user", JSON.stringify({}));
setUser(null);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
refreshUser();
}, []);
// const router = createBrowserRouter([
// {
// // Main route
// path: "/",
// element: (
// <ProtectedRoute
// element={<Root logout={logout} />}
// loggedIn={loggedIn.current}
// />
// ),
// errorElement: <ErrorPage />,
// // Nested routes for outlet
// children: [
// {
// path: "posts",
// element: <ProtectedRoute element={<Posts />} loggedIn={loggedIn.current} />,
// },
// {
// path: "profile",
// element: <ProtectedRoute element={<Profile />} loggedIn={loggedIn.current} />,
// },
// ],
// },
// {
// path: "/login",
// element: <Login onLogin={login} />,
// },
// ]);
return (
// Provide the user and refreshUser function to the children routes
<MantineProvider>
{/* <UserContext.Provider value={[user, refreshUser]}> */}
{/* <RouterProvider router={router} /> */}
<Routes>
<Route element={<ProtectedRoute user={user} loading={loading} logout={logout} />}>
<Route
path="/profile"
element={<Profile refreshUser={refreshUser} />}
/>
<Route path="/posts" element={<Posts />} />
</Route>
<Route
path="/login"
element={<Login onLogin={login} loading={loading} />}
/>
<Route path="*" element={<ErrorPage />} />
</Routes>
{/* </UserContext.Provider> */}
</MantineProvider>
);
}

8
src/App.test.js Normal file
View File

@@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

127
src/components/AddEditModal.tsx Normal file
View File

@@ -0,0 +1,127 @@
import { Alert, Button, Input, InputLabel, Modal } from "@mantine/core"
import { useForm, SubmitHandler, Form } from "react-hook-form"
import { http } from "../middleware/axiosConfig"
import { useEffect, useState } from "react"
interface Props {
opened: boolean
onClose: () => void
fetchPosts: () => void
fetchComment: () => void
modalMode: "Add Post" | "Edit Post" | "Edit Comment"
id?: string
content?: string
}
export default function AddEditModal({opened, onClose, fetchPosts, fetchComment, modalMode, id, content}: Props) {
const {
register,
resetField,
handleSubmit,
setValue,
formState: { errors },
} = useForm()
//NEW-------------
const [formMsg, setFormMsg] = useState(null)
//NEW-------------
useEffect(() => {
if (content && id) {
setValue("content", content)
} else {
setValue("content", "")
}
//added opened so it will always trigger this every open of the modal
}, [opened])
//OLD
// // When the user submits the form
// const onSubmit = (data) => {
// // If the modal mode is Add Post
// if (modalMode === "Add Post") {
// // Send a POST request to the /api/posts route with the content in the request body
// // Inserts a new post into the database
// http.post("api/posts", data).then(() => {
// onClose();
// resetField("content");
// // Refreshes the posts
// fetchPosts();
// });
// // If the modal mode is Edit Post
// } else if (modalMode === "Edit Post") {
// // Send a PUT request to the /api/posts/:id route with the content in the request body
// // Updates the post in the database
// http.put(`api/posts/${id}`, data).then(() => {
// onClose();
// resetField("content");
// // Refreshes the posts
// fetchPosts();
// });
// // If the modal mode is Edit Comment
// } else if (modalMode === "Edit Comment") {
// // Send a PUT request to the /api/comments/:id route with the content in the request body
// // Updates the comment in the database
// http.put(`api/comments/${id}`, data).then(() => {
// onClose();
// resetField("content");
// // Refreshes the comments
// fetchComment();
// });
// }
// };
//-------------NEW
// When the user submits the form
const onSubmit = async (data) => {
setFormMsg(null)
try {
// If the modal mode is Add Post
if (modalMode === "Add Post") {
// Send a POST request to the /api/posts route with the content in the request body
// Inserts a new post into the database
await http.post("api/posts", data)
// If the modal mode is Edit Post
} else if (modalMode === "Edit Post") {
// Send a PUT request to the /api/posts/:id route with the content in the request body
// Updates the post in the database
await http.put(`api/posts/${id}`, data)
// If the modal mode is Edit Comment
} else if (modalMode === "Edit Comment") {
// Send a PUT request to the /api/comments/:id route with the content in the request body
// Updates the comment in the database
await http.put(`api/comments/${id}`, data)
fetchComment();
}
onClose()
resetField("content")
// Refreshes the posts
fetchPosts()
} catch (err) {
console.error(err)
if (err.response && err.response.data) {
const { error } = err.response.data
if (error) {
setFormMsg(error)
}
}
}
}
return (
<Modal opened={opened} onClose={onClose} title={modalMode}>
<form onSubmit={handleSubmit(onSubmit)}>
{formMsg && <Alert color="red">{formMsg}</Alert>}
<InputLabel>Content</InputLabel>
<Input {...register("content")} />
{/* Submit button; changes based on modal mode */}
<Button type="submit">
{modalMode === "Add Post"
? "Post"
: modalMode === "Edit Comment" || modalMode === "Edit Post"
? "Edit"
: ""}
</Button>
</form>
</Modal>
)
}

182
src/components/AuthenticationForm.jsx Normal file
View File

@@ -0,0 +1,182 @@
import {
Anchor,
Button,
Checkbox,
Divider,
Group,
Paper,
PasswordInput,
Space,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useToggle } from "@mantine/hooks";
import { useForm } from "react-hook-form";
import { http } from "../middleware/axiosConfig";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
// The login/registration form component that allows users to either register or login
// It can be toggled between login and registration
export default function AuthenticationForm({ onLogin }) {
const {
register,
resetField,
handleSubmit,
watch,
formState: { errors },
} = useForm();
// Toggle between login and registration
const [type, toggle] = useToggle(["login", "register"]);
const [credsError, setCredsError] = useState(false);
const [regSuccessful, setRegSuccessful] = useState(false);
useEffect(() => {
getCsrfToken();
}, []);
const getCsrfToken = async () => {
await http.get("/sanctum/csrf-cookie");
console.log("SUCCESS")
}
// Called when the login/register button is clicked
const onSubmit = async (data) => {
if (type === "login") {
try {
setCredsError(false);
// Retrieve the CSRF token neccessary for authentication
// Causes a 419 error if not called
await http.get("/sanctum/csrf-cookie");
// Send a POST request to the /api/login route with the user's email and password in the request body
const res = await http.post("api/login", {
email: data.email,
password: data.password,
});
if (res.status === 200) {
// Call the onLogin function passed from the parent component
await onLogin();
}
} catch (error) {
if (error.response.status === 401) {
setCredsError(true);
}
}
} else {
try {
// Send a POST request to the /api/register route with the user's name, email and password in the request body
const res = await http.post("api/register", {
name: data.name,
email: data.email,
password: data.password,
});
if (res.status === 201) {
setRegSuccessful(true);
}
} catch (error) {
console.error(error);
}
}
};
return (
<Paper radius="md" p="xl" withBorder>
<Text size="lg" fw={500}>
Welcome to MeepMoop, please {type} to access the site
</Text>
<Space h="md" />
<form onSubmit={handleSubmit(onSubmit)}>
<Stack>
{/* Input for name if registering */}
{type === "register" && (
<TextInput
required
label="Name"
placeholder="Your name"
{...register("name")}
radius="md"
/>
)}
{/* Input for email */}
<TextInput
required
label="Email"
placeholder="hello@meepmoop.com"
// Must have @
{...register("email", { required: true, pattern: /^\S+@\S+$/i })}
radius="md"
error={errors.email ? "Please enter a valid email" : null}
/>
{/* Input for password */}
{type === "login" ? (
<PasswordInput
required
label="Password"
placeholder="Your password"
// No pattern and no min required for login
{...register("password", { required: true })}
radius="md"
// Error message if password is not valid and on login mode
error={
type === "login" && errors.password
? "Please enter a valid password"
: null
}
/>
) : (
<PasswordInput
required
label="Password"
placeholder="Your password"
// Min 8 characters, 1 letter and 1 number, no spaces, only $ and @ allowed
{...register("password", {
required: true,
min: 8,
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$]{8,}$/i,
})}
radius="md"
// Error message if password is not valid and on register mode
error={
type === "register" && errors.password
? "Please enter a valid password: at least 8 characters, 1 letter and 1 number, no spaces, only $ and @ allowed"
: null
}
/>
)}
</Stack>
<Group justify="space-between" mt="xl">
{credsError && type === "login" && (
<Text ta="center" c="red">
Log in failed. Make sure your credentials are correct.
</Text>
)}
{regSuccessful && type === "register" && (
<Text ta="center" c="green">
Registration successful. Please log in.
</Text>
)
}
<Anchor
component="button"
type="button"
c="dimmed"
onClick={() => toggle()}
size="xs"
>
{type === "register"
? "Already have an account? Login"
: "Don't have an account? Register"}
</Anchor>
<Button type="submit" radius="xl">
{type.toUpperCase()}
</Button>
</Group>
</form>
</Paper>
);
}

44
src/components/Comment.jsx Normal file
View File

@@ -0,0 +1,44 @@
import { Button, Group, Paper, Stack, Text, Title } from "@mantine/core"
import moment from "moment"
import { useContext } from "react"
import { UserContext } from "../middleware/userContext"
import { useRecoilValue } from "recoil"
import { userState } from "../states/userState"
export default function Comment({
author,
authorId,
content,
date,
onEditComment,
commentId,
}) {
// Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
// the user data from the database repeatedly
// const [user, refreshUser] = useContext(UserContext);
const user = useRecoilValue(userState)
const handleEditComment = () => {
onEditComment(commentId)
}
const formattedDate = moment(date).format("MMMM Do YYYY, h:mm:ss a")
return (
<div>
<Paper shadow="xs" p="xs">
<Stack gap={0}>
<Group>
<Title size="h6">{author}</Title>
<Text size="sm">{formattedDate}</Text>
{/* Only show the edit button if the user is the author of the comment */}
{user.id === authorId && (
<Button variant="transparent" onClick={() => handleEditComment()}>
Edit
</Button>
)}
</Group>
<Text>{content}</Text>
</Stack>
</Paper>
</div>
)
}

12
src/components/FAB.jsx Normal file
View File

@@ -0,0 +1,12 @@
import { ActionIcon, Affix } from "@mantine/core";
// Floating Action Button component
export default function FAB({ onClick }) {
return (
<Affix position={{ bottom: 40, right: 40 }}>
<ActionIcon color="blue" radius="xl" size={60} onClick={onClick}>
+
</ActionIcon>
</Affix>
);
}

89
src/components/Post.jsx Normal file
View File

@@ -0,0 +1,89 @@
import {
Stack,
Title,
Text,
Paper,
Group,
Button,
Input,
InputLabel,
} from "@mantine/core"
import { useForm } from "react-hook-form"
import moment from "moment"
import { http } from "../middleware/axiosConfig"
import { useContext } from "react"
import { UserContext } from "../middleware/userContext"
import { useRecoilValue } from "recoil"
import { userState } from "../states/userState"
export default function Post({
author,
authorId,
content,
date,
postId,
onEditPost,
fetchComments,
children,
}) {
const {
register,
resetField,
handleSubmit,
watch,
formState: { errors },
} = useForm()
// Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
// the user data from the database repeatedly
// const [user, refreshUser] = useContext(UserContext);
const user = useRecoilValue(userState)
// Format the date to a more readable format
const formattedDate = moment(date).format("MMMM Do YYYY, h:mm:ss a")
// Called when the user submits the comment
const onSubmit = async (data) => {
try {
// Send a POST request to the /api/posts/:postId/comments route with the content in the request body
// Inserts a new comment into the database
await http.post(`api/posts/${postId}/comments`, data)
resetField("content")
// Refreshes the comments
fetchComments()
} catch (error) {
console.error(error)
}
}
const handleEditPost = () => {
onEditPost(postId)
}
return (
<div>
<Paper shadow="xs" p="xs">
<Stack gap={0}>
<Group>
<Title size="h6">{author}</Title>
<Text size="sm">{formattedDate}</Text>
{/* Only show the edit button if the current user is the author of the post */}
{user.id === authorId && (
<Button variant="transparent" onClick={() => handleEditPost()}>
Edit
</Button>
)}
</Group>
<Text>{content}</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<InputLabel>Comments</InputLabel>
<Input {...register("content")} />
<Button type="submit">Comment</Button>
{/* Where comments go */}
{children}
</form>
</Stack>
</Paper>
</div>
)
}

20
src/components/PostSkeleton.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { Stack, Skeleton, Paper, Group } from "@mantine/core";
export default function PostSkeleton({ loading }) {
if (!loading) return null;
return (
<Paper shadow="xs" p="xs" mb="md">
<Stack gap={3}>
<Group mb={5}>
<Skeleton height={10} width="20%" radius={"xl"} />
<Skeleton height={10} width="30%" radius={"xl"} />
<Skeleton height={10} width="10%" radius={"xl"} />
</Group>
<Skeleton height={10} width="100%" radius={"xl"} />
<Skeleton height={10} width="100%" radius={"xl"} />
<Skeleton height={10} width="100%" radius={"xl"} />
</Stack>
</Paper>
);
}

31
src/components/ProtectedRoute.jsx Normal file
View File

@@ -0,0 +1,31 @@
import { Navigate, Outlet } from "react-router-dom"
// A component that only displays the element/route if the user is logged in
// else, redirects to the login page
// export default function ProtectedRoute({ element, loggedIn }) {
// console.log("PROTECTED ROUTE: " + loggedIn);
// if (loggedIn === true) {
// return element;
// } else {
// return <Navigate to="/login" />;
// }
// }
import React from "react"
import Root from "../routes/Root"
export default function ProtectedRoute({ user, loading, logout }) {
return (
<>
{!loading ? (
user ? (
<Root logout={logout} />
) : (
<Navigate to="/login" />
)
) : (
<div>loading....</div>
)}
</>
)
}

13
src/index.css Normal file
View File

@@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

25
src/index.js Normal file
View File

@@ -0,0 +1,25 @@
import * as React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import reportWebVitals from "./reportWebVitals"
import { MantineProvider } from "@mantine/core"
import "@mantine/core/styles.css"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
import { RecoilRoot } from "recoil"
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<RecoilRoot>
<App />
</RecoilRoot>
</BrowserRouter>
</React.StrictMode>
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

1
src/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

7
src/middleware/axiosConfig.js Normal file
View File

@@ -0,0 +1,7 @@
import axios from "axios"
export const http = axios.create({
baseURL: "http://172.17.20.46:3001",
withCredentials: true,
withXSRFToken: true,
})

3
src/middleware/userContext.js Normal file
View File

@@ -0,0 +1,3 @@
import { createContext } from "react";
export const UserContext = createContext();

13
src/reportWebVitals.js Normal file
View File

@@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

14
src/routes/ErrorPage.jsx Normal file
View File

@@ -0,0 +1,14 @@
// import { useRouteError } from "react-router-dom";
export default function ErrorPage() {
// const error = useRouteError();
// console.error(error);
return (
<div id="error-page">
<h1>Oops!</h1>
<p>Sorry, an unexpected error has occurred.</p>
<p>{/* <i>{error.statusText || error.message}</i> */}</p>
</div>
)
}

1
src/routes/Login.css Normal file
View File

@@ -0,0 +1 @@

39
src/routes/Login.jsx Normal file
View File

@@ -0,0 +1,39 @@
import { Navigate, useNavigate } from "react-router-dom"
import AuthenticationForm from "../components/AuthenticationForm"
import "./Login.css"
import { Container } from "@mantine/core"
import { useRecoilValue } from "recoil"
import { userState } from "../states/userState"
// The Login route that displays the login/registration form
export default function Login({ onLogin, loading }) {
const navigate = useNavigate()
//NEW-------------
const user = useRecoilValue(userState)
// Called when the login/register button is clicked
async function handleLogin() {
// Call the onLogin function passed from the parent component
await onLogin()
// Navigate to the posts page after logging in
navigate("/posts")
}
return (
<>
{!loading ? (
!user ? (
<div id="login-page">
<Container size={450} pt={100}>
<AuthenticationForm onLogin={handleLogin} />
</Container>
</div>
) : (
<Navigate to={"/posts"} />
)
) : (
<div>loading....</div>
)}
</>
)
}

192
src/routes/Posts.jsx Normal file
View File

@@ -0,0 +1,192 @@
import { useEffect, useState } from "react"
import { http } from "../middleware/axiosConfig"
import Post from "../components/Post"
import FAB from "../components/FAB"
import { useDisclosure } from "@mantine/hooks"
import AddEditModal from "../components/AddEditModal"
import Comment from "../components/Comment"
import { Center, Flex, Title } from "@mantine/core"
import PostSkeleton from "../components/PostSkeleton"
// The Posts route that displays a list of posts and its respective comments fetched from the database
// Otherwise, it displays a text that indicates that there are no posts to display
export default function Posts() {
const [posts, setPosts] = useState([])
const [comments, setComments] = useState({})
const [opened, toggle] = useDisclosure(false)
// Control the modal mode - Add Post, Edit Post, Edit Comment
const [modalMode, setModalMode] = useState("Add Post")
// Id of the post or comment being edited
//OLD--------------
// const [id, setId] = useState(0)
//NEW---------------
const [contentEdit, setContentEdit] = useState({ id: 0, content: "" })
const [loading, setLoading] = useState(true)
// Fetch posts and comments
const fetchPostsAndComments = async () => {
try {
// Send a GET request to the /api/posts route and retrieve the posts
const res = await http.get("api/posts")
setPosts(res.data)
setLoading(false)
res.data.forEach((post) => {
// Send a GET request to the /api/comments route and retrieve the comments for each post
fetchComments(post.id)
})
} catch (error) {
console.error(error)
}
}
// Fetch posts
const fetchPosts = async () => {
try {
const res = await http.get("api/posts")
setPosts(res.data)
} catch (error) {
console.error(error)
setLoading(false)
}
}
// Fetch a specific comment to retrieve its post ID
const fetchComment = async (commentId) => {
try {
// Send a GET request to the /api/comments route and retrieve the comment
const res = await http.get(`api/comments/${commentId}`)
// Fetch the comments for the post that the comment belongs to; refreshes the comments
fetchComments(res.data.post_id)
} catch (error) {
console.error(error)
}
}
// Fetch comments
const fetchComments = async (postId) => {
try {
// Send a GET request to the /api/comments route and retrieve the comments
const res = await http.get(`api/posts/${postId}/comments`)
// Set the comments in the state
setComments((prevComments) => ({ ...prevComments, [postId]: res.data }))
} catch (error) {
console.error(error)
}
}
// Fetch posts and comments on component mount
useEffect(() => {
fetchPostsAndComments()
}, [])
//OLD---------------------
// For setting the modal mode to Edit Comment
// const handleEditComment = (commentId) => {
// console.log(commentId)
// setModalMode("Edit Comment")
// setId(commentId)
// toggle.open()
// }
//NEW------------------
const handleEditComment = (commentId, content) => {
console.log(commentId)
setModalMode("Edit Comment")
setContentEdit({
id: commentId,
content: content,
})
toggle.open()
}
//OLD-----------------------------
// For setting the modal mode to Edit Post
// const handleEditPost = (postId) => {
// console.log(postId);
// setModalMode("Edit Post");
// setId(postId);
// toggle.open();
// };
//NEW-----------------
const handleEditPost = (postId, content) => {
console.log(postId)
setModalMode("Edit Post")
setContentEdit({
id: postId,
content: content,
})
toggle.open()
}
// For setting the modal mode to Add Post
const handleAddPost = () => {
//NEW---------------------------------------
setContentEdit({
id: 0,
content: "",
})
setModalMode("Add Post")
toggle.open()
}
return (
<Flex direction="column" h={"100%"}>
<Title order={2} ta={"center"}>
Posts
</Title>
{/* When posts are still being loaded, display skeletons */}
<PostSkeleton loading={loading} />
<PostSkeleton loading={loading} />
<PostSkeleton loading={loading} />
<PostSkeleton loading={loading} />
{/* When there are no posts to display, display text */}
{!loading && posts.length === 0 && (
<Center h={"80%"}>
<Title order={4} size="h4" ta={"center"}>
No posts yet! Create one!
</Title>
</Center>
)}
{/* For each post, display the post and its comments */}
{posts.map((post) => (
<Post
key={post.id}
author={post.user.fname}
authorId={post.user.id}
content={post.content}
date={post.created_at}
postId={post.id}
onEditPost={(postId) => handleEditPost(postId, post.content)}
fetchComments={() => fetchComments(post.id)}
>
{/* For each comment, display the comment based on its post ID */}
{comments[post.id]?.map((comment) => (
<Comment
key={comment.id}
author={comment.user.fname}
authorId={comment.user.id}
content={comment.content}
date={comment.created_at}
commentId={comment.id}
onEditComment={(commentId) =>
handleEditComment(commentId, comment.content)
}
/>
))}
</Post>
))}
{/* Floating Action Button to display Add Post modal */}
<FAB onClick={handleAddPost} />
{/* Add Edit Modal to allow users to add or edit posts or comments */}
{/* UPDATED PROPS */}
<AddEditModal
opened={opened}
onClose={toggle.close}
fetchPosts={fetchPosts}
fetchComment={() => fetchComment(contentEdit.id)}
id={contentEdit.id}
modalMode={modalMode}
content={contentEdit.content}
/>
</Flex>
)
}

99
src/routes/Profile.jsx Normal file
View File

@@ -0,0 +1,99 @@
import { useContext, useEffect, useState } from "react"
import { UserContext } from "../middleware/userContext"
import {
Button,
Flex,
Group,
InputLabel,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core"
import { http } from "../middleware/axiosConfig"
import { useRecoilValue } from "recoil"
import { userState } from "../states/userState"
// The profile route displays the user's profile information and allows them to edit it.
export default function Profile({ refreshUser }) {
// Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
// the user data from the database repeatedly
// const [user, refreshUser] = useContext(UserContext);
const user = useRecoilValue(userState)
const [editName, setEditName] = useState("")
const [editEmail, setEditEmail] = useState("")
// Called when the edit button near name is clicked
const handleEditName = async () => {
// Send a POST request to the /api/edit route with the user's new name in the request body
// Edits the name of the current user in the database
const res = await http.post("/api/edit", {
fname: editName,
})
// Call the refreshUser function to update the user data
refreshUser()
// Reset the editName state variable to an empty string
setEditName("")
}
// Called when the edit button near email is clicked
const handleEditEmail = async () => {
// Send a POST request to the /api/edit route with the user's new email in the request body
// Edits the email of the current user in the database
const res = await http.post("/api/edit", {
email: editEmail,
})
// Call the refreshUser function to update the user data
refreshUser()
// Reset the editEmail state variable to an empty string
setEditEmail("")
}
return (
<Flex direction="column" h={"100%"}>
<Title order={2} ta={"center"}>
My Profile
</Title>
<Stack h={"80%"} gap={0} mt={50}>
<Group justify="center" gap={30}>
<Title order={4}>Name</Title>
<Group gap={0}>
<Text>{user.name}</Text>
<Button
variant="transparent"
size="xs"
onClick={() => {
handleEditName()
}}
>
Edit
</Button>
{/* Input for new name */}
<TextInput
value={editName}
onChange={(e) => setEditName(e.target.value)}
></TextInput>
</Group>
</Group>
<Group justify="center" gap={30}>
<Title order={4}>E-mail Address</Title>
<Group gap={0}>
<Text>{user.email}</Text>
<Button
variant="transparent"
size="xs"
onClick={() => handleEditEmail()}
>
Edit
</Button>
{/* Input for new email */}
<TextInput
value={editEmail}
onChange={(e) => setEditEmail(e.target.value)}
></TextInput>
</Group>
</Group>
</Stack>
</Flex>
)
}

3
src/routes/Root.css Normal file
View File

@@ -0,0 +1,3 @@
.main-header {
align-content: center;
}

76
src/routes/Root.jsx Normal file
View File

@@ -0,0 +1,76 @@
import { useState } from "react";
import { useDisclosure } from "@mantine/hooks";
import { AppShell, Burger, NavLink, Box, Button, Group } from "@mantine/core";
import { Link, Outlet, useLocation } from "react-router-dom";
import "./Root.css";
// Links for the sidebar
const data = [
{ link: "/posts", label: "Posts" },
{ link: "/profile", label: "Profile" },
];
// The root component renders the sidebar and the header that will
// shared by all other routes.
export default function Root({ logout }) {
const location = useLocation();
// The initial active index is determined by finding the index of the data
// item that matches the current location pathname.
const [active, setActive] = useState(
data.findIndex((item) => item.link === location.pathname)
);
// Toggle the visibility of the sidebar
const [opened, { toggle }] = useDisclosure();
// The links for the sidebar, mapped from the data items
const links = data.map((item, index) => (
<NavLink
to={item.link}
key={item.label}
active={index === active}
label={item.label}
onClick={(e) => {
setActive(index);
}}
variant="filled"
component={Link}
/>
));
return (
/* The AppShell component is used to render the sidebar and the main content of the page */
<AppShell
header={{ height: 60 }}
navbar={{
width: { sm: 200, lg: 300 },
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
{/* The header of the page that with the burger that can toggle the sidebar on smaller screens */}
<AppShell.Header className="main-header">
<Group justify="space-between" px={20}>
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<div>Logo</div>
<Button variant="transparent" onClick={logout}>
Logout
</Button>
</Group>
</AppShell.Header>
{/* The sidebar displays the links in a collapsible menu */}
<AppShell.Navbar p="md">
<Box>{links}</Box>
</AppShell.Navbar>
{/* The main content of the page is rendered here */}
<AppShell.Main h={"80vh"}>
{/* The outlet allows the content of the route to be rendered -- from react-router-dom */}
<Outlet />
</AppShell.Main>
</AppShell>
);
}

5
src/setupTests.js Normal file
View File

@@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

12
src/states/userState.js Normal file
View File

@@ -0,0 +1,12 @@
import { nanoid } from "nanoid"
import { atom } from "recoil"
export const userState = atom({
key: `${nanoid()}-userState`,
default: null,
})
export const loggedIn = atom({
key: `${nanoid()}-loggedIn`,
default: false,
})

14
tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"compilerOptions": {
"outDir": "./dist/", // path to output directory
"sourceMap": true, // allow sourcemap support
"strictNullChecks": true, // enable strict null checks as a best practice
"module": "es6", // specify module code generation
"jsx": "react-jsx", // use typescript to transpile jsx to js
"target": "es5", // specify ECMAScript target version
"allowJs": true, // allow a partial TypeScript and JavaScript codebase
"moduleResolution": "node",
"baseUrl": "./src",
},
"include": ["src"]
}