jcserv / ulinks Goto Github PK

Motivation 🏁

It'd be helpful to have a wrapper function around apollo queries/mutations so that we can expose information like "initial", "loading", "loaded", "error", etc.

Describe your refactoring solution 🛠️

• Check out Apollo's hooks
• Create our own function

Overview 👁️‍🗨️

We should verify that discord links are still valid, since they can expire/be revoked.

• Check after user inputs
• cron job to scan through discord links and generate a report of any invalid ones for us to prune?

https://stackoverflow.com/questions/52657141/testing-if-discord-invite-link-is-invalid/52657255

1. Add a button with a gear icon and a dropdown (similar to the Language)
2. This should have options for "Admin" (if the user is an admin), "Logout"
3. Clicking Logout should just delete the cookie and redirect them to the homepage.

Rebrand to ulinks

• Buy domain
• Setup frontend CI/CD
• Set up backend CI/CD

Overview 👁️‍🗨️

Currently we're displaying group chats based on two metrics: views and clicks.
However, for the upcoming term's course group chats we'll want to change how we display results so that "fresh" group chats will still have be displayed prominently so that students can easily find them.

Proposed Change

Change the search resolver to conditionally sort on recent date

Should display an alert to indicate to users that they are unverified and cannot submit community group chats.

Expected/Current Behavior 🧭

When scrolling down on the homepage to access the footer, infinite scroll keeps pushing it downwards, making it difficult to access and resulting in poor UX.

Steps to Reproduce 🔢

1. Open homepage: https://www.ulinks.io
2. Scroll down to the footer
3. Attempt to click one of the links
4. Fail step 3 because of infinite scrolling, until there is no more content left to add.

Additional details ℹ️

A way around this would be to either make infinite scroll an option that the user can toggle, with the default being turned off. The issue will still be there when it is turned on, but at least the user can still turn it off.

Or, remove the footer entirely and move it's content somewhere else. I encountered this issue while trying to open the GH link, located in the footer. It would have been easier if it was located in the top navbar, an About page, or anywhere else which is more easily accessible.

Problem Overview 👁️‍🗨️

Users/Admins should be able to edit group chat information

Outline of Proposed Steps

1. Figure out if there's a cleaner way to check permissions of user + manage authorization
2. Create Edit + Delete features for group chats
3. Show content based on user

• After user registers, send an email with a link to verify that user
• Create email verified page
• may require adding an additional status to user?

Motivation 🏁

Infinite Scroll is cool

Expected Behavior 🧭

• Hitting Enter should result in form submission
• Search not resulting in satisfactory results
  i.e. searching csc108 doesn't return the csc108 group chat i just made

Overview 👁️‍🗨️

There's an advanced search feature, but it doesn't yet have any options for sorting results. It would be useful to be able to sort results by, for example, members, date the link was added, alphabetically and so on.

What would you like? 🧰

Under the advanced search menu, a Sort section with settings that let us sort the search results.

Additional details ℹ️

The examples for sorting options I gave above were just the most useful ones I could think of on the spot. This request is not for all of those options, but at least sort by members of the community would be useful. The user would not have to open/join each link just to get an idea of how large/active the community is.

Overview 👁️‍🗨️

Contributing document that outlines all the required installation steps for onboarding new contributors. Should be more indepth than README.md

Some departments are missing: PHL, MGT, MGM

Will also require changes to backend for setting image

Currently on prod, the group chats take a bit to load in and erroneously display that there are no group chats. We should display a loading indicator until the request is done, and only then show the null message if there are 0 results.

Problem Overview 👁️‍🗨️

We need testing to have confidence in future frontend changes, using CI.

What would you like? 🧰

Frontend testing infrastructure plus some tests that other contributors can follow the format of

Expected Behavior 🧭

Changing the site to dark mode should change the styling of the GroupChat Card

Problem Overview 👁️‍🗨️

Currently the group chats are being returned in order of creation date. We should leverage the likes/views fields to have metrics to rank group chats.

What would you like? 🧰

• Whenever a group chat page is visited, add a view
• Create a button for users to like them

Motivation 🏁

These two parts of the codebase are not intl-ized. We should intl-ize them to help out our francophone friends </3

Expected/Current Behavior 🧭

Shows unapproved GCS

Steps to Reproduce 🔢

(Please write your answer here.)

1. Created a community GC
2. It shouldn't show

Additional details ℹ️

(Please write your answer here.)

What would you like? 🧰

GroupChat

• Change year to be string so we can have it as "2021-2022"
• Change code to be string to allow for UTSC codes i.e. C01

What parts of the codebase would be affected? 🔍

Frontend: Form fields for year + code, interpretation
Backend: GroupChat Model

• If user includes "UTSG", "UTM", or "UTSC" (case insensitive) in the title we can set the campus to that.

Motivation 🏁

Currently the way that we make actions against the graphql api is pretty bloated.

Describe your refactoring solution 🛠️

• Use the useQuery/useMutation hooks where possible
• Create a folder for graphql related code/queries

Overview 👁️‍🗨️

Detailed setup guide, perhaps a video, for all the processes required to spin up an instance for your own school.

Motivation 🏁

Handling page size for different display sizes is a bit tricky - the frontend is good in the sense that it'll neatly organize the entries into grids responsively, but the rows are uneven if your width has rows of 3 entries (since we return 8 currently)

Describe your refactoring solution 🛠️

After talking it through with @CometWhoosh, there's two solutions:

1. determine dimension size and request a certain page size to backend (FE+BE soln)
2. display as many full rows as the screen size allows, and then hide remaining entries in the next page (FE soln)

CC @AipioxTechson for your thoughts on this too!

Overview 👁️‍🗨️

To assist in searching, there should be a tagging system where one can apply tags to a community or course group chat.

What would you like? 🧰

For purposes of keeping everything appropriate and ordered, this could be a set of already created tags that people can select instead of letting users type whatever they want.

These tags could include things like the campus (the communities tab seems to group everything together) or what kind of community it is. It could also help differentiate different kinds of communities. For example, a hobby community for a game would be different from a community like a debate club.

Additional details ℹ️

I imagine letting whoever submits a community be the one who determines the tag may be the simplest.

However, I do like what LinkedIn has for user profiles where people can vote for or vouch for what skills someone has on their profile. I think this could be cool because nobody is perfect at describing and advertising themselves. This can be especially true for student organizations I feel, some are not run most optimally due to students having other life obligations. So for example, a viewer could find a gaming club and notice that the writer forgot to put the gaming tag. So they can vote on it and say "this is a gaming club."

This would probably be a bit more work, and could probably be done as an enhancement of a tagging system after a basic version has already been implemented.

Expected Behavior 🧭

Status of community group chats should be set to approved if the user submitting them has the admin role.

Current Behavior 🔍

Status is set to pending

Expected Behavior 🧭

The id lengths should be consistent so it shows correctly for verification

Current Behavior 🔍

Currently variable lengths

Steps to Reproduce 🔢

Happens randomly

Acceptence Criteria for Fix ✅

No longer variable length

• [ ]
• [ ]
• [ ]

Possible Solution 🛠️

(Please write your answer here.)

Implementation Details 🧰

(Please write your answer here.)

Additional details ℹ️

(Please write your answer here.)

Overview 👁️‍🗨️

As more contributors come on board, it's cumbersome to update the footer each time.
We should use the Github API to get a list of all contributors and render their github profile, a popover to display their name, and when clicked should link to their github profile.

1. Use Axios to send a GET request to the Github API for this repo
2. Use response to render a row of contributors

Additional details ℹ️

Some useful links:

https://docs.github.com/en/rest/reference/repos#list-repository-contributors

https://chakra-ui.com/docs/media-and-icons/avatar

white-van/discussion-board@0a63123

https://github.com/utm-cssc/website/blob/master/components/global/Contributors.vue

Problem Overview 👁️‍🗨️

Admins should be able to upload images + set images for group chats (from an uploaded image collections)

Motivation 🏁

The way we're currently handling the email template is storing it as a huge string.

Describe your refactoring solution 🛠️

1. Install ejs
2. Convert the email template to an ejs/html template

Additional details ℹ️

https://dev.to/kushal/email-templating-with-ejs-node-sendgrid-l4k

Problem Overview 👁️‍🗨️

Our metadata for GroupChats is lacking, we'll need to expand on it to enable future features such as uploading images, created/edited dates, editing groupchats by submitter/admin, etc.

What would you like? 🧰

New fields:

• created DateTime
• updated DateTime
• image String (url) -> set default val based on the department of a course/if it's community
• views Number
• likes Number

Overview 👁️‍🗨️

Right now, if users search for groupchats, they can filter for courses by selecting the Courses tab, filter for communities by clicking the Communities tab, or search for all groupchats that fit their search by selecting the All tab. But, there is no clean way to refresh their search and go back to displaying all the groupchats (the only way to do this is to search using an empty string, which is unintuitive).

What would you like? 🧰

Change the way searching and filtering works: make it so that the All tab displays all the groupchats, the Courses tab displays all the course chats, and the Communities tab displays all the community chats. Then, change it so that when users search for chats, all matching chats are returned, regardless of whether they are a course or community chat.

Why this is better

When a user searches for a chat using the search bar, they will be looking for either of two things: either they will be looking for a course chat, or they will be looking for a community chat.

Searching for a course chat
If a user wants to find a groupchat for a course they are in, then they would just search for the course code of their course. Since they are looking for a course chat, they would not be looking for a community chat. So filtering by using the Communities tab does not help in this case.

Searching for a community chat
If a user is searching for a community chat, then they must already have a community in mind that they want to join, otherwise they wouldn't know what to search for. Since they are searching for a community, filtering by using the Courses tab does not help in this case either.

So, in all cases, the All, Courses, and Communities tabs are useless for filtering.

As such, it would be better to have the tabs display all the chats that belong to them. That way, users can still search for chats normally, but now they would be able to "refresh" their searches and see all the chats by clicking the All tab, all the course chats by clicking the Courses tab, and all the Community chats by clicking the Communities tab.

Describe your refactoring solution 🛠️

1. Add logo to navbar, left of ULinks text
2. Add it to open graph tags
3. Insert logo in README
4. Add to email
5. Maybe place it in footer?

Expected/Current Behavior 🧭

Right now, there are two problems with the language selections:

• If you're on a page other than the homepage with all the course chats and you switch languages, you will be directed back to the homepage instead of staying on the page you're on
• If the language is set to French, then when you switch tabs, the page refreshes instead of using a smooth transition like when the language is set to English

Steps to Reproduce 🔢

For the first bug:

1. After website first loads, go to a different page (login, register, search for something, etc)
2. Switch languages

For the second bug:

1. Set the language to French
2. Switch tabs

Problem Overview 👁️‍🗨️

Currently after adding and editing a group chat, nothing happens so it can be confusing for users

What would you like? 🧰

• After adding a group chat, we should redirect them to that newly created group chat.
• After editing a group chat, we should take the updated group chat and updated the state.

What parts of the codebase would be affected? 🔍

Frontend for Add/Edit GroupChat

It'd be nice to monitor user traffic, probs with simpleanalytics.com

• Schema validation change
• Change error message

Motivation 🏁

For situations where we import from multiple files in constants/ or helpers/, it would be helpful if we could change how the export those consts/functions so that instead of writing:

import { functionX, functionY } from "helpers/formatters";
import { functionZ } from "helpers/groupchats";

we can do:

import { functionX, functionY, functionZ } from "helpers";

Problem Overview 👁️‍🗨️

We would like to have an iframe that exposes a view of a simplified feed, enabling us to import it into the CSSC site.

Problem Overview 👁️‍🗨️

Allow users to submit Slack invite links
Example:
https://join.slack.com/t/slack-3eo2795/shared_invite/zt-tlfvdcz4-69W~e2WqOzsmzoHhHm_BvQ

What would you like? 🧰

• Add Slack validation to schema
• Add quick insert button for Slack
• Modify LinkIconBar and the link display in cards to show logo properly

What would you like? 🧰

Two buttons around the Links area of Create Chat Modal that allow you to click them, prefilling the link field with the base of messenger/discord links.

for each pending groupchat we should list the name of the user that created it so that if it's inappropriate we know who to ban

Getting Started:

1. Register a non-admin user on the dev database
2. Add a community group chat
3. Switch over to an admin user, navigate to /admin
4. Read through Admin.jsx, find the component that renders the chat requests
5. Once located, create a tag, passing in the created_by field