Olanetsoft/index.js Secret

## index.js
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import Navbar from "../components/Navbar";
import styles from "../styles/Home.module.css";

import { getXataClient } from "../src/xata";

export default function Home({ records, isAuthenticated }) {
  const router = useRouter();
  const userId = router.query.userId; // retrieve userId

  return (
    <div className={styles.container}>
      <Head>
        <title>Build a Timeline Tracker with Cloudinary, Xata and NextJs</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className="relative container mx-auto px-6 flex flex-col space-y-2">
          <Navbar isAuthenticated={isAuthenticated} userId={userId} />

          <div className="relative right-40">
            <div className="absolute z-0 w-2 h-full bg-white shadow-md inset-10 left-17 md:mx-auto md:right-0 md:left-0"></div>
            {records.map((record, index) => {
              return (
                <div className="relative z-10" key={index}>
                  <Image
                    src={record.image_url}
                    alt=""
                    className="timeline-img"
                    width={100}
                    height={100}
                  />
                  <div className="timeline-container">
                    <div className="timeline-pointer" aria-hidden="true"></div>
                    <div className="bg-white p-6 rounded-md shadow-md">
                      <span className="font-bold text-indigo-600 text-sm tracking-wide">
                        {record.timeline}
                      </span>
                      <h1 className="text-2xl font-bold pt-1 text-gray-900">
                        {record.title}
                      </h1>
                      <p className="pt-1 text-gray-800">{record.description}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </main>
    </div>
  );
}

export const getServerSideProps = async (context) => {
  let isAuthenticated;
  context.req.cookies["token"]
    ? (isAuthenticated = true)
    : (isAuthenticated = false);

  const xata = getXataClient();

  const records = await xata.db.timelines
    .select(["*", "user.firstName", "user.lastName"])
    .sort("title", "desc")
    .getAll();

  return { props: { records, isAuthenticated } };
};
	import Head from "next/head";
	import Image from "next/image";
	import Link from "next/link";
	import { useRouter } from "next/router";
	import Navbar from "../components/Navbar";
	import styles from "../styles/Home.module.css";

	import { getXataClient } from "../src/xata";

	export default function Home({ records, isAuthenticated }) {
	const router = useRouter();
	const userId = router.query.userId; // retrieve userId

	return (
	<div className={styles.container}>
	<Head>
	<title>Build a Timeline Tracker with Cloudinary, Xata and NextJs</title>
	<meta name="description" content="Generated by create next app" />
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className={styles.main}>
	<div className="relative container mx-auto px-6 flex flex-col space-y-2">
	<Navbar isAuthenticated={isAuthenticated} userId={userId} />

	<div className="relative right-40">
	<div className="absolute z-0 w-2 h-full bg-white shadow-md inset-10 left-17 md:mx-auto md:right-0 md:left-0"></div>
	{records.map((record, index) => {
	return (
	<div className="relative z-10" key={index}>
	<Image
	src={record.image_url}
	alt=""
	className="timeline-img"
	width={100}
	height={100}
	/>
	<div className="timeline-container">
	<div className="timeline-pointer" aria-hidden="true"></div>
	<div className="bg-white p-6 rounded-md shadow-md">
	<span className="font-bold text-indigo-600 text-sm tracking-wide">
	{record.timeline}
	</span>
	<h1 className="text-2xl font-bold pt-1 text-gray-900">
	{record.title}
	</h1>
	<p className="pt-1 text-gray-800">{record.description}</p>
	</div>
	</div>
	</div>
	);
	})}
	</div>
	</div>
	</main>
	</div>
	);
	}

	export const getServerSideProps = async (context) => {
	let isAuthenticated;
	context.req.cookies["token"]
	? (isAuthenticated = true)
	: (isAuthenticated = false);

	const xata = getXataClient();

	const records = await xata.db.timelines
	.select(["*", "user.firstName", "user.lastName"])
	.sort("title", "desc")
	.getAll();

	return { props: { records, isAuthenticated } };
	};