From 151fc00d2a98ed20e1c3aa8b21cebb206f3eba34 Mon Sep 17 00:00:00 2001 From: Ankit kumar sahu Date: Tue, 2 Jul 2024 19:47:28 +0530 Subject: [PATCH] Average duration frontend, skeleton and styling --- package-lock.json | 10 ++++++ package.json | 1 + src/App.tsx | 16 +++++---- src/components/Duration.tsx | 70 +++++++++++++++++++++++++------------ src/components/Input.tsx | 9 +++-- src/components/Navbar.tsx | 2 +- 6 files changed, 76 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 17637bf..5c013f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.52.0", + "react-loading-skeleton": "^3.4.0", "react-router-dom": "^6.23.1", "ts-node": "^10.9.2" }, @@ -4240,6 +4241,15 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-loading-skeleton": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz", + "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", diff --git a/package.json b/package.json index f054290..17b0e60 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.52.0", + "react-loading-skeleton": "^3.4.0", "react-router-dom": "^6.23.1", "ts-node": "^10.9.2" }, diff --git a/src/App.tsx b/src/App.tsx index 6091e19..e14e935 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,18 +4,22 @@ import Input from "./components/Input"; import Navbar from "./components/Navbar"; function App() { - const [duration, setDuration] = useState(0); + const [duration, setDuration] = useState({ totalDuration: 0, averageDuration: 0 }); + const [isSubmitted, setIsSubmitted] = useState(false); - - const handleDuration = (duration: number) => { + const handleDuration = (duration: { totalDuration: number, averageDuration: number }) => { setDuration(duration); }; + const handleSubmit = (isSubmitted: boolean) => { + setIsSubmitted(isSubmitted); + }; + return ( -
+
- - + + {isSubmitted && }
); } diff --git a/src/components/Duration.tsx b/src/components/Duration.tsx index 2378157..bf47d47 100644 --- a/src/components/Duration.tsx +++ b/src/components/Duration.tsx @@ -1,5 +1,11 @@ +import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import "react-loading-skeleton/dist/skeleton.css"; + type DurationProps = { - duration: number; + duration: { + totalDuration: number; + averageDuration: number; + }; }; function convertMinutesToHours(minutes: number): string { @@ -16,29 +22,49 @@ function calculateNewDuration(duration: number, factor: number): string { } const Duration: React.FC = ({ duration }) => { - const durationInHoursMinutes = convertMinutesToHours(duration); - const duration1_25x = calculateNewDuration(duration, 1.25); - const duration1_5x = calculateNewDuration(duration, 1.5); - const duration1_75x = calculateNewDuration(duration, 1.75); - const duration2x = calculateNewDuration(duration, 2); + const durationInHoursMinutes = convertMinutesToHours(duration.totalDuration); + const avgDuration = convertMinutesToHours(duration.averageDuration); + const duration1_25x = calculateNewDuration(duration.totalDuration, 1.25); + const duration1_5x = calculateNewDuration(duration.totalDuration, 1.5); + const duration1_75x = calculateNewDuration(duration.totalDuration, 1.75); + const duration2x = calculateNewDuration(duration.totalDuration, 2); return ( -
-
- {/*

- Total Duration in Minutes:{" "} - {duration !== 0 ? `${duration} minutes` : "--"} -

*/} -

- Total Duration in Hours:{" "} - {durationInHoursMinutes !== "0 hours 00 minutes" - ? durationInHoursMinutes - : "--"} -

-

Duration at 1.25x speed: {duration !== 0 ? duration1_25x : "--"}

-

Duration at 1.5x speed: {duration !== 0 ? duration1_5x : "--"}

-

Duration at 1.75x speed: {duration !== 0 ? duration1_75x : "--"}

-

Duration at 2x speed: {duration !== 0 ? duration2x : "--"}

+
+
+ +

+ Total Duration:{" "} + {durationInHoursMinutes !== "0 hours 00 minutes" ? ( + durationInHoursMinutes + ) : ( + + )}{" "} +

+

+ Average Duration:{" "} + {duration.averageDuration !== 0 ? avgDuration : } +

+

+ Total Duration at 1.25x:{" "} + {duration.totalDuration !== 0 ? duration1_25x : } +

+

+ Total Duration at 1.5x:{" "} + {duration.totalDuration !== 0 ? duration1_5x : } +

+

+ Total Duration at 1.75x:{" "} + {duration.totalDuration !== 0 ? duration1_75x : } +

+

+ Total Duration at 2x:{" "} + {duration.totalDuration !== 0 ? duration2x : } +

+
); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index bf51101..d5d69e5 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -8,11 +8,12 @@ type FormValues = { }; type InputProps = { - sendDuration: (duration: number) => void; + sendDuration: (duration: { totalDuration: number, averageDuration: number }) => void; + isSubmitted: (isSubmitted: boolean) => void; }; -function Input({sendDuration }: InputProps) { +function Input({sendDuration, isSubmitted }: InputProps) { const { register, handleSubmit } = useForm(); const [pID, setPID] = useState(""); const [error, setError] = useState(null); @@ -22,8 +23,10 @@ function Input({sendDuration }: InputProps) { try { const id = extractPlaylistID(data.playlist); setPID(id); + isSubmitted(true); const response = await axios.post('http://localhost:5000/api/playlistItems', { pID: id }); + console.log(response.data); sendDuration(response.data); } catch (error) { if (error instanceof AxiosError) { @@ -36,7 +39,7 @@ function Input({sendDuration }: InputProps) { return (
-
+ +