Merge pull request #48 from wizelineacademy/H5-IntegrationP1P2

chore: fixed auth redirect on server components to check logged in se…

knowx/src/app/actions/redirect.tsx

@@ -3,20 +3,20 @@
 
 import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth/next";
+import { categorySearchFunction } from "./search";
 
-export async function checkSession(): Promise<boolean> {
+export async function checkSession(): Promise<Boolean> {
   // const { data: session } = useSession();
   // if (!session) {
   //   redirect("/auth");
   //   return false;
   // }
   // return true;
   const session = await getServerSession();
-  if (!session) {
-    redirect("/auth");
-    return false;
-  }
-  return true;
+  return session ? true : false;
+  // if (!session) {
+  //   // return false;
+  // }
 }
 
 // export async function startPhase1(query: string) {
@@ -29,6 +29,7 @@ export async function navigate(query: string) {
 export async function navigateToDashboard() {
   redirect("/dashboard");
 }
-export async function navigateToPhase2() {
+export async function navigateToPhase2(query: string) {
+  categorySearchFunction(query);
   redirect("/dashboard/phase2");
 }

knowx/src/app/actions/search.tsx

@@ -4,14 +4,11 @@ import { cookies } from "next/headers";
 import {
   ORIGINAL_SEARCH_VALUES_KEY,
   SEARCH_VALUES_KEY,
+  CURRENT_QUERY_KEY,
+  ORIGINAL_CATEGORIES_KEY,
+  CATEGORIES_KEY,
 } from "../const/cookies";
-import {
-  getSearchObjects,
-  setCookie,
-  searchAllObjects,
-  storeOriginalObjects,
-  initialSearch,
-} from "../helper/cookies";
+import { getSearchObjects, getCategories, setCookie } from "../helper/cookies";
 import { navigate } from "./redirect";
 
 export async function toggleSearchObject(obj: string) {
@@ -24,6 +21,26 @@ export async function toggleSearchObject(obj: string) {
   }
   setCookie(SEARCH_VALUES_KEY, newFavorites.join(","));
 }
+export async function toggleCategory(obj: string) {
+  const { categories } = getCategories();
+  let newFavorites: string[] = [];
+  if (categories.includes(obj)) {
+    newFavorites = categories.filter((object) => object !== obj);
+  } else {
+    newFavorites = [...categories, obj];
+  }
+  setCookie(CATEGORIES_KEY, newFavorites.join(","));
+}
+export async function addCategory(obj: string) {
+  const { categories } = getCategories();
+  let newFavorites: string[] = [];
+  if (categories.includes(obj)) {
+    newFavorites = categories.filter((object) => object !== obj);
+  } else {
+    newFavorites = [...categories, obj];
+  }
+  setCookie(ORIGINAL_CATEGORIES_KEY, newFavorites.join(","));
+}
 
 export async function getSearchObjectsAction() {
   return getSearchObjects();
@@ -34,20 +51,35 @@ export async function initialSearchAction(query: string) {
   console.log(`topic=${topic}`);
   // navigate(`dashboard/phase1/${query}`);
 
-  // const u = new URLSearchParams({ topic: topic });
-  // const res = await fetch(`${process.env.API_ROOT_ROUTE}/search/initial`, {
-  //   method: "POST",
-  //   body: u,
-  // });
-  // console.log(`huh???? =${res}`);
-  // const result = await res.json();
-  // const data = (await result) as string[];
-
-  // return { data };
-  let resFake = ["Netflix", "Hulu", "Disney+"];
-  // storeOriginalObjects(res);
-  setCookie(ORIGINAL_SEARCH_VALUES_KEY, resFake.join(","));
-  return resFake;
+  const u = new URLSearchParams({ topic: topic });
+  const res = await fetch(`${process.env.API_ROOT_ROUTE}/search/initial`, {
+    method: "POST",
+    body: u,
+  });
+  console.log(`huh???? =${res}`);
+  const data: string[] = await res.json();
+  console.log(`data=${data}`);
+
+  setCookie(CURRENT_QUERY_KEY, data.join(","));
+  setCookie(ORIGINAL_SEARCH_VALUES_KEY, data.join(","));
+  return data;
+}
+export async function categorySearchFunction(query: string) {
+  const topic = query;
+  console.log(`topic=${topic}`);
+  // navigate(`dashboard/phase1/${query}`);
+
+  const u = new URLSearchParams({ topic: topic });
+  const res = await fetch(`${process.env.API_ROOT_ROUTE}/search/categories`, {
+    method: "POST",
+    body: u,
+  });
+  console.log(`huh???? =${res}`);
+  const data: string = await res.json();
+  console.log(`data=${data}`);
+
+  setCookie(ORIGINAL_CATEGORIES_KEY, data);
+  return data;
 }
 
 export async function getUserIdFunc(

knowx/src/app/api/phase1/route.ts

@@ -8,11 +8,9 @@ export async function POST(request: Request, response: Response) {
     method: "POST",
     body: u,
   });
-  // console.log(`huh???? =${await res.json()}`);
   const data = (await res.json()) as string[];
 
   return Response.json({ data });
-  // return Response.json({ data: ["Netflix", "Hulu", "Disney+"] });
 }
 
 export async function PUT(request: Request, response: Response) {

knowx/src/app/components/Dashboard/InputBar.tsx

@@ -15,7 +15,7 @@ const InputBar = () => {
         className="absolute h-20 w-30 rounded-lg text-gray px-4 text-lg right-0"
         onClick={() => {
           initialSearchAction(query);
-          navigate("query");
+          navigate(query);
         }}
       >
         <Image

knowx/src/app/components/Phase1/P1_ResultsWrapper.tsx

@@ -3,7 +3,10 @@ import React from "react";
 import Image from "next/image";
 import { navigateToPhase2 } from "@/app/actions/redirect";
 
-const P1_ResultsWrapper = (props: { children: JSX.Element[] }) => {
+const P1_ResultsWrapper = (props: {
+  children: JSX.Element[];
+  query: string;
+}) => {
   return (
     // <div className="flex flex-row gap-4 mt-4 flex-wrap w-full justify-around">
     <div className="flex bg-backgroundLight ">
@@ -32,7 +35,7 @@ const P1_ResultsWrapper = (props: { children: JSX.Element[] }) => {
         >
           <div
             className="text-white text-xl font-bold text-center"
-            onClick={() => navigateToPhase2()}
+            onClick={() => navigateToPhase2(props.query)}
           >
             Search
           </div>

knowx/src/app/components/Phase1/P1_SearchResult.tsx

@@ -14,11 +14,6 @@ const P1_SearchResult = (props: P1_SearchResultProps) => {
           ? "bg-black hover:bg-purple-300 transition duration-100 ease-in-out"
           : "bg-purple-500 transition duration-100 ease-in-out"
       }`}
-      // className={` w-[250px] h-[100px] rounded-lg m-10 p-10 ${
-      //   !props.isFavorite
-      //     ? "bg-white hover:bg-purple-300 transition duration-100 ease-in-out"
-      //     : "bg-purple-500 transition duration-100 ease-in-out"
-      // }`}
       onClick={() => toggleSearchObject(props.content)}
     >
       <div className="text-white text-xl font-bold text-center">

knowx/src/app/components/Phase2/P2_NewCategory.tsx

@@ -0,0 +1,23 @@
+"use client";
+import React from "react";
+import { addCategory } from "@/app/actions/search";
+
+const P2_NewCategory = () => {
+  let newFeature = "";
+  return (
+    <div className="flex mt-5 w-full items-center justify-center ">
+      <input
+        name=""
+        className="bg-black dark:bg-backgroundLight rounded-lg text-white dark:text-black text-base py-3 text-center"
+        onChange={(e) => (newFeature = e.target.value)}
+        // value={newFeature}
+      ></input>
+      <button
+        className="text-black dark:text-white text-4xl pl-4 pr-1"
+        onClick={() => addCategory(newFeature)}
+      ></button>
+    </div>
+  );
+};
+
+export default P2_NewCategory;

knowx/src/app/const/cookies.ts

@@ -1,2 +1,5 @@
 export const SEARCH_VALUES_KEY = "searchValues";
 export const ORIGINAL_SEARCH_VALUES_KEY = "originalSearchValues";
+export const CATEGORIES_KEY = "categories";
+export const ORIGINAL_CATEGORIES_KEY = "originalCategories";
+export const CURRENT_QUERY_KEY = "currentQuery";

knowx/src/app/dashboard/page.tsx

@@ -4,14 +4,14 @@ import Image from "next/image";
 import UserMenu from "../components/UserMenu";
 import { checkSession } from "@/app/actions/redirect";
 import InputBar from "@/app/components/Dashboard/InputBar";
-import CheckTheme from "@/app/actions/theme";
-import { navigate } from "@/app/actions/redirect";
-import { logSearch, getUserId } from "../../../db/dbActions";
+import { redirect } from "next/navigation";
 
 export default async function Home() {
   // const { data: session } = useSession();
-  checkSession();
-  // const theme = await CheckTheme();
+  if (!(await checkSession())) {
+    redirect("/auth");
+  }
+  // const theme = await checkTheme();
   // if (!session) {
   //   redirect("/auth");
   // }

knowx/src/app/dashboard/phase1/[query]/page.tsx

@@ -1,27 +1,24 @@
 /* src/app/dashboard/page.tsx */
-import Image from "next/image";
 // import { useState, useEffect } from "react";
 import { checkSession } from "@/app/actions/redirect";
-import { initialSearchAction, getUserIdFunc } from "@/app/actions/search";
-import { useState, useEffect } from "react";
-import { useSession } from "next-auth/react";
-import { redirect } from "next/navigation";
-import { useRouter } from "next/navigation";
 import P1_SearchResult from "../../../components/Phase1/P1_SearchResult";
 import P1_ResultsWrapper from "@/app/components/Phase1/P1_ResultsWrapper";
-import { check } from "drizzle-orm/mysql-core";
 import { getSearchObjectsAction } from "@/app/actions/search";
 import UserMenu from "@/app/components/UserMenu";
+import { redirect } from "next/navigation";
 
 export default async function Home({ params }: { params: { query: string } }) {
-  checkSession();
+  if (!(await checkSession())) {
+    redirect("/auth");
+  }
+
   // const [resultData, setData] = useState<string[]>([]);
   // const data = await initialSearchAction(decodeURI(params.query));
   const { searchObjects, allObjects } = await getSearchObjectsAction();
   return (
     <main className="">
       <UserMenu className="absolute right-0 mr-3" />
-      <P1_ResultsWrapper>
+      <P1_ResultsWrapper query={params.query}>
         {allObjects.map((item: string, index: number) => (
           <P1_SearchResult
             content={item}
@@ -32,11 +29,6 @@ export default async function Home({ params }: { params: { query: string } }) {
           />
         ))}
       </P1_ResultsWrapper>
-      {/* {searchAmount === 0 ? (
-        <div className="text-center mx-auto">ALL</div>
-      ) : (
-        <div className="text-center mx-auto">SOME {searchAmount}</div>
-      )} */}
     </main>
   );
 }