Added toast notifications

This commit is contained in:
Keannu Bernasol 2023-11-13 22:46:14 +08:00
parent fd4c2e9ad6
commit 0cccaf25f1
5 changed files with 52 additions and 9 deletions

23
package-lock.json generated
View file

@ -13,7 +13,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^8.1.3", "react-redux": "^8.1.3",
"react-router-dom": "^6.18.0" "react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",
@ -1496,6 +1497,14 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -2732,6 +2741,18 @@
"react-dom": ">=16.8" "react-dom": ">=16.8"
} }
}, },
"node_modules/react-toastify": {
"version": "9.1.3",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
"integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
"dependencies": {
"clsx": "^1.1.1"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
}
},
"node_modules/redux": { "node_modules/redux": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",

View file

@ -15,7 +15,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^8.1.3", "react-redux": "^8.1.3",
"react-router-dom": "^6.18.0" "react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",

View file

@ -4,9 +4,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import "./App.css"; import "./App.css";
import store from "./Components/Plugins/Redux/Store/Store"; import store from "./Components/Plugins/Redux/Store/Store";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const router = createHashRouter([ const router = createHashRouter([
{ {
path: "/", path: "/",
@ -21,6 +21,15 @@ export default function App() {
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<RouterProvider router={router} /> <RouterProvider router={router} />
</QueryClientProvider> </QueryClientProvider>
<ToastContainer
autoClose={1500}
position="bottom-center"
closeOnClick
pauseOnHover
draggable
theme={"light"}
limit={3}
/>
</Provider> </Provider>
); );
} }

View file

@ -13,10 +13,10 @@ export default function Button(props: props) {
return ( return (
<div> <div>
<button <button
onClick={props.onClick}
onMouseDown={() => { onMouseDown={() => {
if (!clicked) { if (!clicked) {
props.onClick; setClicked(!clicked);
setClicked(true);
} }
}} }}
onMouseUp={() => setClicked(false)} onMouseUp={() => setClicked(false)}

View file

@ -1,6 +1,7 @@
import Button from "../../Components/Buttons/Button"; import Button from "../../Components/Buttons/Button";
import styles from "../../Components/styles"; import styles from "../../Components/styles";
import citc_logo from "../../assets/citc_logo.jpg"; import citc_logo from "../../assets/citc_logo.jpg";
import { toast } from "react-toastify";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<div style={styles.background}> <div style={styles.background}>
@ -45,13 +46,24 @@ export default function LandingPage() {
TRACKER TRACKER
</p> </p>
<div style={{ ...styles.flex_column }}> <div style={{ ...styles.flex_column }}>
<Button type={"light"} label={"Login"} onClick={() => {}} /> <Button
<Button type={"dark"} label={"Register"} onClick={() => {}} /> type={"light"}
label={"Login"}
onClick={() => {
toast("Successfully logged in!");
}}
/>
<Button
type={"dark"}
label={"Register"}
onClick={() => {
toast("Redirecting!");
}}
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<p>heh</p>
</div> </div>
); );
} }