Justinxue/phs 49 exhibit page #45

jxmoose · 2024-03-17T22:28:06Z

✨ New in this PR ✨

One liner: what did you do? 🛠

Added exhibits database, queries, and page

Coverage 🙆‍♀️

use this section to break up your task into submodules and track progress, copy from Linear and mark what was completed

Create a supabase table titled ‘exhibits’ (include whatever column is relevant. id, category, title, description) + dummy data
Write create, update, and delete queries for the exhibit table
Add functions on Retool (create and delete. similar to news feed)
Create exhibit page with drop down menu so that if you click on that exhibit of a category, the drop down for that category will open automatically. For fun facts, have it scroll automatically to THAT fun fact.
(CAN'T DO TILL MAP IS COMPLETE) Link exhibit pop ups to respective part of the exhibit page (this can lowk only be done once pop ups are done)

How can the reviewer test your code? Where is this sprint located in the codebase? 👩‍💻

src/components/userComponents/Exhibit/Exhibit.tsx
src/app/exhibitsPage/page.tsx

REQUIRED: Link a short video demo of the feature you have added. 👩‍💻

https://www.loom.com/share/6d3149a17f844be3a3b750075c30b48d?sid=a0b835d9-146b-4b21-abd3-a4c87ddc0e5f

Any bugs you encountered or still having trouble with? 🐛

Resources 📔

REQUIREMENTS in this section: Link all relevant online resources and related PRs. Write down any new dependencies or packages and link to their documentation. If you ran into bugs, link any stack overflow or online resources that helped you unblock yourself

❗IF this sprint was marked as FRONTEND on linear, cc Claire Wang

@cluurie

REMEMBER: once PR is made, also request a PR review Sarah, CC'ing is NOT enough!
🏚 cc: @sarahhpeng @andreisito

linear · 2024-03-17T22:28:10Z

PHS-49 Exhibit Page

davidqing6432

pretty good! a few things to take a look at, but overall nice work @jxmoose !

davidqing6432 · 2024-04-04T22:41:01Z

.github/workflows/lint.yml

-#     #     run: |
-#     #       # Get list of staged TypeScript files
-#     #       files=$(git diff --cached --name-only --diff-filter=d | grep '\.tsx\?$')
+      ################################


is this accurately needed in this pr? this seems like some linting changes that should be in a different pr, but if it's necessary for this pr, thats fine.

davidqing6432 · 2024-04-04T22:41:20Z

database.types.ts

empty file being added, seems like it might not need to be here

davidqing6432 · 2024-04-04T22:42:29Z

src/app/exhibitsPage/page.tsx

+  // ignore the native anchor action
+  evt.preventDefault();
+
+  window.history.back();


edge case that can likely be dealt with later: what if this is the first page we end up on? (i.e. if we open up a new tab and go straight to the exhibits page, what should we see?)

davidqing6432 · 2024-04-04T22:46:36Z

src/components/userComponents/Exhibit/Exhibit.tsx

+  id: string;
+}) {
+  return (
+    <ul key={id}>


you might have meant a
element here (which is a list element) vs a ul which is an unordered list. from my understanding, there is a container around a lot of these components, so li would be appropriate

the normal syntax of an unordered list:

<ul> <li></li> <li></li> <li></li> </ul>

davidqing6432 · 2024-04-04T22:49:19Z

src/components/userComponents/Exhibit/Exhibit.tsx

+ * @param root0.id id of exhibit
+ * @returns exhibit component
+ */
+export default function Exhibit({


this is an example of something that could be refactored to match both the web and mobile screen versions, but this is something we can talk about later @sarahhpeng @jxmoose

davidqing6432 · 2024-04-04T22:53:26Z

src/components/userComponents/Exhibit/Exhibit.tsx

+      <div className="w-[100%] px-4 pt-6 pb-7 bg-mint-cream rounded 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">
+            <div className="text-neutral-700 text-lg font-bold font-['Lato']">


text styling should likely be done with <h_> tags (in this case h2), since it is based off the H2 text style in the design. i haven't looked through the way styling is done in the app though, so this might be wrong.

davidqing6432 · 2024-04-04T22:53:58Z

src/components/userComponents/Exhibit/Exhibit.tsx

+              {title}
+            </div>
+          </div>
+          <div className="text-black text-base font-light font-['Lato']">


same concept here, with a p tag.

davidqing6432 · 2024-04-04T22:56:43Z

src/types/supabase.ts

check that this is accurate, but this seems fine to me?

davidqing6432 · 2024-04-04T22:57:04Z

src/types/supabase.ts

-        Relationships: []
-      }
-    }
+          category?: Database['public']['Enums']['tour_category'];


style change mostly in this file, check if this passes prettier

cluurie · 2024-04-09T04:16:22Z

DEZIN COMMENTS (pls finish latest EOD 4/10 and text me when done so I can review) @jxmoose

change the back arrow button because icons have been updated (pls refer to the component library)
border-radius of exhibit cards should be 8px
check fonts (the card titles are smaller and bolder than the designs)
check padding of the cards (should be bigger by some amount)
check spacing between cards (INSPECT THE SPACING BETWEEN AND INSIDE EVERYTHING ON THE SCREEN)
line height of the text inside exhibit card is bigger than it should be (inspect the figma)
add click states for "go to map" button and back arrow button (check design system or ask me)

jxmoose · 2024-04-10T07:53:59Z

https://www.loom.com/share/ce8eb288ad084d1d899f04778d658786?sid=2d698d94-2ef5-49b9-9620-78fff369f431

new loom @cluurie

jxmoose · 2024-04-11T18:34:15Z

made big database changes. basically divided exhibits into categories (which hold all the info on exhibits), and the exhibits table (which holds the locations, and an id pointing to which category it is). this allowed all the fun facts to essentially be the same on the map.

andreisito · 2024-04-12T01:26:47Z

src/app/exhibitsPage/page.tsx

+        <div className="flex-col justify-start items-start mt-2">
+          <div className="text-night text-[32px] font-bold leading-9 font-['Lato'] mb-4">
+            Our Exhibits{' '}
+          </div>


Use a text based tag (p, h1, h2, etc..) for abstraction purposes. Use inspect on figma file to choose the right tag, review globals.css file for custom aliases. Swithc text-[32px] to tailwind units -> text-8 but there is probably a tag in globals.css that has the right styling

andreisito · 2024-04-12T01:27:24Z

src/app/exhibitsPage/page.tsx

+        </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">
+            <div className="active:text-hunterGreen text-center text-asparagus text-base font-bold font-['Lato'] leading-tight">


Use a text tag. See above comment / talk to Andrei.

andreisito · 2024-04-12T01:27:50Z

src/app/exhibitsPage/page.tsx

+          <div className="text-night text-base leading-5 font-normal font-['Lato']">
+            Saratoga is home to an abundance of plant and animal life. As you
+            explore these exhibits you will learn about species that are
+            endangered and being carefully monitored by scientists with


text tag, see above comment

andreisito · 2024-04-12T01:28:51Z

src/components/userComponents/Exhibit/Exhibit.tsx

+      <div className="w-[100%] 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 text-2xl font-semibold font-['Lato']">


some of this styling isn't necessary. See globals.css to see the default styling on h2 tags. we do this to reduce redundant styling.

andreisito · 2024-04-12T01:29:19Z

src/components/userComponents/Exhibit/Exhibit.tsx

+}) {
+  return (
+    <li key={id} id={`a${id}`}>
+      <div className="w-[100%] px-4 py-8 bg-mint-cream rounded-lg flex-col justify-start items-start gap-2.5 inline-flex mt-6">


w-full instead of w-[100%] for convention.

andreisito · 2024-04-12T01:30:10Z

src/components/userComponents/SiteMap/DisplayPreviewCard.tsx

@@ -130,7 +129,7 @@ function DisplayPreviewCard({
                />
              </svg>
            </div>
-            <Link href={`/spotlightPage/${id}`}>
+            <Link href={`/exhibitsPage/#a${id}`}>
              <h3 className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal">


check globals.css to avoid redundant styling. see above comments

andreisito · 2024-04-12T01:32:56Z

src/app/exhibitsPage/page.tsx

+import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
+import BackButton from '../../components/userComponents/BackButton/page';
+
+/**


More comprehensive comments for this page and what's happening in useEffect. Assume minimal background knowledge of this sprint for handoff

sarahhpeng requested review from andreisito and davidqing6432 April 2, 2024 02:38

davidqing6432 reviewed Apr 4, 2024

View reviewed changes

jxmoose force-pushed the justinxue/phs-49-exhibit-page branch from 627d435 to 1ba952e Compare April 10, 2024 06:30

andreisito requested changes Apr 12, 2024

View reviewed changes

jxmoose closed this May 22, 2024

jxmoose force-pushed the justinxue/phs-49-exhibit-page branch from 5cd000c to 2a08d25 Compare May 22, 2024 05:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Justinxue/phs 49 exhibit page #45

Justinxue/phs 49 exhibit page #45

jxmoose commented Mar 17, 2024 •

edited

Loading

linear bot commented Mar 17, 2024

davidqing6432 left a comment

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

davidqing6432 Apr 4, 2024

cluurie commented Apr 9, 2024 •

edited

Loading

jxmoose commented Apr 10, 2024

jxmoose commented Apr 11, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

andreisito Apr 12, 2024

Justinxue/phs 49 exhibit page #45

Justinxue/phs 49 exhibit page #45

Conversation

jxmoose commented Mar 17, 2024 • edited Loading

✨ New in this PR ✨

One liner: what did you do? 🛠

Coverage 🙆‍♀️

How can the reviewer test your code? Where is this sprint located in the codebase? 👩‍💻

REQUIRED: Link a short video demo of the feature you have added. 👩‍💻

Any bugs you encountered or still having trouble with? 🐛

Resources 📔

❗IF this sprint was marked as FRONTEND on linear, cc Claire Wang

linear bot commented Mar 17, 2024

davidqing6432 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cluurie commented Apr 9, 2024 • edited Loading

jxmoose commented Apr 10, 2024

jxmoose commented Apr 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jxmoose commented Mar 17, 2024 •

edited

Loading

cluurie commented Apr 9, 2024 •

edited

Loading