Overhaul the job board to use a new API from reactibot (#335)

* Update netlify cli and functions

* Remove 'verified email' gate, too finicky

* Jobs api proxy

* Fix checkboxes

* Handle Discord rate limit error

* Pass along all querystring values

* Add @tanstack/react-query

* Fix form bugs around unnecessary rerenders and blank initial values

* Add a Reaction variant of Tag

* Update job board page to sync with realtime data

* oops logs

* Nice cozy "Show More" behavior

Author: vcarl

netlify/functions/discordIdentity.mts

@@ -15,6 +15,16 @@ const handler = async (request: Request, context: Context) => {
       ),
     ]);
     const [user] = await Promise.all([userRes.json()]);
+    if (!memberRes.ok) {
+      if (memberRes.status === 429) {
+        return new Response(
+          JSON.stringify({
+            message: memberRes.statusText,
+          }),
+          { status: memberRes.status },
+        );
+      }
+    }
     return new Response(
       JSON.stringify({
         user,

netlify/functions/jobs.mts

@@ -0,0 +1,19 @@
+import type { Config, Context } from "@netlify/functions";
+
+const handler = async (request: Request, context: Context) => {
+  const { type } = context.params;
+  const { searchParams } = new URL(request.url);
+
+  console.log(searchParams.toString());
+
+  return fetch(
+    `https://api.reactiflux.com/jobs/${type}?${searchParams.toString()}`,
+    { headers: { "api-key": process.env.REACTIBOT_API_KEY || "" } },
+  );
+};
+
+export default handler;
+
+export const config: Config = {
+  path: "/api/jobs/:type",
+};

package.json

@@ -21,8 +21,9 @@
     }
   },
   "dependencies": {
-    "@netlify/functions": "^2.4.1",
+    "@netlify/functions": "^3.0.0",
     "@next/third-parties": "^14.1.0",
+    "@tanstack/react-query": "^5.65.0",
     "@types/node": "20.6.0",
     "@types/react": "17.0.37",
     "@types/styled-components": "^5.1.15",
@@ -37,14 +38,14 @@
     "mdast-util-to-string": "^3.1.0",
     "minireset.css": "^0.0.6",
     "moment": "^2.27.0",
-    "netlify-cli": "^17.10.2",
+    "netlify-cli": "^18.0.2",
     "next": "^12.3.4",
     "next-sitemap": "^4.2.2",
     "polished": "^3.6.5",
     "prettier": "^2.1.0",
     "pretty-quick": "^3.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "~18",
+    "react-dom": "~18",
     "react-headroom": "^2.1.2",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^7.49.2",

src/components/DiscordAuth.tsx

@@ -37,6 +37,7 @@ type State =
   | "needsAuth"
   | "needsVerify"
   | "notMember"
+  | "rateLimit"
   | "ok"
   | "err";
 
@@ -52,15 +53,15 @@ const checkAuth = async (
       purgeToken();
       return "needsAuth";
     }
+    if (res.status === 429) {
+      return "rateLimit";
+    }
     if (res.status !== 200) {
       return "err";
     }
 
     const loadedUser = (await res.json()) as DiscordIdentity;
 
-    if (!loadedUser?.user?.verified) {
-      return "needsVerify";
-    }
     if (!loadedUser.isMember) {
       return "notMember";
     }
@@ -97,6 +98,16 @@ export const DiscordAuth = ({ children }: Props) => {
     <>
       {(() => {
         switch (state) {
+          case "rateLimit":
+            return (
+              <div>
+                <p>
+                  Oops! You got rate limited by Discord. Please try again in a
+                  minute or two.
+                </p>
+              </div>
+            );
+
           case "err":
             return (
               <div>
@@ -132,16 +143,16 @@ export const DiscordAuth = ({ children }: Props) => {
                 💁
               </div>
             );
-          case "needsVerify":
-            return (
-              <div>
-                You don’t have a verified email associated with it. Please{" "}
-                <a href="https://support.discord.com/hc/en-us/articles/213219267-Resending-Verification-Email">
-                  verify your email
-                </a>{" "}
-                and try again.
-              </div>
-            );
+          // case "needsVerify":
+          //   return (
+          //     <div>
+          //       You don’t have a verified email associated with it. Please{" "}
+          //       <a href="https://support.discord.com/hc/en-us/articles/213219267-Resending-Verification-Email">
+          //         verify your email
+          //       </a>{" "}
+          //       and try again.
+          //     </div>
+          //   );
           case "needsAuth":
           default:
             return (

src/components/Form/Checkbox.js

@@ -66,7 +66,7 @@ export const Checkbox = ({ label, ...props }) => {
   const onChange = createChangeHandler(props);
   return (
     <p>
-      <Label htmlFor={props.name}>
+      <Label htmlFor={props.name} onClick={onChange}>
         <Checkmark hidden={!props.value}>✔</Checkmark>
         <input
           checked={props.value}

src/components/Form/Form.js

@@ -28,8 +28,9 @@ export const Form = React.forwardRef(function Form(
 ) {
   const [status, setStatus] = React.useState(NONE);
   const [fieldState, setFieldState] = React.useState(
-    origFields.reduce((acc, { defaultValue, name }) => {
-      acc[name] = typeof defaultValue !== "undefined" ? defaultValue : "";
+    origFields.reduce((acc, { defaultValue, value, name }) => {
+      acc[name] =
+        typeof defaultValue !== "undefined" ? defaultValue : value || "";
       return acc;
     }, {}),
   );
@@ -40,10 +41,14 @@ export const Form = React.forwardRef(function Form(
       // have to pull the value from the synthetic event here, because react throws it away
       const value = e.target.value;
       if (value !== fieldState[field.name]) {
-        setFieldState((prev) => ({
-          ...prev,
-          [field.name]: value,
-        }));
+        setFieldState((prev) => {
+          const newState = {
+            ...prev,
+            [field.name]: value,
+          };
+          onChange(newState);
+          return newState;
+        });
       }
     },
     value: fieldState[field.name],