feat: conditionally load fetch proxy lib for browser/server

client/components/AddSponsor.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import fetch from 'isomorphic-fetch';
 import useForm from 'react-hook-form';
 
 import {
@@ -8,29 +7,21 @@ import {
   ResponseDiv,
   SubmitBtn,
 } from 'client/styles/components/AddSponsor';
-import {
-  IAddSponsorProps,
-  ISponsorData,
-} from 'client/interfaces/components/AddSponsor';
+import { IAddSponsorProps } from 'client/interfaces/components/AddSponsor';
 
-const AddSponsor: React.FC<IAddSponsorProps> = ({ eventId, chapterId }) => {
+const AddSponsor: React.FC<IAddSponsorProps> = () => {
   const [responseMsg, setResponseMsg] = React.useState('');
 
   const { register, handleSubmit, errors } = useForm();
 
+  // TODO: Get data from store
+  // const eventId = useSelector(state => state.selectedChapter.eventId);
+  // const chapterId = useSelector(state => state.selectedChapter.id);
+
   const onSubmit = async data => {
-    const { name, website, type }: ISponsorData = data;
     try {
-      await fetch(`/${chapterId}/events/${eventId}/sponsors`, {
-        // TODO: create route
-        method: 'post',
-        body: {
-          name,
-          website,
-          type,
-        },
-      });
-      setResponseMsg(`${name} has been added as a ${type} sponsor.`);
+      // await dispatch(sponsorActions.submit(eventId, chapterId));
+      setResponseMsg(`${data.name} has been added as a ${data.type} sponsor.`);
     } catch (e) {
       setResponseMsg('Uh oh, something went wrong.');
       // TODO: more descriptive error messages

client/interfaces/components/AddSponsor.tsx

@@ -1,7 +1,4 @@
-export interface IAddSponsorProps {
-  eventId: string;
-  chapterId: string;
-}
+export interface IAddSponsorProps {}
 
 export enum SponsorType {
   FOOD,

client/services/http-service.ts

@@ -2,7 +2,16 @@
  * This Class is a very minimal wrapper around fetch
  * to make API calls easy.
  */
-import fetch from 'isomorphic-unfetch';
+
+import { RequestInfo, RequestInit, Response } from 'node-fetch';
+
+let fetch: (url: RequestInfo, init?: RequestInit) => Promise<Response>;
+
+if (typeof window === 'undefined') {
+  fetch = require('node-fetch');
+} else {
+  fetch = window.fetch ? window.fetch : require('whatwg-fetch');
+}
 
 export class HttpService<V = any> {
   public static baseUrl = '/api/v1'; // TODO: need to create some ENV for this

package.json

@@ -45,12 +45,11 @@
     "express-async-handler": "^1.1.4",
     "express-response-errors": "^1.0.4",
     "fork-ts-checker-webpack-plugin": "^1.5.1",
-    "isomorphic-fetch": "^2.2.1",
     "immer": "^3.2.0",
-    "isomorphic-unfetch": "^3.0.0",
     "module-alias": "^2.2.2",
     "morgan": "^1.9.1",
     "next": "^9.1.1",
+    "node-fetch": "^2.6.0",
     "pg": "^7.12.1",
     "pg-hstore": "^2.3.3",
     "react": "^16.10.2",
@@ -64,7 +63,8 @@
     "sequelize-typescript": "^1.0.0",
     "styled-components": "^4.4.0",
     "ts-node": "^8.4.1",
-    "typescript": "^3.6.4"
+    "typescript": "^3.6.4",
+    "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^9.3.0",

pages/add-sponsor.tsx

@@ -2,13 +2,9 @@ import * as React from 'react';
 import { AddSponsor } from 'client/components';
 
 const AddSponsorPage = () => {
-  // TODO - Dynamically get Chapter and EventId s
-  const eventId = '123abc';
-  const chapterId = 'abc123';
-
   return (
     <>
-      <AddSponsor eventId={eventId} chapterId={chapterId} />
+      <AddSponsor />
       {
         // TODO: page designs and styling
       }