minhtrannhat/neo-todo-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge backend + frontend #1

Merged
minhtrannhat merged 17 commits from frontend into master 2023-11-02 01:59:49 +00:00
Conversation 0 Commits 17 Files Changed 48 +106 -5
6 changed files with 106 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a73afc90d9 - Show all commits

12
frontend/README.md
View File

@ -21,10 +21,18 @@ useMemo is a React Hook that lets you cache the result of a calculation between
Change default component colors to suit one's needs.
#### CSSBaseline
##### CSSBaseline
Reset the CSS injected into `<head>`. A collection of HTML element and attribute style-normalizations, you can expect all of the elements to look the same across all browsers.
#### useMediaQuery
##### useMediaQuery
This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.
##### Container's maxWidth
This will make sure Material UI's Container will not expand to fill the entire screen and instead just stop expanding at around 960px (which is `md`).
### Configure the page's title (Browser Tab Text)
Use `react-helmet-async`, wrap it around the `App` in `App.tsx`.

35
frontend/package-lock.json generated
View File

@ -22,6 +22,7 @@
"@types/react": "^18.2.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-scripts": "^5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
@ -9934,6 +9935,14 @@
"node": ">= 0.4"
}
},
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/ipaddr.js": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@ -15299,6 +15308,27 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
},
"node_modules/react-helmet-async": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
"integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"invariant": "^2.2.4",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.2.0",
"shallowequal": "^1.1.0"
},
"peerDependencies": {
"react": "^16.6.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -16154,6 +16184,11 @@
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
},
"node_modules/shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

1
frontend/package.json
View File

@ -17,6 +17,7 @@
"@types/react": "^18.2.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-scripts": "^5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",

19
frontend/src/App.tsx
View File

@ -13,11 +13,24 @@ import ThemeProvider from "./ThemeProvider";
// Material UI stuffs
import Container from "@mui/material/Container";
// React helmet async: configure the page's title
import { Helmet, HelmetProvider } from "react-helmet-async";
// Authentication Context: Check if user is logged in or not
import { AuthContextProvider } from "./AuthContext";
function App() {
return (
<ThemeProvider>
<Container maxWidth="md"></Container>
</ThemeProvider>
<AuthContextProvider>
<HelmetProvider>
<Helmet>
<title>Todo</title>
</Helmet>
<ThemeProvider>
<Container maxWidth="md"></Container>
</ThemeProvider>
</HelmetProvider>
</AuthContextProvider>
);
}

25
frontend/src/AuthContext.tsx Normal file
View File

@ -0,0 +1,25 @@
import { createContext, useState } from "react";
interface IAuth {
authenticated: boolean;
setAuthenticated: (value: boolean) => void;
}
export const AuthContext = createContext<IAuth>({
authenticated: true,
setAuthenticated: (value: boolean) => {},
});
interface IProps {
children?: React.ReactNode;
}
export const AuthContextProvider = ({ children }: IProps) => {
const [authenticated, setAuthenticated] = useState(true);
return (
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
{children}
</AuthContext.Provider>
);
};

19
frontend/src/components/Title.tsx Normal file
View File

@ -0,0 +1,19 @@
import Typography from "@mui/material/Typography";
import { Helmet } from "react-helmet-async";
interface IProps {
title: string;
}
const Title = ({ title }: IProps) => (
<>
<Helmet>
<title>Todo | {title}</title>
</Helmet>
<Typography component="h1" variant="h5">
{title}
</Typography>
</>
);
export default Title;