Landing Page by 06unnati · Pull Request #160 · TritonSE/SPLAGen-Website

06unnati · 2025-05-14T02:55:38Z

Tracking Info

Resolves #115

CSS Checklist

Do you have width, padding, margin with a high (> ~ 100px) or negative value? Do you need it? Can rem em % vw vh be used instead?
Did you avoid hard coding positions? (position, top, left, rules) Can display:flex; and justify and align uses be used instead?

Changes

I created the landing page itself.

Testing

did npm run dev to see and added a link to the landing page.

Confirmation of Change

I created fake posts to see if it looked right.

Miyuki-L

The code isn't working as intended. There are various view places to be fixed up

Miyuki-L · 2025-05-14T05:00:59Z

Why do we need change this ?

Miyuki-L · 2025-05-14T05:02:22Z

+
+export const getPost = async (): Promise<APIResult<Discussion[]>> => {
+  try {
+    const response: Response = await get("/api/discussions");


#158
make the chagnes here to the get like the chagnes to the createPost in this PR.

You should be sending the firebase token in to this getPost function and to the get function

This still needs to be addressed.

getPost function needs to take in a firebase token which is then passed to the get function after callling createAuthHeader on the firebase token

Miyuki-L · 2025-05-14T05:02:59Z

+      return handleAPIError("Failed to fetch posts");
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment


we should disable.

I think in our last 1-1 we can set lin 37 with as Discussion [] and it be good.

Miyuki-L · 2025-05-14T05:13:43Z

put this in the path discussion

we don't need the separate landing page folder.

Miyuki-L · 2025-05-14T05:19:21Z

+
+.searchInput {
+  display: flex;
+  width: 384.634px;


We should never be using such a big px value since all screen sizes are not are the same at 384px would be too big for certain screens. We should use % value here and if you don't want it to get too small or too big min-width max-width would be friends

Miyuki-L · 2025-05-14T05:56:58Z

+                  <option value="author-desc">{t("Author Z-A")}</option>
+                </select>
+
+                <svg


let's not put the actual svg code in here. You should be able export and upload the svg and put it in our frontend/public/icons and the inport from there.

Look at the navbar and nav card components on how to do it.

Miyuki-L · 2025-05-14T06:07:14Z

+  title: string;
+  content: string;
+  date: string;
+  author: string;


author here is the mongodb userId for the person creating the post you need to in the backend call the userModal and get the name before return data.

Miyuki-L · 2025-05-14T06:11:15Z

+      )}
+
+      {/* If no posts */}
+      {posts.length === 0 && <div>{t("No posts yet.")}</div>}


you need to add these translation key's into the en.json and pt.json and es.json files for the translation to actually work.

look at the signup pages and see how its done or even the translationDemo.tsx file

Miyuki-L · 2025-05-14T06:11:54Z

 .postcard-divider {
  width: 1px;
-  height: 100%;
+  /* height: 100%; */


delete if not using

Miyuki-L · 2025-05-20T03:33:48Z

 import { NextFunction, Response } from "express";
 import { Types } from "mongoose";

+import { getUserNameById } from "../helpers/userHelpers"; // Make sure this import exists


can we remove the comment on this line

Miyuki-L · 2025-05-20T03:38:32Z

+
+export const getPost = async (): Promise<APIResult<Discussion[]>> => {
+  try {
+    const response: Response = await get("/api/discussions");


This still needs to be addressed.

getPost function needs to take in a firebase token which is then passed to the get function after callling createAuthHeader on the firebase token

Miyuki-L · 2025-05-20T03:39:20Z

+
+    const json: unknown = await response.json();
+
+    if (typeof window !== "undefined") {


why do wee needs this statement and the console, log

Miyuki-L · 2025-05-20T03:43:09Z

+      console.info("Fetched posts JSON:", json);
+    }
+
+    if (Array.isArray(json)) {


we are calling our own backend and we know its expected shape and the backend return formmate won't change so there isn't much point in this conditional check. Just make sure you are parsing it correctly.

it'll aways just use one of them since we won't be changing the response the backend provides

Miyuki-L · 2025-05-20T03:46:19Z

+      const result = await getPost();
+
+      if (result.success) {
+        if (Array.isArray(result.data)) {


redundant if you checked in the getPost and here. If you really want to check just do it once.

if it failes there it fails here. if it passes both pass

Miyuki-L · 2025-05-20T03:51:56Z

+              <div className={styles.sortContainer}>
+                <select className={styles.sortSelect} {...register("sort")}>
+                  <option value="">{t("Sort By")}</option>
+                  <option value="date-desc">{t("Newest First")}</option>


you need to put this into the the en.json and es.json and pt.json for translation to work.
. better to not have space either.

i.e. t("newest-first")
would need a "newest-first" : "Newest First" in en.json "newest-first": "whatever it is in spanish" in es.json etc

or else it'll jsut default to the key which is what you are doing but its not correctly using the translation then.

Miyuki-L · 2025-05-20T03:52:53Z

can we undo this?

Miyuki-L · 2025-05-20T05:24:38Z

+    title: discussion.title,
+    content: discussion.message,
+    date: discussion.createdAt,
+    author: discussion.userId,


shouldn't be using user id here
should be using the username you got from the now updated backend

Still using user id

Miyuki-L · 2025-05-20T05:25:16Z

+    void fetchPosts();
+  }, []);
+
+  useEffect(() => {


is this supposed to be for scroll?

It doesn't scroll.

The better option is just use css set the height of a container and then have overflow:scroll or a similar rule

Miyuki-L · 2025-05-28T21:56:34Z

+  const thisWeekPosts: Post[] = [];
+  const earlierPosts: Post[] = [];
+
+  visiblePosts.forEach((post) => {


This and all the steps above might need to go into a useEffect for the sorting to take into effect. But I also think that we shouldn't have the splitting into sections if we do sorting.

So I think for rendering you have to check if there is sorting then display one way then dispay the other.

Miyuki-L · 2025-05-28T21:57:17Z

+  //       post.content.toLowerCase().includes(searchQuery),
+  //   );
+
+  //   switch (data.sort) {


keeping this in here incase you still need sorting but the use effect below has pretty much the sae logic.

What i see happening is post is sorted but that sorted post list is never used and not correspondingly rendered on the page.

Miyuki-L · 2025-05-28T21:57:33Z

+      </div>
+      <div className={styles.searchForm}>
+        {/* Wrap the search input and 'Sort By' dropdown */}
+        <div className={styles.searchAllSortContainer}>


still missing the icone for the srot.

and can we make the color solid black when an actual sorted option is selected so its more obvious that they have selected an option

Landing Page

30cbea9

06unnati requested a review from Miyuki-L as a code owner May 14, 2025 02:55

Miyuki-L requested changes May 14, 2025

View reviewed changes

06unnati added 2 commits May 17, 2025 17:37

fixed some errors

b18c3c6

Fixed the backend

9c16c75

Miyuki-L reviewed May 20, 2025

View reviewed changes

06unnati and others added 2 commits May 27, 2025 11:57

fixed firebase and some other problems

720a54f

Fixed Username display and switch to state instead of form for search

59a85ec

Miyuki-L reviewed May 29, 2025

View reviewed changes

06unnati and others added 4 commits June 5, 2025 16:29

added sort icon

bc40af4

Merge branch 'main' into 06Unnati/landingPage

3858327

minor fixes

9130c77

fix lint error

4ee7752

benjaminJohnson2204 merged commit 55ed0f8 into main Dec 19, 2025
2 checks passed

benjaminJohnson2204 deleted the 06Unnati/landingPage branch December 19, 2025 06:11


		const json: unknown = await response.json();

		if (typeof window !== "undefined") {

Conversation

06unnati commented May 14, 2025 • edited by Miyuki-L Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tracking Info

CSS Checklist

Changes

Testing

Confirmation of Change

Uh oh!

Miyuki-L left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

06unnati commented May 14, 2025 •

edited by Miyuki-L

Loading