From 3ffef381772f147b98960c8354f6a157cacee5f8 Mon Sep 17 00:00:00 2001
From: David Ludwig <davidludwigii@gmail.com>
Date: Fri, 16 Apr 2021 19:27:38 -0500
Subject: [PATCH] Renamed home page to Search. Added nested routes for movie
 modal. Cleaned up movie modal with transitions/animations. Fixed other bugs

---
 src/app/App.vue                          |   8 +-
 src/app/components/AppModals.vue         |  46 ++++++
 src/app/components/CheckBox.vue          |   8 +-
 src/app/components/MovieModal.vue        | 149 -----------------
 src/app/components/modals/MovieModal.vue | 193 +++++++++++++++++++++++
 src/app/components/modals/index.ts       |  22 +++
 src/app/index.ts                         |   1 +
 src/app/routes/index.ts                  |  23 ++-
 src/app/store/actions.ts                 |  10 +-
 src/app/store/index.ts                   |  10 ++
 src/app/store/mutations.ts               |  41 +++--
 src/app/store/state.ts                   |  10 +-
 src/app/styles/index.css                 |  19 +++
 src/app/views/{Home.vue => Search.vue}   |  42 ++---
 14 files changed, 389 insertions(+), 193 deletions(-)
 create mode 100644 src/app/components/AppModals.vue
 delete mode 100644 src/app/components/MovieModal.vue
 create mode 100644 src/app/components/modals/MovieModal.vue
 create mode 100644 src/app/components/modals/index.ts
 rename src/app/views/{Home.vue => Search.vue} (66%)

diff --git a/src/app/App.vue b/src/app/App.vue
index b9faf7c..dba0e1b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,14 +1,20 @@
 <template>
 	<div class="min-h-full p-4 flex flex-col">
-		<router-view></router-view>
+		<router-view/>
 	</div>
+	<!-- <app-modal/> -->
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { Action, useStore } from "./store";
+import AppModal from "./components/AppModals.vue";
 
 export default defineComponent({
+	name: "App",
+	components: {
+		AppModal
+	},
 	setup() {
 		const store = useStore();
 		store.dispatch(Action.AuthLoad, undefined);
diff --git a/src/app/components/AppModals.vue b/src/app/components/AppModals.vue
new file mode 100644
index 0000000..23c0a54
--- /dev/null
+++ b/src/app/components/AppModals.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="modal min-h-screen" v-if="visible">
+		<component :is="component"></component>
+	</div>
+</template>
+
+<script lang="ts">
+import { Mutation } from "../store";
+import { defineComponent } from "vue";
+import { mapMutations, mapState } from "vuex";
+import { modals } from "./modals";
+
+export default defineComponent({
+	name: "AppModal",
+	components: modals,
+	computed: {
+		...mapState({
+			component: "modalName",
+			visible: "modalVisible"
+		})
+	},
+	methods: {
+		modalClicked() {
+			console.log("Modal clicked");
+		},
+		...mapMutations({
+			hide: Mutation.ModalHide
+		})
+	},
+	mounted() {
+		document.addEventListener("keydown", (event: KeyboardEvent) => {
+			if (event.key != "Escape") {
+				return;
+			}
+			this.hide();
+		});
+	}
+})
+</script>
+
+<style lang="postcss">
+.modal {
+	@apply fixed inset-0 flex flex-col;
+	background: rgba(0, 0, 0, 0.5);
+}
+</style>
diff --git a/src/app/components/CheckBox.vue b/src/app/components/CheckBox.vue
index c917e62..9b87745 100644
--- a/src/app/components/CheckBox.vue
+++ b/src/app/components/CheckBox.vue
@@ -1,6 +1,6 @@
 <template>
 	<label class="checkbox-label relative flex items-center">
-		<input type="checkbox" v-model="isChecked" :disabled="disabled">
+		<input class="hidden" type="checkbox" v-model="isChecked" :disabled="disabled">
 		<span></span>
 		<span v-if="label" class="ml-2">{{label}}</span>
 	</label>
@@ -40,12 +40,6 @@ export default defineComponent({
 
 <style>
 
-.checkbox-label input[type="checkbox"] {
-	display: none;
-	width: 0;
-	height: 0;
-}
-
 .checkbox-label input[type="checkbox"]:focus-visible + span {
 	@apply ring ring-offset-2 ring-indigo-500;
 }
diff --git a/src/app/components/MovieModal.vue b/src/app/components/MovieModal.vue
deleted file mode 100644
index 999f6c3..0000000
--- a/src/app/components/MovieModal.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-	<div class="modal p-8 overflow-scroll items-center">
-		<div class="w-full max-w-6xl bg-white overflow-hidden rounded-xl flex-col flex-shrink-0 shadow-xl">
-			<div class="bg-center bg-cover" :class="{ 'text-white': isDark }"
-				:style="`background-image: url('/api/tmdb/image/w1280${movie.backdrop_path}')`">
-				<div :style="backdropOverlayStyle" class="flex">
-					<div class="flex p-4">
-						<div class="w-24 h-40 flex-shrink-0 md:h-auto md:w-72 rounded-lg md:rounded-xl overflow-hidden shadow-md mdshadow-xl">
-							<i v-if="!movie.poster_path" class="fas fa-image mx-auto my-auto"></i>
-							<img v-else class="w-full h-full object-cover"
-								:src="`/api/tmdb/image/w342${movie.poster_path}`">
-						</div>
-						<div class="p-4 flex flex-col justify-center">
-							<h2 class="text-lg md:text-4xl">
-								<span class="font-bold">{{ movie.title }}</span>
-								<span class="opacity-70"> ({{ releaseYear }})</span>
-							</h2>
-							<div class="flex font-light dot-separated">
-								<span>{{ releaseDate }}</span>
-								<span>{{ runtime }}</span>
-							</div>
-							<div v-if="movieDetails?.overview" class="mt-4 hidden md:block">
-								<p class="">{{movieDetails?.overview}}</p>
-							</div>
-							<div class="mt-4 hidden md:block">
-								<button class="py-2 px-8 rounded-full" :class="{ 'bg-white text-black': isDark, 'bg-black text-white': !isDark }">Request</button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="p-4 space-y-4 md:hidden">
-				<div v-if="movieDetails?.overview">
-					<h3 class="font-bold">Overview</h3>
-					<p>{{ movieDetails?.overview }}</p>
-				</div>
-				<div class="text-center">
-					<button class="py-2 px-8 rounded-full bg-red-500 text-white">Request</button>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { IApiDataResponse } from "@common/api_schema";
-import { IMovieDetails } from "@lib/tmdb/schema";
-import { authFetch } from "../routes";
-import { getAverageRgb } from "../util";
-
-type MovieDetails = IApiDataResponse<IMovieDetails>;
-
-export default defineComponent({
-	computed: {
-		averageRgb(): { r: number, g: number, b: number } {
-			let rgb = getAverageRgb(this.imgElem);
-
-			// Adjust contrast
-			let c = 60;
-			let f = 259*(c + 255) / (255*(259 - c));
-			for (let k in rgb) {
-				rgb[k] = Math.min(Math.max(f*(rgb[k] - 128) + 128, 0), 255);
-			}
-
-			// Adjust brightness
-			for (let k in rgb) {
-				rgb[k] *= 0.90;
-			}
-			return rgb;
-		},
-		backdropOverlayStyle(): string {
-			let { r, g, b } = this.averageRgb;
-			return `background: linear-gradient(to right, rgba(${r}, ${g}, ${b}, 1.0), rgba(${r}, ${g}, ${b}, 0.84)`;
-		},
-		isDark(): boolean {
-			let { r, g, b } = this.averageRgb;
-			return (r*0.299 + g*0.587 + b*0.114) <= 186;
-			// r /= 255;
-			// g /= 255;
-			// b /= 255;
-			// r = r <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
-			// g = g <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
-			// b = b <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
-			// let L = 0.2126*r + 0.7152*g + 0.0722*b;
-			// return L <= 0.179;
-		},
-		releaseYear(): string {
-			if (!this.movieDetails || !this.movieDetails.release_date) {
-				return "";
-			}
-			return this.movieDetails.release_date.slice(0, 4);
-		},
-		releaseDate(): string {
-			if (!this.movieDetails || !this.movieDetails.release_date) {
-				return "";
-			}
-			let [year, month, day] = this.movieDetails.release_date.split('-');
-			return `${month}/${day}/${year}`;
-		},
-		runtime(): string {
-			if (!this.movieDetails || !this.movieDetails.runtime) {
-				return "";
-			}
-			let hours = Math.floor(this.movieDetails.runtime / 60);
-			let minutes = Math.floor(this.movieDetails.runtime % 60);
-			return (hours > 0 ? `${hours}h ` : "") + `${minutes}m`;
-		}
-	},
-	data() {
-		return {
-			movieDetails: <IMovieDetails|undefined>undefined
-		}
-	},
-	methods: {
-		async displayMovie() {
-			let response = <MovieDetails> await (authFetch(`/api/movie/details/${this.movie.id}`).then(response => response.json()));
-			this.movieDetails = response.data;
-			console.log(response);
-		}
-	},
-	mounted() {
-		this.displayMovie();
-	},
-	props: {
-		imgElem: {
-			type: HTMLImageElement,
-			required: true
-		},
-		movie: {
-			type: Object,
-			required: true
-		}
-	}
-});
-</script>
-
-<style>
-.modal {
-	@apply fixed inset-0 flex flex-col;
-	background: rgba(0, 0, 0, 0.5);
-}
-
-.dot-separated > *:not(:first-child)::before {
-	@apply px-2;
-	content: '\2022'
-}
-
-</style>
diff --git a/src/app/components/modals/MovieModal.vue b/src/app/components/modals/MovieModal.vue
new file mode 100644
index 0000000..f9f2734
--- /dev/null
+++ b/src/app/components/modals/MovieModal.vue
@@ -0,0 +1,193 @@
+<template>
+	<transition appear name="fade">
+		<div class="modal p-8 overflow-auto items-center" @click.self="close">
+			<transition name="slide">
+				<div v-if="movie !== undefined" class="relative w-full max-w-6xl bg-white overflow-hidden rounded-xl flex-col flex-shrink-0 shadow-xl">
+					<div class="bg-center bg-cover" :class="{ 'text-white': isDark }"
+						:style="movie.backdrop_path ? `background: url('/api/tmdb/image/w1280${movie.backdrop_path}')` : ''">
+						<div class="movie-modal-content z-10" :style="backdropOverlayStyle">
+							<div class="flex p-4">
+								<div class="w-24 h-40 flex-shrink-0 md:h-auto md:w-72 rounded-lg md:rounded-xl overflow-hidden shadow-md mdshadow-xl">
+									<i v-if="!movie.poster_path" class="fas fa-image mx-auto my-auto"></i>
+									<img v-else class="w-full h-full object-cover" ref="poster"
+										:src="`/api/tmdb/image/w342${movie.poster_path}`" @load="onPosterLoad">
+								</div>
+								<div class="p-4 flex flex-col justify-center">
+									<h2 class="text-lg md:text-4xl">
+										<span class="font-bold">{{ movie.title }}</span>
+										<span class="opacity-70" v-if="releaseYear"> ({{ releaseYear }})</span>
+									</h2>
+									<div class="flex font-light dot-separated">
+										<span v-if="releaseDate">{{ releaseDate }}</span>
+										<span v-if="runtime">{{ runtime }}</span>
+									</div>
+									<div v-if="movie?.overview" class="mt-4 hidden md:block">
+										<p class="">{{movie?.overview}}</p>
+									</div>
+									<div class="mt-4 hidden md:block">
+										<button class="py-2 px-8 rounded-full shadow-md hover:shadow-lg focus:outline-none ring-0 transition-transform transform hover:scale-105" :class="{ 'bg-white text-black': isDark, 'bg-black text-white': !isDark }">Request</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="p-4 space-y-4 md:hidden z-20" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);" >
+						<div v-if="movie?.overview">
+							<h3 class="font-bold mb-2">Overview</h3>
+							<p>{{ movie?.overview }}</p>
+						</div>
+						<div class="text-center">
+							<button class="py-2 px-8 rounded-full bg-red-500 text-white">Request</button>
+						</div>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { IApiDataResponse } from "@common/api_schema";
+import { IMovieDetails } from "@lib/tmdb/schema";
+import { authFetch } from "../../routes";
+import { getAverageRgb } from "../../util";
+import { useStore, Mutation } from "../../store";
+
+type movie = IApiDataResponse<IMovieDetails>;
+
+export default defineComponent({
+	computed: {
+		backdropOverlayStyle(): string {
+			let { r, g, b } = this.rgb;
+			return `background-image: linear-gradient(to right, rgba(${r}, ${g}, ${b}, 1.0), rgba(${r}, ${g}, ${b}, 0.84)`;
+		},
+		isDark(): boolean {
+			let { r, g, b } = this.rgb;
+			return (r*0.299 + g*0.587 + b*0.114) <= 186;
+			// r /= 255;
+			// g /= 255;
+			// b /= 255;
+			// r = r <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
+			// g = g <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
+			// b = b <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
+			// let L = 0.2126*r + 0.7152*g + 0.0722*b;
+			// return L <= 0.179;
+		},
+		releaseYear(): string {
+			if (!this.movie || !this.movie.release_date) {
+				return "";
+			}
+			return this.movie.release_date.slice(0, 4);
+		},
+		releaseDate(): string {
+			if (!this.movie || !this.movie.release_date) {
+				return "";
+			}
+			let [year, month, day] = this.movie.release_date.split('-');
+			return `${month}/${day}/${year}`;
+		},
+		runtime(): string {
+			if (!this.movie || !this.movie.runtime) {
+				return "";
+			}
+			let hours = Math.floor(this.movie.runtime / 60);
+			let minutes = Math.floor(this.movie.runtime % 60);
+			return (hours > 0 ? `${hours}h ` : "") + `${minutes}m`;
+		}
+	},
+	data() {
+		return {
+			rgb: {r: 0, g: 0, b: 0},
+			movie: <IMovieDetails|undefined>undefined,
+			isPosterLoaded: false
+		}
+	},
+	methods: {
+		close() {
+			this.movie = undefined;
+			this.$emit("onClose");
+		},
+		onKeyPress(event: KeyboardEvent) {
+			if (event.key != "Escape") {
+				return;
+			}
+			this.close();
+		},
+		onPosterLoad() {
+			this.isPosterLoaded = true;
+			this.computeBackdropColor();
+		},
+		computeBackdropColor() {
+			let rgb: {r: number, g: number, b: number};
+			try {
+				rgb = getAverageRgb(<HTMLImageElement>this.$refs["poster"]);
+			} catch(e) {
+				return { r: 0, g: 0, b: 0 };
+			}
+
+			// Adjust contrast
+			let c = 60;
+			let f = 259*(c + 255) / (255*(259 - c));
+			for (let k in rgb) {
+				rgb[k] = Math.min(Math.max(f*(rgb[k] - 128) + 128, 0), 255);
+			}
+
+			// Adjust brightness
+			for (let k in rgb) {
+				rgb[k] *= 0.90;
+			}
+			this.rgb = rgb;
+		},
+		async fetchMovieDetails() {
+			let response = <movie> await (authFetch(`/api/movie/details/${this.movieId}`).then(response => response.json()));
+			this.movie = response.data;
+		}
+	},
+	mounted() {
+		document.addEventListener("keydown", this.onKeyPress);
+		this.fetchMovieDetails();
+	},
+	beforeUnmount() {
+		document.removeEventListener("keydown", this.onKeyPress);
+	},
+	props: {
+		movieId: {
+			type: [Number, String],
+			required: true
+		}
+	},
+	watch: {
+		movieId(newId: number, oldId: number) {
+			console.log(newId);
+		}
+	},
+	beforeRouteEnter() {
+		useStore().commit(Mutation.LockScroll, true);
+	},
+	beforeRouteLeave() {
+		useStore().commit(Mutation.LockScroll, false);
+	}
+});
+</script>
+
+<style>
+.modal {
+	@apply fixed inset-0 flex flex-col h-screen;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+.dot-separated > *:not(:first-child)::before {
+	@apply px-2;
+	content: '\2022'
+}
+
+.modal button {
+	@apply ring-0;
+}
+
+.modal button:focus-visible {
+	@apply ring-2 ring-indigo-500 ring-offset-2;
+}
+
+</style>
diff --git a/src/app/components/modals/index.ts b/src/app/components/modals/index.ts
new file mode 100644
index 0000000..12479b4
--- /dev/null
+++ b/src/app/components/modals/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Modal names to export
+ */
+const enum Modal {
+
+}
+
+/**
+ * Modal export type
+ */
+type ModalTypes = { [K in keyof typeof Modal]: any }
+
+/**
+ * Modals to export
+ */
+export const modals: ModalTypes =  {
+}
+
+/**
+ * Export the list of modal names
+ */
+export default Modal;
diff --git a/src/app/index.ts b/src/app/index.ts
index a87b799..cdb22f3 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -7,6 +7,7 @@ import "./styles/index.css";
 let app = createApp(App);
 app.use(router);
 app.use(store);
+
 app.mount("#app");
 
 /**
diff --git a/src/app/routes/index.ts b/src/app/routes/index.ts
index aaebd00..b2f27ce 100644
--- a/src/app/routes/index.ts
+++ b/src/app/routes/index.ts
@@ -5,7 +5,9 @@ import store, { Action } from "../store";
  * Check if the user is a guest; redirect otherwise
  */
 function requiresGuest(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
+
     if (store.getters.isAuthenticated) {
+        console.log("Checking guest...");
         next({ name: "Home" });
         return;
     }
@@ -53,8 +55,25 @@ const routes: RouteRecordRaw[] = [
     {
         path: "/",
         name: "Home",
-        component: () => import("../views/Home.vue"),
-        beforeEnter: requiresAuth
+        component: {
+            beforeRouteEnter(to, from, next) {
+                next({ name: "Search" });
+            }
+        }
+    },
+    {
+        path: "/search",
+        name: "Search",
+        component: () => import("../views/Search.vue"),
+        beforeEnter: requiresAuth,
+        children: [
+            {
+                path: ":movieId",
+                name: "Lookup",
+                component: () => import("../components/modals/MovieModal.vue"),
+                props: true
+            }
+        ]
     },
     {
         path: "/login",
diff --git a/src/app/store/actions.ts b/src/app/store/actions.ts
index 191bc19..c62dc96 100644
--- a/src/app/store/actions.ts
+++ b/src/app/store/actions.ts
@@ -62,8 +62,8 @@ export const actions: Actions<IState, GettersTypes, MutationsTypes, ActionsTypes
 					resolve(body.errors || {});
 					return;
 				}
-				commit(Mutation.LoadUser, body.token);
-				commit(Mutation.StoreUser, remember);
+				commit(Mutation.UserLoad, body.token);
+				commit(Mutation.UserStore, remember);
 				resolve(null);
 			})
 			.catch(e => {
@@ -77,7 +77,7 @@ export const actions: Actions<IState, GettersTypes, MutationsTypes, ActionsTypes
 	 * Forget the login token and log the user out
 	 */
 	[Action.AuthForget]({commit}) {
-		commit(Mutation.ForgetUser, undefined);
+		commit(Mutation.UserForget, undefined);
 	},
 
 	/**
@@ -89,7 +89,7 @@ export const actions: Actions<IState, GettersTypes, MutationsTypes, ActionsTypes
 			return false;
 		}
 		try {
-			commit(Mutation.LoadUser, token);
+			commit(Mutation.UserLoad, token);
 		} catch(e) {
 			dispatch(Action.AuthForget, undefined);
 			return false;
@@ -113,7 +113,7 @@ export const actions: Actions<IState, GettersTypes, MutationsTypes, ActionsTypes
 		});
 		let response = await fetch(path, options);
 		if (response.status === 401) {
-			commit(Mutation.ForgetUser, undefined);
+			commit(Mutation.UserForget, undefined);
 			router.push({ name: "Login" });
 			throw Error("Unauthorized");
 		}
diff --git a/src/app/store/index.ts b/src/app/store/index.ts
index 9887935..379631c 100644
--- a/src/app/store/index.ts
+++ b/src/app/store/index.ts
@@ -34,3 +34,13 @@ export function useStore() {
  * Export the store instance by default
  */
 export default store;
+
+import {Mutation} from "./mutations";
+import Modal from "@app/components/modals";
+(<any>window).modalShow = (name: Modal) => {
+	store.commit(Mutation.ModalShow, name);
+}
+
+(<any>window).modalHide = () => {
+	store.commit(Mutation.ModalHide, undefined);
+}
diff --git a/src/app/store/mutations.ts b/src/app/store/mutations.ts
index 958fef2..cd91026 100644
--- a/src/app/store/mutations.ts
+++ b/src/app/store/mutations.ts
@@ -1,3 +1,4 @@
+import Modal from "@app/components/modals";
 import jwtDecode from "jwt-decode";
 import { MutationTree } from "vuex";
 import { IState } from "./state";
@@ -6,28 +7,50 @@ import { IState } from "./state";
  * All available mutation types
  */
 export enum Mutation {
-	ForgetUser = "FORGET_USER",
-	LoadUser   = "LOAD_USER",
-	StoreUser  = "STORE_USER"
+
+	LockScroll = "LOCK_SCROLL",
+
+	UserForget = "USER_FORGET",
+	UserLoad   = "USER_LOAD",
+	UserStore  = "USER_STORE",
+
 }
 
 /**
  * Type declarations for each mutation
  */
 export type MutationsTypes<S = IState> = {
-	[Mutation.ForgetUser]: (state: S) => void,
-	[Mutation.LoadUser]  : (state: S, token: string) => boolean,
-	[Mutation.StoreUser] : (state: S, remember: boolean) => void,
+	[Mutation.UserForget]: (state: S) => void,
+	[Mutation.UserLoad]  : (state: S, token: string) => boolean,
+	[Mutation.UserStore] : (state: S, remember: boolean) => void,
+	[Mutation.LockScroll]: (state: S, lock: boolean) => void,
 }
 
 /**
  * The auth mutations
  */
 export const mutations: MutationsTypes & MutationTree<IState> = {
+
+	[Mutation.LockScroll](state: IState, lock: boolean) {
+		if (lock) {
+			// document.body.style.position = "fixed";
+			// document.body.style.top = `-${window.scrollY}px`;
+			document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
+			document.body.style.overflow = "hidden";
+		} else {
+			// const scrollY = document.body.style.top;
+			// document.body.style.position = "";
+			// document.body.style.top = "";
+			document.body.style.paddingRight = "";
+			document.body.style.overflow = "";
+			// window.scrollTo(0, parseInt(scrollY || '0') * -1);
+		}
+	},
+
 	/**
 	 * Log the user out and remove the token from storage
 	 */
-	[Mutation.ForgetUser](state: IState) {
+	[Mutation.UserForget](state: IState) {
 		state.user = null;
 		sessionStorage.removeItem("jwt");
 		localStorage.removeItem("jwt");
@@ -36,7 +59,7 @@ export const mutations: MutationsTypes & MutationTree<IState> = {
 	/**
 	 * Try loading a user from the provided token
 	 */
-	[Mutation.LoadUser](state: IState, token: string) {
+	[Mutation.UserLoad](state: IState, token: string) {
 		try {
 			let user: any = jwtDecode(token);
 			state.user = {
@@ -54,7 +77,7 @@ export const mutations: MutationsTypes & MutationTree<IState> = {
 	/**
 	 * Store the user to remember them
 	 */
-	[Mutation.StoreUser](state: IState, remember: boolean) {
+	[Mutation.UserStore](state: IState, remember: boolean) {
 		if (state.user == null) {
 			sessionStorage.removeItem("jwt");
 			localStorage.removeItem("jwt");
diff --git a/src/app/store/state.ts b/src/app/store/state.ts
index 524c37f..4a45d4c 100644
--- a/src/app/store/state.ts
+++ b/src/app/store/state.ts
@@ -1,15 +1,21 @@
 import { IUser } from "./schema";
+import type Modals from "../components/modals";
+import Modal from "../components/modals";
 
 /**
  * The state definition
  */
 export interface IState {
-	user: IUser | null,
+	user        : IUser | null,
+	modalName   : Modal | null,
+	modalVisible: boolean
 }
 
 /**
  * The state implementation
  */
 export const state: IState = {
-	user: null
+	user: null,
+	modalName: null,
+	modalVisible: false,
 };
diff --git a/src/app/styles/index.css b/src/app/styles/index.css
index 3c5f02e..26dab05 100644
--- a/src/app/styles/index.css
+++ b/src/app/styles/index.css
@@ -6,3 +6,22 @@
 html, body {
 	@apply h-full;
 }
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.15s;
+}
+.fade-enter-from, .fade-leave-to {
+	opacity: 0;
+}
+
+.slide-enter-active, .slide-leave-active {
+	transform: none;
+	opacity: 1.0;
+	transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.slide-enter-from, .slide-leave-to {
+	opacity: 0;
+	transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.4, 0.0, 1, 1);
+	transform: translateY(10%);
+}
diff --git a/src/app/views/Home.vue b/src/app/views/Search.vue
similarity index 66%
rename from src/app/views/Home.vue
rename to src/app/views/Search.vue
index 44303a2..2e9be19 100644
--- a/src/app/views/Home.vue
+++ b/src/app/views/Search.vue
@@ -7,25 +7,25 @@
         </div>
     </form>
     <ul class="w-full grid gap-8 grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10  self-center ">
-        <li class="inline-block" v-for="(movie, index) in movies" @click="activeMovie = index">
-            <div class="w-full h-full flex shadow-lg bg-gray-300 text-gray-500 text-4xl overflow-hidden rounded-xl cursor-pointer motion-safe:transform hover:scale-105 transition-transform ease-out">
-                <i v-if="!movie.poster_path" class="fas fa-image mx-auto my-auto"></i>
-                <img v-else class="w-full h-full object-cover" loading="lazy" :ref="`poster-${index}`"
-                    :src="`/api/tmdb/image/w185${movie.poster_path}`">
-            </div>
-            <div>
-                <h3></h3>
-            </div>
+        <li class="inline-block" v-for="(movie, index) in movies">
+            <router-link :to="{ name: 'Lookup', params: { movieId: movie.id }, query: $route.query }">
+                <div class="w-full h-full flex shadow-md hover:shadow-lg bg-gray-300 text-gray-500 text-4xl overflow-hidden rounded-xl cursor-pointer motion-safe:transform hover:scale-105 transition-transform ease-out">
+                    <i v-if="!movie.poster_path" class="fas fa-image mx-auto my-auto"></i>
+                    <img v-else class="w-full h-full object-cover" loading="lazy" :ref="`poster-${index}`"
+                        :src="`/api/tmdb/image/w185${movie.poster_path}`">
+                </div>
+            </router-link>
         </li>
     </ul>
-    <movie-modal v-if="activeMovie != -1" :movie="movies[activeMovie]" :img-elem="$refs[`poster-${activeMovie}`]"/>
+    <router-view @onClose="modalClosed"></router-view>
+    <!-- <movie-modal v-if="activeMovie != -1" :movie="movies[activeMovie]" :img-elem="$refs[`poster-${activeMovie}`]"/> -->
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { IApiDataResponse } from "@common/api_schema";
 import { IMovieSearchResult, IPaginatedResponse } from "@lib/tmdb/schema";
-import MovieModal from "../components/MovieModal.vue";
+import MovieModal from "../components/modals/MovieModal.vue";
 import { authFetch } from "../routes";
 
 type MovieResults = IApiDataResponse<IPaginatedResponse<IMovieSearchResult>>;
@@ -36,9 +36,7 @@ export default defineComponent({
     },
     data() {
         return {
-            activeMovie: -1,
-            exampleTitles: ["John Wick", "The Incredibles 2", "Stand by Me", "Shawshank Redemption", "The Dark Knight", "Pulp Fiction", "Forest Gump"],
-            expandedIndex: -1,
+            exampleTitles: ["John Wick", "The Incredibles 2", "Stand by Me", "Shawshank Redemption", "The Dark Knight", "Pulp Fiction", "Forrest Gump"],
             isSubmitting: false,
             movies: <IMovieSearchResult[]>[],
             searchValue: <string>this.$route.query["query"] || "",
@@ -48,11 +46,19 @@ export default defineComponent({
         }
     },
     methods: {
-        async search() {
+        modalClosed() {
+            this.$router.push({ name: "Search", query: this.$route.query });
+        },
+        async search(pushRoute: boolean = true) {
             if (this.isSubmitting || this.searchValue.trim().length == 0) {
                 return;
             }
-            this.$router.replace({ name: "Home", query: { query: this.searchValue } });
+            if (document.activeElement && (<any>document.activeElement).blur) {
+                (<any>document.activeElement).blur();
+            }
+            if (pushRoute) {
+                this.$router.push({ name: "Search", query: { query: this.searchValue } });
+            }
             this.isSubmitting = true;
             try {
                 let response = <MovieResults> await (authFetch(`/api/movie/search?query=${encodeURI(this.searchValue)}`).then(response => response.json()));
@@ -68,8 +74,8 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.search();
-    }
+        this.search(false);
+    },
 });
 </script>