From 0c57aa1a73aa5629156d40470e68a5404b57a32b Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 19 Feb 2023 19:54:34 +0100
Subject: [PATCH] finalized domain redirect modal

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
Co-authored-by: James Hawkins <jhawki2005@gmail.com>
---
 src/components/Button.tsx             |  6 ++--
 src/components/Overlay.tsx            |  8 ++++-
 src/components/Transition.tsx         | 25 +++++++++++++--
 src/components/layout/Modal.tsx       | 31 +++++++++++++++---
 src/setup/locales/en/translation.json |  4 +--
 src/views/other/v2Migration.tsx       |  9 +++++-
 src/views/search/HomeView.tsx         | 45 +++++++++++++++++++++++----
 7 files changed, 106 insertions(+), 22 deletions(-)
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 49343b6f..9a74f84d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -7,17 +7,15 @@ interface Props {
   children?: ReactNode;
 }
 
-// TODO style button
-// TODO transition modal
 export function Button(props: Props) {
   return (
     <button
       type="button"
       onClick={props.onClick}
-      className="inline-flex items-center justify-center"
+      className="inline-flex items-center justify-center rounded-lg bg-white px-8 py-3 font-bold text-black transition-[transform,background-color] duration-100 hover:bg-gray-200 active:scale-105 md:px-16"
     >
       {props.icon ? (
-        <span className="mr-3">
+        <span className="mr-3 hidden md:inline-block">
           <Icon icon={props.icon} />
         </span>
       ) : null}
diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
index 243caedd..83e61f8f 100644
--- a/src/components/Overlay.tsx
+++ b/src/components/Overlay.tsx
@@ -1,3 +1,4 @@
+import { Transition } from "@/components/Transition";
 import { Helmet } from "react-helmet";
 
 export function Overlay(props: { children: React.ReactNode }) {
@@ -6,7 +7,12 @@ export function Overlay(props: { children: React.ReactNode }) {
       <Helmet>
         <body data-no-scroll />
       </Helmet>
-      <div className="fixed inset-0 z-[99999] flex h-full w-full items-center justify-center bg-[rgba(8,6,18,0.85)]">
+      <div className="fixed inset-0 z-[99999]">
+        <Transition
+          animation="fade"
+          className="absolute inset-0 bg-[rgba(8,6,18,0.85)]"
+          isChild
+        />
         {props.children}
       </div>
     </>
diff --git a/src/components/Transition.tsx b/src/components/Transition.tsx
index f86a753e..8406a19b 100644
--- a/src/components/Transition.tsx
+++ b/src/components/Transition.tsx
@@ -4,14 +4,16 @@ import {
   TransitionClasses,
 } from "@headlessui/react";
 
-type TransitionAnimations = "slide-down" | "slide-up" | "fade";
+type TransitionAnimations = "slide-down" | "slide-up" | "fade" | "none";
 
 interface Props {
-  show: boolean;
+  show?: boolean;
   durationClass?: string;
   animation: TransitionAnimations;
   className?: string;
   children?: ReactNode;
+  appearOnMount?: boolean;
+  isChild?: boolean;
 }
 
 function getClasses(
@@ -58,8 +60,25 @@ export function Transition(props: Props) {
   const duration = props.durationClass ?? "duration-200";
   const classes = getClasses(props.animation, duration);
 
+  if (props.isChild) {
+    return (
+      <HeadlessTransition.Child
+        as={Fragment}
+        appear={props.appearOnMount}
+        {...classes}
+      >
+        <div className={props.className}>{props.children}</div>
+      </HeadlessTransition.Child>
+    );
+  }
+
   return (
-    <HeadlessTransition show={props.show} as={Fragment} {...classes}>
+    <HeadlessTransition
+      show={props.show}
+      as={Fragment}
+      appear={props.appearOnMount}
+      {...classes}
+    >
       <div className={props.className}>{props.children}</div>
     </HeadlessTransition>
   );
diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx
index 17f0c4d2..bd5b9c47 100644
--- a/src/components/layout/Modal.tsx
+++ b/src/components/layout/Modal.tsx
@@ -1,4 +1,5 @@
 import { Overlay } from "@/components/Overlay";
+import { Transition } from "@/components/Transition";
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
@@ -7,18 +8,38 @@ interface Props {
   children?: ReactNode;
 }
 
-export function ModalFrame(props: { children?: ReactNode }) {
-  return <Overlay>{props.children}</Overlay>;
+export function ModalFrame(props: Props) {
+  return (
+    <Transition
+      className="fixed inset-0 z-[9999]"
+      animation="none"
+      appearOnMount
+      show={props.show}
+    >
+      <Overlay>
+        <Transition
+          isChild
+          appearOnMount
+          className="flex h-full w-full items-center justify-center"
+          animation="slide-up"
+        >
+          {props.children}
+        </Transition>
+      </Overlay>
+    </Transition>
+  );
 }
 
 export function Modal(props: Props) {
-  if (!props.show) return null;
-  return createPortal(<ModalFrame>{props.children}</ModalFrame>, document.body);
+  return createPortal(
+    <ModalFrame show={props.show}>{props.children}</ModalFrame>,
+    document.body
+  );
 }
 
 export function ModalCard(props: { children?: ReactNode }) {
   return (
-    <div className="relative w-4/5 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10">
+    <div className="relative mx-2 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10">
       {props.children}
     </div>
   );
diff --git a/src/setup/locales/en/translation.json b/src/setup/locales/en/translation.json
index 811e33b7..8d80a1dc 100644
--- a/src/setup/locales/en/translation.json
+++ b/src/setup/locales/en/translation.json
@@ -79,9 +79,9 @@
     }
   },
   "v3": {
-    "newSiteTitle": "We have a new site!",
+    "newSiteTitle": "Version 3 has released!",
     "newDomain": "https://movie-web.app",
-    "newDomainText": "We've moved from domain, you can now access our website on <0>https://movie-web.app</0>. Make sure to change all your bookmarks as <1>the old link will stop working on 25 Febuary 2023.</1>",
+    "newDomainText": "We have a new domain. You can now access our website on <0>https://movie-web.app</0>. Make sure to update all your bookmarks as <1>the old link will stop working on {{date}}.</1>",
     "tireless": "We've worked tirelessly on this new update, we hope you will enjoy what we've been cooking up for the past months."
   }
 }
diff --git a/src/views/other/v2Migration.tsx b/src/views/other/v2Migration.tsx
index 483b6f77..85f3685c 100644
--- a/src/views/other/v2Migration.tsx
+++ b/src/views/other/v2Migration.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import pako from "pako";
+import { MWMediaType } from "@/backend/metadata/types";
+import { conf } from "@/setup/config";
 
 function fromBinary(str: string): Uint8Array {
   const result = new Uint8Array(str.length);
@@ -57,8 +59,13 @@ export function V2MigrationView() {
     const newParams = [] as string[];
     newUrl.searchParams.forEach((_, key) => newParams.push(key));
     newParams.forEach((v) => newUrl.searchParams.delete(v));
+    newUrl.searchParams.append("migrated", "1");
 
-    newUrl.hash = "";
+    // hash router compatibility
+    newUrl.hash = conf().NORMAL_ROUTER ? "" : `/search/${MWMediaType.MOVIE}`;
+    newUrl.pathname = conf().NORMAL_ROUTER
+      ? `/search/${MWMediaType.MOVIE}`
+      : "";
 
     window.location.href = newUrl.toString();
   }, [done]);
diff --git a/src/views/search/HomeView.tsx b/src/views/search/HomeView.tsx
index 334486f3..f9494f3b 100644
--- a/src/views/search/HomeView.tsx
+++ b/src/views/search/HomeView.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from "react-i18next";
-import { Icon, Icons } from "@/components/Icon";
+import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import {
@@ -86,6 +86,7 @@ function NewDomainModal() {
   const [show, setShow] = useState(
     new URLSearchParams(window.location.search).get("migrated") === "1"
   );
+  const [loaded, setLoaded] = useState(false);
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -97,9 +98,41 @@ function NewDomainModal() {
     });
   }, [history]);
 
-  // Hi Isra! (TODO remove this in the future lol)
+  useEffect(() => {
+    setTimeout(() => {
+      setLoaded(true);
+    }, 500);
+  }, []);
+
+  // If you see this bit of code, don't snitch!
+  // We need to urge users to update their bookmarks and usage,
+  // so we're putting a fake deadline that's only 2 weeks away.
+  const day = 1e3 * 60 * 60 * 24;
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const firstVisitToSite = new Date(
+    localStorage.getItem("firstVisitToSite") || Date.now()
+  );
+  localStorage.setItem("firstVisitToSite", firstVisitToSite.toISOString());
+  const fakeEndResult = new Date(firstVisitToSite.getTime() + 14 * day);
+  const endDateString = `${fakeEndResult.getDate()} ${
+    months[fakeEndResult.getMonth()]
+  } ${fakeEndResult.getFullYear()}`;
+
   return (
-    <Modal show={show}>
+    <Modal show={show && loaded}>
       <ModalCard>
         <div className="mb-12">
           <div
@@ -109,7 +142,7 @@ function NewDomainModal() {
             }}
           />
           <div className="relative flex items-center justify-center">
-            <div className="rounded-full bg-bink-200 py-4 px-12 text-xl font-bold text-white">
+            <div className="rounded-full bg-bink-200 py-4 px-12 text-center text-sm font-bold text-white md:text-xl">
               {t("v3.newDomain")}
             </div>
           </div>
@@ -119,8 +152,8 @@ function NewDomainModal() {
             {t("v3.newSiteTitle")}
           </h2>
           <p className="leading-7">
-            <Trans i18nKey="v3.newDomainText">
-              <span className="font-bold text-white" />
+            <Trans i18nKey="v3.newDomainText" values={{ date: endDateString }}>
+              <span className="text-slate-300" />
               <span className="font-bold text-white" />
             </Trans>
           </p>
