Feedback

.github/pull_request_template.md

@@ -0,0 +1,14 @@
+### Why are you making these changes? 🔬
+
+Please provide a description of the changes you made and the context driving them. Reference previous issues or PRs that help provide context.
+
+### How did you test your changes? Are there any breaking changes? ✅
+
+Before requesting a review, please make sure you've run the following commands to ensure that your current changes will build and deploy successfully. If your PR makes use of any API endpoints or adds new ones,
+please use Postman or other API testing software to ensure the calls run as expected. If there are changes to an API endpoint that will cause requests to fail, please ensure you notify the relevant stakeholders.
+
+**If you have the Vercel CLI installed**:
+- `vercel build`
+
+**If not**:
+- `npm run build`

.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+citrus/node_modules
+citrus/.pnp
+citrus/.pnp.js
+
+# testing
+/coverage
+
+# next.js
+citrus/.next/
+citrus/out/
+
+# production
+citrus/build
+
+# misc
+citrus/.DS_Store
+citrus/*.pem
+
+# debug
+citrus/npm-debug.log*
+citrus/yarn-debug.log*
+citrus/yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+citrus/.vercel
+
+# typescript
+citrus/*.tsbuildinfo
+citrus/next-env.d.ts
+.vercel
+
+#data
+cockroach-data/
+node_modules/
+
+#VS Code files
+*.code-workspace

.pre-commit-config.yaml

@@ -0,0 +1,18 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v3.2.0
+    hooks:
+    -   id: trailing-whitespace
+    -   id: end-of-file-fixer
+    -   id: check-yaml
+    -   id: check-json
+    -   id: check-added-large-files
+        args: ['--maxkb=1024']
+-   repo: local
+    hooks:
+    -   id: regenerate-api-docs
+        name: regenerate-api-docs
+        entry: pre-commit-scripts/regenerate-api-docs.sh
+        language: script

citrus/.env.template

@@ -0,0 +1,5 @@
+DATABASE_URL=
+GOOGLE_MAPS_API_KEY=
+BASE_API_URL=
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=

citrus/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

citrus/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

citrus/app/(organizers)/organizer/create/create.module.css

@@ -0,0 +1,54 @@
+.custom-heading {
+    font-size: 50px;
+  }
+
+  .custom-background {
+    background-color: rgb(1, 1, 32);
+  }
+
+  /* .custom-avatar {
+    width: 100px;
+    height: 100px;
+
+  } */
+
+  .custom-input {
+    border: 1px solid #ccc;
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    color: black;
+  }
+  .custom-box {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+
+    /* height: 100%; */
+  }
+  .custom-acc-button {
+    border: 1px solid #ccc;
+    padding:  0.5rem;
+    border-radius: 4px;
+  }
+
+
+  /* .custom-box-content {
+    flex-grow: 1; /* Ensure the content expands to fill the box */
+  /* }
+
+  .custom-box-footer {
+    margin-top: 1rem; /* Add some space above the footer */
+
+
+
+
+
+
+
+  /* .custom-avatar-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  } */

citrus/app/(organizers)/organizer/create/page.tsx

@@ -0,0 +1,6 @@
+import AddEvent from "@/components/AddEvent";
+
+
+export default  function Page() {
+  return <AddEvent />;
+}

citrus/app/(organizers)/organizer/dashboard/[id]/page.tsx

@@ -0,0 +1,13 @@
+import EditEvent from "@/components/EditEvent";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+
+export default async function Page( {params}: { params: {id: string }}) {
+    const session = await getServerSession(authOptions);
+    const res = await fetch(process.env.BASE_API_URL + 'api/experiences/' + params.id);
+    const experience = await res.json();
+    if (experience.org_id !== session?.user?.name) {
+        return <h1>You are not authorized to edit this event.</h1>
+    }
+    return <EditEvent experience={experience} />
+}

citrus/app/(organizers)/organizer/dashboard/page.tsx

@@ -0,0 +1,7 @@
+import EventCardHolder from "@/components/EventCardHolder";
+
+export default function OrganizerDashboardPage() {
+    return (
+        <EventCardHolder />
+    );
+}

citrus/app/(organizers)/organizer/experiences/[id]/page.tsx

@@ -0,0 +1,101 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCalendar, faLocationDot, faUser, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import EventButton from '@/components/EventButton';
+
+async function getEventData(id: string) {
+    const res = await fetch(process.env.BASE_API_URL + `api/experiences/${id}`, { next: {revalidate: 0}});
+    const data = await res.json();
+    return data;
+}
+
+async function getOrganizerData(id: string, isUser: boolean) {;
+    if (isUser) {
+        const res = await fetch(process.env.BASE_API_URL + `api/users/${id}`);
+        const data = await res.json();
+        return data;
+    } else {
+        const res = await fetch(process.env.BASE_API_URL + `api/organizers/${id}`);
+        const data = await res.json();
+        return data;
+    }
+}
+
+function OrganizerCard( {organizer, isUser}: {organizer: any, isUser: boolean} ) {
+    if (isUser) {
+        return (
+            <div>
+                <p className='font-bold text-2xl'><FontAwesomeIcon icon={faCircleInfo} className='text-3xl text-blue-600' /> Organized by</p>
+                <p>This event was organized by the user {organizer.username}.</p>
+            </div>
+        )
+    }
+    return (
+        <div>
+            <p className='font-bold text-2xl'><FontAwesomeIcon icon={faCircleInfo} className='text-3xl text-blue-600' /> Organized by</p>
+            <p>This event was organized by the {organizer.org_id}.</p>
+        </div>
+    )
+}
+
+export default async function Page({ params }: { params: { id: string } }) {
+    const data = await getEventData(params.id);
+    const start_time = new Date(data.start);
+    const end_time = new Date(data.end);
+    const map_url = `https://www.google.com/maps/embed/v1/place?key=${process.env.GOOGLE_MAPS_API_KEY}&q=${data.location}`;
+    const organizer = await getOrganizerData(data.user_id || data.org_id, data.user_id != null);
+
+    return (
+        <div className="w-9/12 m-auto">
+            <h1 className="text-5xl text-bold">{data.name}</h1>
+            <div id="tags" className="flex my-5">
+                <p className="flex-none bg-blue-600 rounded-lg border-blue-200 border-2 px-4 mr-2 text-center">{data.category}</p>
+                {data.tags.map((tag: string) => (
+                    <p key={tag} className="flex-none bg-violet-600 rounded-lg border-violet-200 border-2 px-4 mx-2 text-center">{tag}</p>
+                ))}
+            </div>
+            <iframe id="map"
+                className="
+                w-full
+                h-96
+                border-none
+                rounded-lg"
+                loading="lazy"
+                allowFullScreen
+                referrerPolicy="no-referrer-when-downgrade"
+                src={map_url}>
+            </iframe>
+            <div className='flex flex-row space-x-20 justify-center my-5'>
+                <div>
+                    <p className='font-bold text-2xl'><FontAwesomeIcon icon={faCalendar} className='text-3xl text-blue-600' /> When</p>
+                    <p className=''>{start_time.toLocaleString([], {dateStyle: 'long', timeStyle: 'short'})} to <br></br>{end_time.toLocaleString([], {dateStyle: 'long', timeStyle: 'short'})}</p>
+                </div>
+                <div>
+                    <p className='font-bold text-2xl'><FontAwesomeIcon icon={faLocationDot} className='text-3xl text-blue-600' /> Where </p>
+                    <p className=''>{data.location}</p>
+                </div>
+                <div>
+                    <p className='font-bold text-2xl'><FontAwesomeIcon icon={faUser} className='text-3xl text-blue-600' /> Spots left </p>
+                    <p className=''>There are {data.capacity - data.attendees.length} spots left. </p>
+                    <p>This event can host up to {data.capacity} people.</p>
+                </div>
+                <OrganizerCard organizer={organizer} isUser={data.user_id != null} />
+            </div>
+            <div>
+                <h2 className="text-3xl text-bold">Description</h2>
+                <p className="indent-8">{data.description}</p>
+            </div>
+            <div>
+                <h2 className="text-3xl text-bold">Users Attending</h2>
+                {
+                    data.attendees == null || data.attendees.length == 0 ? (
+                        <p className="indent-8">There seem to be no users currently attending this event.</p>
+                    ) : (
+                        <ul className="indent-8">
+                            {data.attendees.map((attendee: string) => <li key={attendee}> {attendee} </li>)}
+                        </ul>
+                    )
+                }
+            </div>
+        </div>
+    );
+}

citrus/app/(organizers)/organizer/layout.tsx

@@ -0,0 +1,66 @@
+import '@/app/globals.css'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import { Inter } from 'next/font/google'
+import Image from 'next/image'
+import { getServerSession } from 'next-auth/next';
+import NavBarLogin from '@/components/NavBarLogin'
+import SessionProviderWrapper from '@/components/SessionProvider'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route';
+import Link from 'next/link';
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Citrus',
+  description: 'A next-generation experience sharing platform.',
+}
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await getServerSession(authOptions);
+  const correctUserType = (!session) || (session.user && session.user.userType !== 'user');
+
+  return (
+    <html lang="en">
+      <body className={'bg-black h-screen flex flex-col'}>
+        <SessionProviderWrapper session={session}>
+        <header className='flex h-min'>
+          <Image
+            src='/eventual_logo.svg'
+            alt='Citrus Logo'
+            width={200}
+            height={200}
+          />
+          <nav className='ml-auto my-auto mr-10'>
+            <ul className='flex text-xl space-x-10'>
+              <li className='flex-1'>
+                <Link href="/organizer">Home</Link>
+              </li>
+              <li className='flex-1'>
+                <Link href="/organizer/dashboard">Dashboard</Link>
+              </li>
+              <li>
+                 <Link href="/organizer/create">Create</Link>
+              </li>
+              <li>
+                <Link href="/organizer/signup">Sign Up</Link>
+              </li>
+              <NavBarLogin />
+            </ul>
+          </nav>
+        </header>
+        <div className='flex-1'>
+          {correctUserType ? children : <h1>You are not logged in as the correct type of user.</h1>}
+        </div>
+        <footer className='flex justify-center space-x-4 bg-blue-600
+          text-xl'>
+          <p>Test</p>
+        </footer>
+        </SessionProviderWrapper>
+      </body>
+    </html>
+  )
+}