feat(sponsors): add component for adding a sponsor to an event (freeCodeCamp#140)

* feat(add a sponsor): add component for adding a sponsor to an event

freeCodeCamp#97

* style(client): fix whitespace

* refactor(add sponsor): convert to typescript

also make changes as per reviewer comments

* refactor(add sponsor): adding basic styling to form using styled-components

also addressed reviewer comments

* chore(add-sponsor): fix spelling mistakes

* refactor(add-sponsor): add isomporphic-fetch and refactor to pass linting tests

also changed error handling / success response handling

* fix(eslintrd): ignore prop-types in eslint

* fix(add sponsor component): rename interfaces to begin with 'I'

also remove return type of FC

* refactor(add sponsor): split styles and interfaces into seperate files

* refactor(add sponsor): folder restructure

* refactor(addsponsor.tsx): fix submit function to use try/catch

* Update .eslintrc.json

* refactor(add sponsor): make sponsor type a typed enum

* refactor(add sponsor form): rewrite to use react-hook-form as per new project specs

163

* fix(add sponsor) remove console log

* fix linter being weird

Author: Joel Rozen

.eslintrc.json

@@ -6,7 +6,11 @@
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "prettier"
+  ],
   "env": {
     "node": true,
     "es6": true
@@ -22,7 +26,9 @@
       "env": {
         "jest": true
       },
-      "plugins": ["jest"]
+      "plugins": [
+        "jest"
+      ]
     }
   ],
   "rules": {
@@ -32,7 +38,8 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
     "prettier/prettier": ["error", { "singleQuote": true }],
-    "react/display-name": 0
+    "react/display-name": 0,
+    "react/prop-types": 0
   },
   "settings": {
     "react": {

client/components/AddSponsor.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import fetch from 'isomorphic-fetch';
+import useForm from 'react-hook-form';
+
+import {
+  Form,
+  Input,
+  ResponseDiv,
+  SubmitBtn,
+} from 'client/styles/components/AddSponsor';
+import {
+  IAddSponsorProps,
+  ISponsorData,
+} from 'client/interfaces/components/AddSponsor';
+
+const AddSponsor: React.FC<IAddSponsorProps> = ({ eventId, chapterId }) => {
+  const [responseMsg, setResponseMsg] = React.useState('');
+
+  const { register, handleSubmit, errors } = useForm();
+
+  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.`);
+    } catch (e) {
+      setResponseMsg('Uh oh, something went wrong.');
+      // TODO: more descriptive error messages
+    }
+  };
+
+  return (
+    <>
+      {(responseMsg || errors) && <ResponseDiv>{responseMsg}</ResponseDiv>}
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <label>Sponsor Name: </label>
+        <Input
+          name="name"
+          type="text"
+          placeholder="Glitter and Sparkle Co"
+          ref={register}
+          required
+        />
+        <label>Sponsor Website: </label>
+        <Input
+          name="website"
+          type="text"
+          placeholder="www.glitter.co"
+          ref={register}
+          required
+        />
+        <label>Sponsor Type: </label>
+        <select name="type" required ref={register}>
+          <option value="FOOD">Food</option>
+          <option value="BEVERAGE">Beverage</option>
+          <option value="OTHER">Other</option>
+        </select>
+        <SubmitBtn type="submit">Add Sponsor</SubmitBtn>
+      </Form>
+    </>
+  );
+};
+
+export default AddSponsor;

client/components/index.ts

@@ -1,3 +1,4 @@
 import SomeComponent from './SomeComponent';
+import AddSponsor from './AddSponsor';
 
-export { SomeComponent };
+export { SomeComponent, AddSponsor };

client/interfaces/components/AddSponsor.tsx

@@ -0,0 +1,15 @@
+export interface IAddSponsorProps {
+  eventId: string;
+  chapterId: string;
+}
+
+export enum SponsorType {
+  FOOD,
+  BEVERAGE,
+  OTHER,
+}
+export interface ISponsorData {
+  name: string;
+  website: string;
+  type: SponsorType;
+}

client/styles/components/AddSponsor.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  max-width: 25%;
+`;
+
+export const Input = styled.input`
+  margin-bottom: 15px;
+`;
+
+export const SubmitBtn = styled.button`
+  margin-top: 15px;
+`;
+
+export const ResponseDiv = styled.div`
+  margin: 15px 0;
+`;
+// TODO: Style div based on response reveived