feat: conditionally load fetch proxy lib for browser/server

* fix linting errors

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 .next/
 next.config.js
+client/@types/

.eslintrc.json

@@ -12,6 +12,7 @@
     "prettier"
   ],
   "env": {
+    "browser": true,
     "node": true,
     "es6": true
   },

client/@types/global.d.ts

@@ -8,6 +8,3 @@ interface Window {
   __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
   __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
 }
-
-// export some usefull utils for type modifications...
-type Subtract<T, K> = T extends K ? T : never;

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,20 @@ import {
   ResponseDiv,
   SubmitBtn,
 } from 'client/styles/components/AddSponsor';
-import {
-  IAddSponsorProps,
-  ISponsorData,
-} from 'client/interfaces/components/AddSponsor';
 
-const AddSponsor: React.FC<IAddSponsorProps> = ({ eventId, chapterId }) => {
+const AddSponsor: React.FC = () => {
   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,17 +2,26 @@
  * 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
   public static baseHeaders = {
     'Content-Type': 'application/json',
   };
 
-  public stringifyParams(params: Object) {
+  public stringifyParams(params: Record<string, string>) {
     return Object.keys(params).reduce((acc, key, i) => {
-      return params.hasOwnProperty(key)
+      return Object.prototype.hasOwnProperty.call(params, key)
         ? `${acc}${i !== 0 ? '&' : '?'}${key}=${params[key]}`
         : acc;
     }, '');

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
       }