diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 23420b471..a074abec4 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,10 +1,10 @@
-"use client"; // needed for client-specific features like interactivity, state, event handlers
+"use client"; // needed for client-specific features like interactivity, state, event handlers
-import {useState} from "react";
+import {useState, useEffect} from "react";
import {useRouter} from "next/navigation";
-// import movies from "../../movies.json"; // import JSON dataset containing all movies
+import { useRef } from "react";
-type movie = { // define TypeScript type for a movie
+type movie = { // define TypeScript type for movie
title: string;
slug?: string;
poster?: string | null;
@@ -12,22 +12,36 @@ type movie = { // define TypeScript type fo
export default function Home() {
const [search, setSearch] = useState("");
- const [error, setError] = useState("");
- const router = useRouter(); // router object for navigating to other pages
+ const [error, setError] = useState("");
+ const router = useRouter(); // router object for navigating to other pages
+ const likesRef = useRef(null);
+ const recsRef = useRef(null);
+
+ const scroll = (
+ ref: React.RefObject,
+ dir: "left" | "right"
+ ) => {
+ if (ref.current) {
+ ref.current.scrollBy({
+ left: dir === "left" ? -700 : 700,
+ behavior: "smooth",
+ });
+ }
+ };
- const userSearch = async (e: any) => { // must be async for await to work (await = pauses until JSON parsing is complete!)
- e.preventDefault(); // prevent default form submission (page reloading)
+ const userSearch = async (e: any) => { // handles form submission - must be async for await to work (await = pauses until JSON parsing is complete!)
+ e.preventDefault(); // prevent default form submission (page reloading)
if (!search.trim()) return;
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(search)}`);
- const movies: movie[] = await res.json(); // convert HTTP response from JSON into JS array of movie objects
+ const movies: movie[] = await res.json(); // convert HTTP response from JSON into JS array of movie objects
- if (movies.length > 0 && movies[0].slug) // if at least one movie is returned from API and first movie has a slug defined
- router.push(`/movie/${movies[0].slug}`); // then navigate user to movie detail page using slug of first movie in results
+ if (movies.length > 0 && movies[0].slug) // if at least one movie is returned from API and first movie has a slug defined
+ router.push(`/movie/${movies[0].slug}`); // then navigate user to movie detail page using slug of first movie in results
else
- setError("Movie not found"); // if no movies were returned or first movie has no slug, show error message
+ setError("Movie not found"); // if no movies were returned or first movie has no slug, show error message
}
catch (err)
{
@@ -38,22 +52,94 @@ export default function Home() {
return (
-
+
+
+
+
Your Likes
+
+
+
+ Movie 1
+
+
+ Movie 2
+
+
+ Movie 3
+
+
+ Movie 4
+
+
+ Movie 5
+
+
+ Movie 6
+
+
+
+
+
+
+
Your Recommendations
+
+
+
+ Movie 1
+
+
+ Movie 2
+
+
+ Movie 3
+
+
+ Movie 4
+
+
+ Movie 5
+
+
+ Movie 6
+
+
+
+
+
);
diff --git a/scripts/convert_to_JSON.js b/scripts/convert_to_JSON.js
index 4f0914d77..4b182c637 100644
--- a/scripts/convert_to_JSON.js
+++ b/scripts/convert_to_JSON.js
@@ -4,6 +4,7 @@ const fs = require("fs");
const path = require("path");
const filePath = path.join(__dirname, "../preprocessed_data.xlsx") // path to excel file -- change this path to be spreadsheets\updated_datav2.xlsx
+// const filePath = path.join(__dirname, "../spreadsheets/updated_datav2.xlsx") // path to excel file
const workbook = XLSX.readFile(filePath); // read excel workbook
const sheetName = workbook.SheetNames[0]; // get first sheet