rewrite website in react and typescript

[benbousquet]

I rewrote all the pages on the website except for the history page. I tried to keep as close to the original as possible but I changed some things such as:

• Changed design of live page
• Design of mobile drop down
• Design of navbar

That's all I can think of but I think there is more.

I also did not finish adding somethings such as:

• Donate button (does nothing atm)
• Mobile dropdown animation
• Flickr image on the homepage (does not change on refresh, just a static img atm)

Everything should be implemented other than those I believe and the website is mobile friendly (but I haven't tested it on a real phone yet just web browser).

Somethings that need to be looked at before merge:

• deployment to github pages with react router
• update readme

Please take a look

[malakada]

We should not be dump errors straight to console like this in a prod env-- would be better to put into a server log.

[benbousquet]

I removed the console error for now and cleaned up the formatting on the page, im not sure where to log the errors since I think the page is built and hosted on github pages

[louiemontes]

Would recommend cleaning this up on unmounts

  useEffect(() => {
    const controller = new AbortController(); // Create an instance of AbortController
    const signal = controller.signal; // Get the signal to pass to fetch

    async function fetchData() {
      setIsLoading(true);
      try {
        const res = await fetch(
          "https://members.heatsynclabs.org/space_api.json",
          { signal } // Pass the signal to the fetch call
        );
        const json = await res.json();
        setIsDoorOpen(json.open);
      } catch (error) {
        if (error.name !== 'AbortError') { // Handle errors other than abort
          console.error("Failed to fetch door status:", error);
        }
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();

    return () => {
      controller.abort(); // Abort the fetch operation on component unmount
    };
  }, []);

This will stop the fetch if the component unmounts, preventing an unnecessary request on page change.

[benbousquet]

This looks really good! I added it 👍

[louiemontes]

npm run build

Triggers this locally for myself and @mindblender, which may be indicator on what'll happen in the Github action that deploys the site:

> [email protected] build
> tsc -b && vite build

src/main.tsx:5:18 - error TS2307: Cannot find module '@/routes/home' or its corresponding type declarations.
5 import Home from "@/routes/home";
                   ~~~~~~~~~~~~~~~

src/main.tsx:6:18 - error TS2307: Cannot find module '@/routes/root' or its corresponding type declarations.

6 import Root from "@/routes/root";

And a few others

If you resolve this, likely with edits on paths to one or two of the tsconfigs, (app or node, or the combination)... This should build for further testing locally on a build.

[benbousquet]

npm run build

Triggers this locally for myself and @mindblender, which may be indicator on what'll happen in the Github action that deploys the site:

> [email protected] build
> tsc -b && vite build

src/main.tsx:5:18 - error TS2307: Cannot find module '@/routes/home' or its corresponding type declarations.
5 import Home from "@/routes/home";
                   ~~~~~~~~~~~~~~~

src/main.tsx:6:18 - error TS2307: Cannot find module '@/routes/root' or its corresponding type declarations.

6 import Root from "@/routes/root";

And a few others

If you resolve this, likely with edits on paths to one or two of the tsconfigs, (app or node, or the combination)... This should build for further testing locally on a build.

I fixed the build errors and it looks to be building correctly on my machine

[benbousquet]

@ninbryan Can you take a peak 👀