-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e1fe6f3
commit f57ad60
Showing
6 changed files
with
113 additions
and
63 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { useState } from "react"; | ||
| import Toast, { ToastProps, ToastType } from "../../components/toast/Toast"; | ||
|
|
||
| function ToastDemoPage() { | ||
| const [toasts, setToasts] = useState<ToastProps[]>([]); | ||
|
|
||
| const showToast = (heading: string, message: string, type: ToastType) => { | ||
| const key = Date.now(); | ||
| const toast = { | ||
| key, | ||
| heading, | ||
| message, | ||
| type, | ||
| onClose: () => removeToast(key), | ||
| }; | ||
|
|
||
| setToasts([toast]); | ||
|
|
||
| setTimeout(() => { | ||
| removeToast(toast.key); | ||
| }, 5000); | ||
| }; | ||
|
|
||
| const removeToast = (key: number) => { | ||
| setToasts((prevToasts) => prevToasts.filter((toast) => toast.key !== key)); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>Hello World!</h1> | ||
| <div> | ||
| {/* TOAST DEMO */} | ||
| <button | ||
| onClick={() => { | ||
| showToast("Success Heading", "This is a success text!", "success"); | ||
| }} | ||
| > | ||
| Click to Show Success Toast | ||
| </button> | ||
| <br /> | ||
| <button | ||
| onClick={() => | ||
| showToast("Error Heading", "This is a failure text!", "error") | ||
| } | ||
| > | ||
| Click to Show Error Toast | ||
| </button> | ||
| <br /> | ||
| <button | ||
| onClick={() => | ||
| showToast("Information Heading", "This is an info text!", "info") | ||
| } | ||
| > | ||
| Click to Show Info Toast | ||
| </button> | ||
| <br /> | ||
| <button | ||
| onClick={() => | ||
| showToast("Warning Heading", "This is a warning text!", "warning") | ||
| } | ||
| > | ||
| Click to Show Warning Toast | ||
| </button> | ||
| </div> | ||
| {/* END TOAST DEMO */} | ||
|
|
||
| {/* TOASTS */} | ||
| {toasts.map((x) => ( | ||
| <Toast {...x} key={x.key} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default ToastDemoPage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,43 @@ | ||
| import { useState } from "react"; | ||
| import "./assets/css/App.css"; | ||
| import Toast, { ToastProps, ToastType } from "../../components/toast/Toast"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
|
|
||
| function TestPage() { | ||
| const [toasts, setToasts] = useState<ToastProps[]>([]); | ||
| import viteLogo from "/vite.svg"; | ||
| import reactLogo from "/react.svg"; | ||
| import resolveURL from "@/api/fetch.ts"; | ||
|
|
||
| const showToast = (heading: string, message: string, type: ToastType) => { | ||
| const key = Date.now(); | ||
| const toast = { | ||
| key, | ||
| heading, | ||
| message, | ||
| type, | ||
| onClose: () => removeToast(key), | ||
| }; | ||
|
|
||
| setToasts([toast]); | ||
| const getResourceOptions = { | ||
| queryKey: ['resourceData'], | ||
| queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json()) | ||
| } | ||
|
|
||
| setTimeout(() => { | ||
| removeToast(toast.key); | ||
| }, 5000); | ||
| }; | ||
|
|
||
| const removeToast = (key: number) => { | ||
| setToasts((prevToasts) => prevToasts.filter((toast) => toast.key !== key)); | ||
| }; | ||
| function TestPage() { | ||
| const [count, setCount] = useState(0) | ||
|
|
||
| const { isPending, data } = useQuery(getResourceOptions) | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>Hello World!</h1> | ||
| <div className="app-row app-row--group"> | ||
| {/* TOAST DEMO */} | ||
| <button | ||
| onClick={() => { | ||
| showToast("Success Heading", "This is a success text!", "success"); | ||
| }} | ||
| > | ||
| Show Success Toast | ||
| </button> | ||
| <button | ||
| onClick={() => | ||
| showToast("Error Heading", "This is a failure text!", "error") | ||
| } | ||
| > | ||
| Show Error Toast | ||
| </button> | ||
| <button | ||
| onClick={() => | ||
| showToast("Information Heading", "This is an info text!", "info") | ||
| } | ||
| > | ||
| Show Info Toast | ||
| </button> | ||
| <button | ||
| onClick={() => | ||
| showToast("Warning Heading", "This is a warning text!", "warning") | ||
| } | ||
| > | ||
| Show Warning Toast | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> | ||
| <img src={viteLogo} className="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank" rel="noreferrer"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h1>{isPending ? "Loading..." : data.result}</h1> | ||
| <div className="card"> | ||
| <button onClick={() => setCount((count) => count + 1)}> | ||
| count is {count} | ||
| </button> | ||
| </div> | ||
| {/* END TOAST DEMO */} | ||
|
|
||
| {/* TOASTS */} | ||
| {toasts.map((x) => ( | ||
| <Toast {...x} key={x.key} /> | ||
| ))} | ||
| <p className="read-the-docs"> | ||
| Click on the Vite and React logos to learn more | ||
| </p> | ||
| </> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| export default TestPage | ||
| export default TestPage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters