Skip to content

Commit

Permalink
Justin exhibit redo (#67)
Browse files Browse the repository at this point in the history 
* added database and page

* fixed lint errors lol...

* style changes

* prettier

* added database and page

* fixed lint errors lol...

* update package-lock

* small style

* added exhibit component

* adding comp

* finished?

* added to nav bar

* removed cateogry for now

* prettier changes

* feat: disabling github actions until MPH / post-MPH

* chore: prettier

* chore: disabled only the tsc compiler for now

* adding comp

* finished?

* prettier changes

* removed category from table and small fixes

* added linking from map

* added database and page

* fixed lint errors lol...

* style changes

* prettier

* added database and page

* fixed lint errors lol...

* update package-lock

* small style

* added exhibit component

* adding comp

* finished?

* added to nav bar

* removed cateogry for now

* prettier changes

* feat: disabling github actions until MPH / post-MPH

* chore: prettier

* chore: disabled only the tsc compiler for now

* adding comp

* finished?

* prettier changes

* removed category from table and small fixes

* added linking from map

* design changes + adding active state to buttons

* big database edits to make fun facts possible on map

* supabase function change

* documentation changes + tailwind changes

* small styling changes

* some wbe changes

* maybe will make components equal heightsl ater if have time i cant figure it out lol fml

* web resize changes

* edit nav bar

* added database and page

* fixed lint errors lol...

* style changes

* prettier

* added database and page

* fixed lint errors lol...

* update package-lock

* small style

* added exhibit component

* adding comp

* finished?

* added to nav bar

* removed cateogry for now

* prettier changes

* feat: disabling github actions until MPH / post-MPH

* chore: prettier

* chore: disabled only the tsc compiler for now

* adding comp

* finished?

* prettier changes

* removed category from table and small fixes

* added linking from map

* added database and page

* fixed lint errors lol...

* style changes

* prettier

* fixed lint errors lol...

* update package-lock

* small style

* added exhibit component

* adding comp

* finished?

* added to nav bar

* removed cateogry for now

* prettier changes

* adding comp

* finished?

* prettier changes

* removed category from table and small fixes

* added linking from map

* design changes + adding active state to buttons

* big database edits to make fun facts possible on map

* supabase function change

* documentation changes + tailwind changes

* small styling changes

* some wbe changes

* maybe will make components equal heightsl ater if have time i cant figure it out lol fml

* web resize changes

* edit nav bar

* small post rebase fixes

---------

Co-authored-by: Andrei Tan <[email protected]>
Co-authored-by: sarahhpeng <[email protected]>
  • Loading branch information
@jxmoose @andreisito @sarahhpeng
3 people authored May 22, 2024
1 parent 320e6c5 commit 8d098d9
Show file tree
Hide file tree
Showing 13 changed files with 682 additions and 517 deletions.
65 changes: 65 additions & 0 deletions .github/workflows/lint.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
name: Lint

#############################
# Start the job on push #
#############################
on:
push:
branches-ignore: [main]
pull_request:
branches: [main]

###############
# Set the Job #
###############
jobs:
build:
# Name the Job
name: Run ESLint, Prettier, and TypeScript compiler
# Set the agent to run on
runs-on: ubuntu-latest

##################
# Load all steps #
##################
steps:
##########################
# Checkout the code base #
##########################
- name: Checkout Code
uses: actions/checkout@v3
with:
# Full git history is needed to get a proper
# list of changed files within `super-linter`
fetch-depth: 0

################################
# Install packages #
################################
- name: Install packages
run: npm ci
################################
# Lint codebase #
################################
- name: Run ESLint
run: npx lint-staged
################################
# Check Prettier on codebase #
################################
- name: Run Prettier
run: npx prettier --check .
################################
# Check for TypeScript errors #
# TODO: Add this back once outstanding issues are resolved by all devs.
################################
# - name: Run TypeScript compiler (tsc) on staged files
# run: |
# # Get list of staged TypeScript files
# files=$(git diff --cached --name-only --diff-filter=d | grep '\.tsx\?$')

# # Run tsc on each file
# for file in $files
# do
# npx tsc --noEmit $file || exit 1
# done
142 changes: 142 additions & 0 deletions src/app/exhibitsPage/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import NavBar from '../../components/userComponents/navBar/navBar';
import { CategoryRow } from '../../types/types';
import { fetchAllCategories } from '../../supabase/category/queries';
import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
import BackButton from '../../components/userComponents/BackButton/page';
import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';

/**
* @returns exhibit page
*/
function App() {
const isWebDevice = useWebDeviceDetection();
const [exhibits, setExhibits] = useState<CategoryRow[]>([]);
// fetches all the exhibits to display on the page
useEffect(() => {
// Get exhibits
const getExhibits = async () => {
const fetchedExhibits: CategoryRow[] = await fetchAllCategories();
setExhibits(fetchedExhibits);
};
getExhibits();
// Detect the hash in URL and scroll to the element with the corresponding ID
}, [exhibits]);

// activates whenever the page opens.
// checks if there's a "hash" which is an id of one of the exhibits to scroll to.
// scrolls down to corresponding exhibit with slight offset
useEffect(() => {
const { hash } = window.location;
if (hash) {
setTimeout(() => {
const element = document.querySelector(hash);
const yOffset = -200;
if (element) {
const y =
element.getBoundingClientRect().top + window.scrollY + yOffset;
// check on this offset later
window.scrollTo({ top: y, behavior: 'instant' });
}
}, 1000);
}
}, []);
return (
<div>
{!isWebDevice && (
<div className="bg-ivory">
<NavBar />
<div className="p-4 m-auto">
<BackButton />
<div className="flex-col justify-start items-start mt-2">
<h1 className="text-night leading-9 font-['Lato'] mb-4">
Our Exhibits{' '}
</h1>
<p className="text-night leading-5 font-normal font-['Lato']">
The Bay Area is home to a wide variety of plant and animal life.
As you explore the exhibits, you will learn about threatened and
endangered species that are under careful monitoring by
biologists. Protective conservation efforts are in place for
these vulnerable plants and animals. We welcome you to learn
more about these important species throughout the exhibits. Scan
the QR codes on display for more information.
</p>
</div>
<Link href="/siteMapPage">
<div className="px-4 py-2 mb-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
<p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
Go to Map
</p>
</div>
</Link>
<ul>
{exhibits.map(exhibit => (
<Exhibit
title={exhibit.category || ''}
description={exhibit.description || ''}
image={exhibit.image || ''}
key={exhibit.id}
id={exhibit.id}
web={false}
/>
))}
</ul>
</div>
</div>
)}
{isWebDevice && (
<div className="bg-ivory">
<NavBar />
<div className="pl-64 pr-64 pt-24 m-auto">
<p className="text-night font-['Lato']">
{' '}
<Link className="text-scary-forest hover:underline" href="/">
{' '}
Home{' '}
</Link>{' '}
/ Our Exhibits{' '}
</p>
<div className="flex-col justify-start items-start mt-6">
<h1 className="text-night leading-9 font-['Lato'] mb-4">
Our Exhibits{' '}
</h1>
<p className="text-night leading-5 font-normal font-['Lato']">
The Bay Area is home to a wide variety of plant and animal life.
As you explore the exhibits, you will learn about threatened and
endangered species that are under careful monitoring by
biologists. Protective conservation efforts are in place for
these vulnerable plants and animals. We welcome you to learn
more about these important species throughout the exhibits. Scan
the QR codes on display for more information.
</p>
</div>
<Link href="/siteMapPage">
<div className="px-4 py-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
<p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
Go to Map
</p>
</div>
</Link>
<div className="mt-8 grid grid-cols-2 gap-16 pb-[6rem]">
{exhibits.map(exhibit => (
<Exhibit
title={exhibit.category || ''}
description={exhibit.description || ''}
image={exhibit.image || ''}
key={exhibit.id}
id={exhibit.id}
web
/>
))}
</div>
</div>
</div>
)}
</div>
);
}

export default App;
1 change: 0 additions & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};

/**
* @param root0 - Destructured object containing the properties.
* @param root0.children - The child elements to be rendered within the RootLayout component.
Expand Down
65 changes: 65 additions & 0 deletions src/components/userComponents/Exhibit/Exhibit.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';
import Image from 'next/image';
import { useWebDeviceDetection } from '../../../context/WindowWidthContext/WindowWidthContext';

/**
*
* @param root0 passed in
* @param root0.title title of exhibit
* @param root0.description description of exhibit
* @param root0.image image
* @param root0.id id of exhibit
* @param root0.web
* @returns exhibit component
*/
export default function Exhibit({
title,
description,
image,
id,
}: {
title: string;
description: string;
image: string;
id: number;
}) {
const isWebDevice = useWebDeviceDetection();
return (
<div>
{!isWebDevice && (
<li key={id} id={`a${id}`}>
<div className="w-full px-4 py-8 bg-mint-cream rounded-lg flex-col justify-start items-start gap-2.5 inline-flex mt-6">
<div className="flex-col justify-start items-start gap-5 flex">
<div className="justify-start items-center gap-2 inline-flex">
<h2 className="text-night font-semibold leading-tight font-['Lato']">
{title}
</h2>
</div>
<p className="text-night leading-tight font-normal font-['Lato']">
{description}
</p>
<Image src={image} alt="Exhibit" width={354} height={150} />
</div>
</div>
</li>
)}
{isWebDevice && (
<div className="flex flex-col w-full px-8 py-16 bg-mint-cream rounded-lg flex-col justify-start items-start gap-2.5 mt-6">
<div className="justify-start items-start gap-5">
<div className="justify-start items-center gap-2">
<h1 className="text-hunter-green font-semibold leading-tight font-['Lato']">
{' '}
{title}
</h1>
</div>
<p className="text-night leading-tight font-normal mt-5 mb-5 font-['Lato']">
{description}
</p>
</div>
<Image src={image} alt="Exhibit" width={354} height={150} />
<div className="flex-grow" />
</div>
)}
</div>
);
}
Loading

0 comments on commit 8d098d9

Please sign in to comment.