diff --git a/README.md b/README.md index 25f870f..7e542d3 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,10 @@ Pirmas puslapis: + Keisti elementų pozicijas (pasirinkimo laisvė, kaip tai įgyvendinti) Antras puslapis: -* Gauti duomenis iš public API (https://api.chucknorris.io/jokes/random?category=dev) ir juos parodyti ekrane -* Kol puslapis atidarytas, kas 15s atnaujinti duomenis -* Taip pat reikia pavaizduoti datą ir laiką, kada duomenys buvo paskutinį kartą gauti -* Išjungus puslapį, nustoti duomenų gavimą -* Atidarius, iš karto atnaujinti ++ Gauti duomenis iš public API (https://api.chucknorris.io/jokes/random?category=dev) ir juos parodyti ekrane ++ Kol puslapis atidarytas, kas 15s atnaujinti duomenis ++ Taip pat reikia pavaizduoti datą ir laiką, kada duomenys buvo paskutinį kartą gauti ++ Išjungus puslapį, nustoti duomenų gavimą ++ Atidarius, iš karto atnaujinti Stiliai ir aplikacijos išvaizda yra laisva forma, bet dizaino libų nenaudoti (material-ui, antd ir pan.) diff --git a/index.html b/index.html index 9c004dd..992ff27 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Vite + React + TS - +
diff --git a/src/components/enum-select.tsx b/src/components/enum-select.tsx index 2ecff27..a0866d8 100644 --- a/src/components/enum-select.tsx +++ b/src/components/enum-select.tsx @@ -2,7 +2,7 @@ import { } from 'react' export function EnumSelect({ name, entries, defaultValue }: { name: string; entries: Record, defaultValue?: string }): JSX.Element { return ( - {Object.entries(entries).map(([v, name]) => )} ); diff --git a/src/components/task-form.tsx b/src/components/task-form.tsx index 5773f73..a50ac71 100644 --- a/src/components/task-form.tsx +++ b/src/components/task-form.tsx @@ -18,7 +18,7 @@ export function TaskForm({ createTask }: { createTask: (t: Record
- +
diff --git a/src/components/task-row.tsx b/src/components/task-row.tsx index 15399b3..baa2a7e 100644 --- a/src/components/task-row.tsx +++ b/src/components/task-row.tsx @@ -52,7 +52,7 @@ export function TaskRow({ task, updateTask, deleteTask, swapTasks }: TaskProps & }} >
- +
diff --git a/src/index.css b/src/index.css index 7ea4a3d..26522d8 100644 --- a/src/index.css +++ b/src/index.css @@ -9,8 +9,8 @@ @apply my-4; } - a.nav-button { - @apply cursor-pointer px-5 py-2 rounded-lg border border-gray-300 hover:border-indigo-500 transition-colors duration-700; + .nav-button { + @apply cursor-pointer px-5 py-2 rounded-lg ring-1 ring-inset ring-gray-300 hover:ring-indigo-500 focus:ring-2 focus:ring-indigo-500 transition-shadow duration-500; } .tr { @@ -63,7 +63,10 @@ select, input { - @apply bg-neutral-100 dark:bg-neutral-700 h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-neutral-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700; + @apply bg-white dark:bg-neutral-800 h-10 rounded-lg border-0 px-3 ring-1 ring-inset ring-neutral-200 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700; + } + input:disabled { + @apply bg-neutral-100 dark:bg-neutral-700 hover:ring-neutral-200 transition-none; } .accordion-title { diff --git a/src/main.tsx b/src/main.tsx index bcc7eb9..d4214d3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,6 +6,7 @@ import { } from "react-router-dom"; import './index.css' import { List } from './routes/list.tsx' +import { Fetch } from './routes/fetch.tsx' import { Root } from './routes/root.tsx' import { ErrorPage } from './error-page.tsx'; @@ -21,7 +22,7 @@ const router = createBrowserRouter([ }, { path: "/fetch", - element:
, + element: , }, ], }, diff --git a/src/routes/fetch.tsx b/src/routes/fetch.tsx new file mode 100644 index 0000000..ab2be60 --- /dev/null +++ b/src/routes/fetch.tsx @@ -0,0 +1,86 @@ +import { useState, useEffect, useRef, useCallback } from 'react' + +const URL = 'https://api.chucknorris.io/jokes/random?category=dev'; + +export function Fetch() { + // const [seconds, setSeconds] = useState(15); + const [last, setLast] = useState(0); + const [now, setNow] = useState(0); + const [response, setResponse] = useState(undefined); + + + const fetchRef = useRef(0); + const countdownRef = useRef(0); + const inputRef = useRef(null); + + const fetchData = async () => { + setLast(Date.now()); + setResponse(undefined); + + try { + const response = await fetch(URL); + if (response.ok) { + const data = await response.json(); + setResponse(data); + } + } catch (error) { + console.error(error) + } + }; + + const stopFetching = () => { + clearInterval(fetchRef.current); + clearInterval(countdownRef.current); + if (inputRef.current) { + inputRef.current.disabled = false; + } + } + + const startFetching = useCallback(() => { + if (inputRef.current) { + stopFetching(); + inputRef.current.disabled = true; + fetchRef.current = setInterval(fetchData, 1000 * Number(inputRef.current.value)); + countdownRef.current = setInterval(() => setNow(Date.now()), 1000); + setNow(Date.now()); + fetchData(); + } + }, []); + + useEffect(() => { + startFetching(); + return stopFetching; + }, [startFetching]) + + const localizedLast = new Intl.DateTimeFormat('lt-LT', { + dateStyle: 'short', + timeStyle: 'long', + }).format(last); + + return ( +
+ + + gauti kas sek. Iki sekančio liko {inputRef.current ? Number(inputRef.current.value) - Math.floor((now - last) / 1000) : 0} sek. +

Paskutinis gavimas: {localizedLast}

+
+ { + response ? <> +
+
{response.value}
+ : + } +
+
+ ); +} \ No newline at end of file diff --git a/src/routes/root.tsx b/src/routes/root.tsx index c1b7671..fbf0bd6 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -5,7 +5,7 @@ export function Root() { <>