tams-cso / tams-club-cal Goto Github PK

Right now the only way to exit is to click on the grey area. I want to have it so the user can also press the Esc key to exit the popup.

I would like to have a select menu with the standard tz database time zones

On the Home, Resources, and Clubs page, we should have a component that just says "Loading..." with maybe a spinning circle or smth.

The orange "event" text in client/src/pages/Home.scss for the popup and the text in client/src/pages/Add.scss should be #FF9A3D. Make a variable in client/src/custom.scss and use that to assign those colors.

here is a picture of what i mean

We need to have the server print out logs whenever a call is made or something happens. For now, console.log and similar commands can do, but eventually, I want to switch to something more advanced, like https://github.com/winstonjs/winston.

Is your feature request related to a problem? Please describe.

Current date & time inputs and form control are too messy and dependent on browser. The native HTML5 datetime inputs are easy to code but horrible for user experience.

Describe the solution you'd like

Create a custom component where the user can enter a date/time. This would include its own stylesheet and dropdown menu for picking dates. Additionally, you can add a "duration" field so the user would not need to choose the end time manually.

Describe alternatives you've considered

We could also find a library to use (might be more time-efficient), or simple just encapsulate the date/time input fields in a component and find a way to get the info.

Additional Context

This can use the standard css property or a custom tooltip

Edited to fit new format

https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh

^ add to client/src/public/index.html

Install JSDoc for frontend documentation of components: https://www.inkoop.io/blog/a-guide-to-js-docs-for-react-js/

Use https://reactjs.org/docs/forms.html#handling-multiple-inputs for form.
Check pr #52 for the original framework.

Related to #83. If people edit images, we should probably store the old image somewhere (bc right now all we save is the image id). I'm thinking we zip the old images and put it somewhere -> https://stuk.github.io/jszip/.

Problem

Currently, on an average desktop view, the schedule view's club name can only fit at most 15 characters (on average). This should be increased so clubs with long names won't seem cramped.

Proposed Solution

Increase the right margin on the club name or the left margin on the event name.

Alternative Solution

Limit the number of characters someone can enter in the club name field for events or truncate the name of the club with ellipsis when too long.

this is a picture of what it looks like on mine

I'm pretty sure a lot of the text (if not all) are in <div> elements right now. A good practice is to put them into <p> or <h[1-3]> tags.

Do this before #100. Simply just use dayjs().tz.guess() instead of the hardcoded 'America/Chicago' time when displaying events.

Check in client/src/components/ClubCard.js on the GlobeIcon and FbIcon components and make sure that they aren't displayed if there is no valid link. Right now, the links simply won't open anything when clicked if no valid link is found.

https://github.com/validatorjs/validator.js

When hovering over the colored squares on the left (orange/purple), show a tooltip to distinguish whether or not it's an "event" or a "signup".

Problem

A lot of the imports in client/src/pages are extremely messy and need to be sorted. It is sometimes difficult to find an import.

Proposed Solution

I would like for them to be put in the following order (example from client/src/pages/Resources.js):

import React from 'react';
import { connect } from 'react-redux';

import LinkBox from '../components/LinkBox';
import Popup from '../components/Popup';
import VolunteeringCard from '../components/VolunteeringCard';
import VolunteeringPopup from '../components/VolunteeringPopup';

import { getVolunteering } from '../functions/api';
import { getSavedVolunteeringList } from '../redux/selectors';
import { setVolunteeringList } from '../redux/actions';

import './Resources.scss';

1. Libraries
2. React Components
3. Functions/Redux
4. Scss and other files (like icons)

Alternate solutions

None

Should add something to prevent feedback messages with only whitespaces to be submitted.

Currently, on an average desktop view, the schedule view's club name can only fit at most 15 characters (on average). Should this be expanded a bit to allow up to 20+ characters? It also looks a bit cramped with a longer club name.

The display: grid formatting is currently (in client/src/pages/Clubs.scss):

.club-card-list {
    padding: 1.25rem 7rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    row-gap: 1rem;
    justify-content: start;
}

This allows for overflow and mobile compatibility, but it doesn't center itself :((

Events need multiple links (ie. zoom and facebook post), so we need to store the links as an array of strings instead of just a string.

1. Tiles move to next line when not suppose to (happens on larger display) picture here
2. Everything seems to be a little to the left and not quite centered picture here

We NEED A LOGO ahhhh

Problem

The state management, especially the popups, is getting extremely messy and hard to manage. I now have components calling their sibling component's functions through refs (See close() function in client/src/components/VolunteeringPopup.js being called by client/src/components/Popup.js)

Proposed Solution

Use Redux. It manages state from a store, cleaning up both the code and the messy states of the components.

Alternative Solutions

We could also stick with the current system, but the system would become a pile of spaghetti pretty soon. Another idea would be to use the url to manage the state, but that is quite jank and hard to listen for in a component.

I added the "bug" label because the popup right now is messy and requires code outside of the component. If there's a good way to fully componentize it, I want.

https://fusejs.io/

Start with just searching through events.

https://web.dev/add-manifest/

Manifest file: client/public/manifest.json

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Describe the bug

Whenever a user navigates using the nav menu, the page is not scrolled back to the top automatically. I would like to use the provided sample from React-Router, but I also change the url for the popups, and I do not want the page to scroll to the top when popups are opened.

To Reproduce

Steps to reproduce the behavior:

1. Open the home page (located at /)
2. Scroll down to the bottom
3. Click on the Add Event tab in the naviagation menu
4. The user cannot see the top of the page now

Expected behavior

When the user clicks on a link on the menu, the page should scroll back up.

Screenshots or Links

N/A

Environment

• OS: Arch Linux (5.9.14-arch1-1 )
• Browser: Firefox
• Browser Version: 84.0.1

Additional context

(See comment below)

This issue has been edited to fit the new format!

Instead of doing const id = this.popup.current.state.id; in client/src/pages/Home.js, we can simply pass the id to the activateCallback function in the client/src/components/Popup.js file.

https://www.digitalocean.com/community/tech_talks/deploying-to-digitalocean-with-github-actions

In Menu.scss, the lines

.menu-item:active {
    outline: none;
}

should be changed to

.menu-item:focus {
    outline: none;
}

On the old site right now, I am logging the public IP addresses to a file whenever people load the website with the following code:

Frontend

const req = new XMLHttpRequest();
req.open('POST', 'https://api.michaelzhao.xyz/log');
req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
req.setRequestHeader('Access-Control-Allow-Origin', '*');
req.send(JSON.stringify({ dir: 'tams.club' }));
req.onload = () => {
    console.log(req.response);
};

Backend

// router on route /log
router.post('/', function (req, res, next) {
    res.header('Access-Control-Allow-Origin','*');
    if (!req.body.dir) {
        res.status(400);
        res.send({
            status: 400,
            error: "Missing 'dir' in request body",
        });
    }
    // Need to add to nginx config:
    // proxy_set_header X-Real-IP $remote_addr;
    var ip = req.header('X-Real-IP') || req.connection.remoteAddress;
    fs.appendFile(path.join(__dirname, 'files', 'logging', req.body.dir), `[${now()}] ${ip}\n`, () => {});
    res.sendStatus(200);
});

Output Log File:

[2020-12-22T22:15:30.808Z] 143.176.249.75
[2020-12-23T08:58:05.465Z] 3.236.243.184
[2020-12-23T21:50:59.926Z] 3.83.17.15
[2020-12-26T21:55:59.112Z] 47.187.197.209
[2020-12-28T12:27:24.617Z] 65.154.226.165
[2020-12-30T01:09:30.780Z] 162.249.229.121
[2020-12-31T07:18:27.931Z] 47.187.197.209
[2021-01-01T20:18:45.280Z] 73.55.210.193
[2021-01-04T02:36:34.453Z] 47.185.43.108
[2021-01-04T03:41:57.790Z] 75.38.18.76
[2021-01-04T04:10:13.699Z] 47.187.197.209
...

I want to create a logging file of some sort as well, except it will log as a csv file. This is only for when a user goes onto the site. It is seperate from the backend log files in issue #66.

Currently, the generated url is http://localhost:3000/?id=HOPE, but the /? should just be a ?. The correct url would be http://localhost:3000?id=HOPE.

The date should be stored as milliseconds since Jan 1, 1970. Currently, the backend simply stores this value as 0. Day.js with the timezone plugin can be used for timezones in the future, but for now simply assume we are in UTC-6 (CST). The relevant commit is #67 . This code should go with the TODO on line 36 of server/src/database.js.