Average duration frontend, skeleton and styling

kmr-ankitt · Jul 2, 2024 · 151fc00 · 151fc00
1 parent 1403ca4
commit 151fc00
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -4,18 +4,22 @@ import Input from "./components/Input";
 import Navbar from "./components/Navbar";
 
 function App() {
-  const [duration, setDuration] = useState<number>(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 (
-    <div className="bg-zinc-900 text-zinc-200 h-screen font-mono">
+    <div className="bg-zinc-900 text-zinc-200 h-screen w-full font-mono">
       <Navbar />
-      <Input sendDuration={handleDuration} />
-      <Duration duration={duration} />
+      <Input sendDuration={handleDuration} isSubmitted={handleSubmit} />
+      {isSubmitted && <Duration duration={duration} />}
     </div>
   );
 }

diff --git 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<DurationProps> = ({ 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 (
-    <div className="flex flex-col items-center justify-center text-[1rem] gap-2">
-      <div>
-        {/* <p>
-          Total Duration in Minutes:{" "}
-          {duration !== 0 ? `${duration} minutes` : "--"}
-        </p> */}
-        <p>
-          Total Duration in Hours:{" "}
-          {durationInHoursMinutes !== "0 hours 00 minutes"
-            ? durationInHoursMinutes
-            : "--"}
-        </p>
-        <p>Duration at 1.25x speed: {duration !== 0 ? duration1_25x : "--"}</p>
-        <p>Duration at 1.5x speed: {duration !== 0 ? duration1_5x : "--"}</p>
-        <p>Duration at 1.75x speed: {duration !== 0 ? duration1_75x : "--"}</p>
-        <p>Duration at 2x speed: {duration !== 0 ? duration2x : "--"}</p>
+    <div
+      className="flex flex-col items-center justify-center text-[1.2rem] bg-zinc-900 text-zinc-200 p-6  max-sm:text-[1rem] mt-[-5rem] max-sm:mt-0"
+      id="final-result"
+    >
+      <div className="flex items-start justify-center gap-2 max-sm:gap-4 flex-col ">
+        <SkeletonTheme baseColor="#202020" highlightColor="#444">
+          <p>
+            Total Duration:{" "}
+            {durationInHoursMinutes !== "0 hours 00 minutes" ? (
+              durationInHoursMinutes
+            ) : (
+              <Skeleton />
+            )}{" "}
+          </p>
+          <p>
+            Average Duration:{" "}
+            {duration.averageDuration !== 0 ? avgDuration : <Skeleton />}
+          </p>
+          <p>
+            Total Duration at 1.25x:{" "}
+            {duration.totalDuration !== 0 ? duration1_25x : <Skeleton />}
+          </p>
+          <p>
+            Total Duration at 1.5x:{" "}
+            {duration.totalDuration !== 0 ? duration1_5x : <Skeleton />}
+          </p>
+          <p>
+            Total Duration at 1.75x:{" "}
+            {duration.totalDuration !== 0 ? duration1_75x : <Skeleton />}
+          </p>
+          <p>
+            Total Duration at 2x:{" "}
+            {duration.totalDuration !== 0 ? duration2x : <Skeleton />}
+          </p>
+        </SkeletonTheme>
       </div>
     </div>
   );

diff --git 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<FormValues>();
   const [pID, setPID] = useState("");
   const [error, setError] = useState<string | null>(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 (
     <div>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col w-full gap-2 h-[60vh] items-center justify-center">
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col w-full gap-2 h-[70vh] items-center justify-center  max-sm:h-[50vh]">
         <input
           type="text"
           placeholder="Playlist URL"

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 function Navbar() {
   return (
-    <div className=" flex justify-center gap-5 text-2xl uppercase h-1/6 items-center max-sm:text-xl">
+    <div className=" flex justify-center gap-5 text-2xl uppercase h-[10vh] items-center max-sm:text-xl">
       <a href="/">
         <button className="uppercase">Home</button>
       </a>