michiganhackers / mh-web-new

For the new Michigan Hackers website!

Michigan Hackers Website

michhackers.com

Welcome to the Michigan Hackers website! This site requires that you install the latest stable version of Node.

Development

Setup

First, install Yarn (npm is a dependency of yarn, so install npm first if necessary). Clone down this repository to a location of your choice, and run yarn.

If you have access to the .env file, then run npm run get-leadership to populate leadership data.

If you do not have access to the .env file, rename sample-leadership.json in src/ to leadership.json. This will not display images, but it will display all relevant data, which is enough for most cases.

Then run yarn start and get going!

Tests

To run tests, run yarn test.

Linting

To lint (i.e. check for style, etc.), run yarn lint. To lint and automatically repair some issues, run yarn lint-fix.

Building

To run tests and create a build (i.e. for the purpose of deployment), run yarn build.

Deployment

Talk to a Web Team lead and ask them to deploy your changes.

mh-web-new's Issues

Replace `fullcalendar-reactwrapper`

Depends on an old version of React and is no longer maintained.

Options

• fullcalendar
  • Pros
    • most similar to what we use already
    • will probably be easy to swap in
    • default styles and whatnot are also close to what we already use
  • Cons
    • react wrapper with a ref around a preact thing
    • heavy
• react-calendar
  • Pros
    • written in react and is actual react
    • lighter
    • more extensible?
  • Cons
    • default styling is pretty different from what we have
    • will need more work to make it look and work like how we want it to

We could also probably rip out bootstrap as well at the same time since it only exists for nice default styles and is kinda heavy.

Page excessively caching

It seems like the issue is not the browser cache, but may be related to the CRA service worker. Although that is failing to register so ¯\(ツ)/¯. What is known is that the first navigation to a page directly directly goes to the cache and thus ignores updates. Possibilities are adding a query param to force the reload, getting the last updated date from s3 (ping a text file with last update date) and then location.reload, or something else.

Projects Page

Just some spitballin'

Suggestions from others

• main route for a list of pages and sub routes for each team
• sub routes for each project on each team?
• images of the project
• a good amount of text explaining the project
• links to repositories, deployed code, and other finished products

Update to React 17

React 17 shouldn't have any breaking changes, so it should be a simple update. Also remove the enzyme adapter and change jest binding to jest/globals.

Point the mailjet unit test at the new health endpoint

Change the currently hacky mailjet health test to point at the newly created health endpoint (GET: /v1/email/health)

Testing with `window.scrollTo`

jsdom doesn't have this implemented, and it seems like it's development is stalled. Maybe we could just monkey-patch in something? It doesn't actually hurt anything though (so it seems).

On mobile, scrolling down on a page and then returning to the home page locks the view in the wrong scrolling location

This happens on Safari on iOS, but I have been unable to reproduce it (for the purposes of debugging) on Chrome or Safari on Mac.

A solution might simply be to change Home by changing componentDidMount

componentDidMount() { window.scroll({ top: 0, left: 0, behavior: 'smooth' }); $("body").css("overflow", "hidden"); }

although it is unclear if this fixes the problem, on account of the reproducibility failure on desktop.

Refactor to use the fetch API

There's no need to use axios, let's refactor to use the fetch API.

Out-of-date links on homepage

The "Other Relevant Links" section on the homepage contains some out-of-date links. Specifically, the "Our Mass Meeting Slides" and "Our Teams" links are from last year, and the "Office hours sign-up" link doesn't seem to wrok.

Add continuous integration

See above. In the continued interest of improving the testing story, let's add some form of CI.

Change Navbar to a Hamburger menu at smaller resolutions

Depends on #79, but should be released simultaneously.

About 332px is the smallest it can go now, which is enough for all devices. With the addition of #79 though, some devices will not display all of the text properly. Chris suggested a hamburger menu when this issue last came up, and it seems to be the best options.

Cancelable fetch for Calendar

When the fetch runs on the calendar, and the user navigates away from the component before the fetch completes. We end up with it trying to setState on an unmounted component, which is bad. The options are kinda nasty with one being that we have a variable isMounted, or something of the sort. Cancelled promises also don't really exist natively, so we either have to add some dependencies (rxjs I would be fine with actually, but I think it's heavy and I would rather not add more dependencies if possible), or copy-paste a bunch of code to poylfill it. Hateful either way.

Add unit tests for all components

Ideally, we would have BDD unit tests for all (or as many as possible) components.

Website can obscure the tabs on landing page when scrolled up

This is particularly a problem on mobile.

Put all images in one place (namely, src/assets)

We should refactor so that all images are kept in /src/assets rather than some being kept there and some kept in /public/. We can then import these images directly via Webpack. This provides better caching and build-time errors if the relevant assets are missing.

Page scroll does not reset when navigating between pages with a body overflow

About and Team are the easiest to test this on.

Change ordering of Team Members to be deterministic

The change to collecting lead data means that order is now randomish. We should probably force it back into the order given in the sheet. Alternatively, we could add some sort of auto-ordering based on Team or last name, but I think safest bet is going off of sheet order first.

Images hosted on Google drive will eventually return 403 after enough page loads of the team page

• We should look at adding a build step that collects the sheet information and then bundles it with the rest of the site
  • we will lose some flexibility but the website will work more consistently
  • Also, that information will rarely change during the course of the semester
  • Also will improve page load times because it takes more than a few seconds to query Google sheets
• Idk about other alternatives that would keep that flexibility without sacrificing page load times

NoScript/legacy browser/archive site support

Right now, nothing happens without JS. Adding functionality such that we have a site that can be used without JS (without serving the site on something other than a file server) will fulfill all of those requirements. There's got to be like a package for this that we can integrate and only add another build step or something.

Upgrade to React 18

It's still in the RC stage, but it seems like we won't have any breaking changes. The one thing is that we will lose IE support. Not sure about the metrics and who uses IE on our site, but it might be nice to keep. The alternative is we add something so we can prerender the site server-side (in our case in the file server) and serve the page without interactivity so it works with NoScript and legacy browsers.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

"Join Mailing List" works on empty input

Obviously should not "succeed" when the input is empty.

Add a /projects route and page

Update/rewrite prose (FAQ, etc.)

A lot of the prose on the website is outdated. We should update it to reflect changes to the organization.

Add defaultProps and propTypes for each component

This will improve the type safety and usability of each of our components.

Refactor to use pure functional components

Many of our presentational components are unnecessarily "class-based" and should be refactored to be "pure functional", e.g.:
const TextComponent = props => <div>props.text</div>;
rather than
class TextComponent extends React.Component { render() { return (<div>props.text</div>) } }

SEO

So were using React and that is great, but if we google our website, it will say, "Michigan Hackers. You need to enable JavaScript to run this app. aboutteam calendarcontactfaq...". Maybe we can incorporate React Helmet to add meta data. I could do a pr on this sometime

Add prettier

What can I say? I love prettier and shilling it.

Pull through information about leadership dynamically

To avoid needing to redeploy each time there is a change to leadership information, we'll instead pull this information through dynamically.

Tab control for Navbar and skipping to content

Tab control isn't great right now. Starting with the menu bar and then going through the links is a good place to start. Also adding a "skip to main content" option at the start too (given that we have few links may be sub-optimal).

Vertical spacing between Navbar and H1 headers is insufficient at small widths

It's corrected for mobile-size widths, but should probably have like 16px all around or scale with vertical height instead of scaling with width and looking a bit uggo.