clip exceed endDate

andy89923 · Jan 12, 2023 · 8d3e222 · 8d3e222
1 parent ed1a244
commit 8d3e222
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/movis/src/components/DataRangeComp.tsx b/movis/src/components/DataRangeComp.tsx
@@ -17,17 +17,14 @@ import { DateContext } from "../utils/DataContext";
 
 const DataRangeComp: React.FC = () => {
   const { dateRange, setDateRange } = useContext(DateContext);
-  const [tempRange, setTempRange] = useState<DateValueType>({
-    startDate: new Date("2021-01-01"),
-    endDate: new Date("2022-12-31"),
-  });
 
   const handleValueChange = (newValue: DateValueType) => {
-    setTempRange(newValue as { startDate: Date; endDate: Date });
     if (newValue?.startDate != null && newValue?.endDate != null) {
+      const d1 = new Date(newValue.endDate);
+      const d2 = addYears(new Date(newValue.startDate), 2);
       setDateRange({
         startDate: new Date(newValue.startDate),
-        endDate: new Date(newValue.endDate),
+        endDate: d1 > d2 ? d2 : d1,
       });
     }
   };
@@ -38,8 +35,8 @@ const DataRangeComp: React.FC = () => {
   };
 
   const maxDate =
-    tempRange?.startDate != null
-      ? addYears(new Date(tempRange.startDate), 2)
+    dateRange?.startDate != null
+      ? addYears(new Date(dateRange.startDate), 2)
       : (new Date("2022-12-31") as Date);
 
   return (

diff --git a/movis/src/pages/index.tsx b/movis/src/pages/index.tsx
@@ -3,7 +3,9 @@ import Head from "next/head";
 import Link from "next/link";
 import Navbar from "../components/Navbar";
 import { api } from "../utils/api";
-import { useContext, useState } from "react";
+import { useContext } from "react";
+import { MdAnalytics } from "react-icons/md";
+import { IoMdAnalytics } from "react-icons/io";
 
 import DataRangeComp from "../components/DataRangeComp";
 import { DateContext } from "../utils/DataContext";
@@ -41,11 +43,31 @@ const Home: NextPage = () => {
           </div>
 
           <div className="flex flex-col items-center justify-center gap-4">
-            <h3 className="text-2xl font-bold text-white">
-              Select a Date Range to View Movie Analytics:
+            <h3 className="text-center text-2xl font-bold text-white">
+              Analyze Movies <br /> Between the Data Range:
             </h3>
             <DataRangeComp />
           </div>
+
+          <div
+            className="align-center inline-flex h-32 rounded-md text-2xl shadow-sm"
+            role="group"
+          >
+            <button
+              type="button"
+              className="inline-flex items-center rounded-l-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-blue-500"
+            >
+              <MdAnalytics className="mr-2 h-4 w-4" />
+              Profile
+            </button>
+            <button
+              type="button"
+              className="inline-flex items-center rounded-r-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-blue-500"
+            >
+              <IoMdAnalytics className="mr-2 h-4 w-4" />
+              Downloads
+            </button>
+          </div>
         </div>
       </main>
     </>