Feature/event form

src/components/FormField/index.jsx

@@ -2,14 +2,16 @@ import React from 'react';
 import TextField from '@material-ui/core/TextField';
 
 /* eslint-disable */
-export default ({ field, form, children, ...props }) => (
+export default ({ field, form, children, multiline, ...props }) => (
   <TextField
     type='text'
     margin='normal'
     label={field.name.split('.')[1] || field.name}
+    multiline={multiline}
+    rows={multiline ? 3 : 1}
     {...field}
     {...props}
-    error={form.touched[field.name] && form.errors[field.name]}
+    error={!!(form.touched[field.name] && form.errors[field.name])}
     helperText={
       form.touched[field.name] && form.errors[field.name]
         ? form.errors[field.name]

src/constants/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+export const FIREBASE_CONFIG = {
+  apiKey: process.env.REACT_APP_FIREBASE_TOKEN,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGEING_SENDER_ID,
+};

src/containers/EventForm/components/ArtworkForm/function.js

@@ -1,28 +1,23 @@
-import { ArtworksRepository, PeopleRepository } from 'hackoss';
-import { FirebaseApp } from 'utils/firebase';
+import { artworksRepository, peopleRepository } from '../../utils/hackoss-repo';
 
-async function getPeopleBase() {
-  const pplRepo = new PeopleRepository(FirebaseApp);
-  const people = await pplRepo.getPeople();
+async function getPeople() {
+  const people = await peopleRepository.getPeople();
   return people;
 }
-export async function getPeople() {
-  const people = await getPeopleBase();
+export async function getPeopleNames() {
+  const people = await getPeople();
   return people.map(person => person.name);
 }
 
-export const createArtwork = setStatus => async input => {
-  const pplRepo = new PeopleRepository(FirebaseApp);
-  const awRepo = new ArtworksRepository(FirebaseApp, pplRepo);
-  const exist = await awRepo.getArtworks();
-  if (exist.find(aw => aw.title === input.title)) {
-    setStatus('Artwork existed');
-    return null;
-  }
-  let { artistId } = input;
-  const people = await getPeopleBase();
-  const matchedPerson = people.find(person => person.name === artistId);
-  artistId = matchedPerson.id;
-  const result = { ...input, artistId, eventbriteId: '' };
-  return awRepo.createArtwork(result);
+export const createArtwork = async ({
+  title,
+  artistId: artistName,
+  ...props
+}) => {
+  const exist = await artworksRepository.getArtworks();
+  if (exist.find(aw => aw.title === title)) throw new Error('Artwork existed');
+  const names = await getPeople();
+  const artistId = names.find(name => name.name === artistName).id;
+  const result = { ...props, title, artistId };
+  return artworksRepository.createArtwork(result);
 };

src/containers/EventForm/components/ArtworkForm/index.jsx

@@ -5,7 +5,7 @@ import { Field } from 'formik';
 
 import FormField from 'components/FormField';
 import FormBase from 'containers/EventForm/utils/FormBase';
-import { createArtwork, getPeople } from './function';
+import { createArtwork, getPeopleNames } from './function';
 
 const config = [
   { key: 'title', value: '' },
@@ -18,18 +18,14 @@ const ArtworkForm = ({ setStatus }) => {
   let isMounted;
   useEffect(() => {
     isMounted = true;
-    getPeople().then(val => isMounted && setPeople(val));
+    getPeopleNames().then(val => isMounted && setPeople(val));
     return () => {
       isMounted = false;
     };
   }, []);
 
   return (
-    <FormBase
-      setStatus={setStatus}
-      config={config}
-      callback={createArtwork(setStatus)}
-    >
+    <FormBase setStatus={setStatus} config={config} callback={createArtwork}>
       <Field
         type='text'
         name='artistId'

src/containers/EventForm/components/EventForm/components/FirstStep/function.js

@@ -18,10 +18,10 @@ async function getLocationsBase() {
 }
 export async function getArtworks() {
   const data = await getArtworksBase();
-  return data.length > 0 ? data.map(item => item.title) : ['Nothing created'];
+  return data.length > 0 ? data.map(item => item.title) : [''];
 }
 
 export async function getLocations() {
   const data = await getLocationsBase();
-  return data.length > 0 ? data.map(item => item.name) : ['Nothing created'];
+  return data.length > 0 ? data.map(item => item.name) : [''];
 }

src/containers/EventForm/components/EventForm/components/FirstStep/index.jsx

@@ -51,15 +51,26 @@ const FirstStep = ({ activeStep, errors, touched }) => {
           {booleanConfig.map(item => (
             <Field
               key={item.key}
-              type={item.type || 'text'}
               name={item.key}
-              render={props => (
+              label={item.key}
+              component={({
+                field: { value, ...others },
+                form: { errors, touched, setFieldValue },
+                label,
+                ...props
+              }) => (
                 <FormControlLabel
                   keyword={item.key}
+                  label={item.key}
                   control={
-                    <Checkbox color='primary' {...props} value='false' />
+                    <Checkbox
+                      color='primary'
+                      value={value.toString()}
+                      checked={value}
+                      {...props}
+                      {...others}
+                    />
                   }
-                  label={item.key}
                 />
               )}
             />

src/containers/EventForm/components/EventForm/config.js

@@ -13,7 +13,10 @@ const speakerConfig = [
   { key: 'organisation' },
   { key: 'position' },
 ];
-// prettier-ignore
+
+/* eslint-disable */
+// these two are optional field that
+// shouldn't be dealt with on front end
 const facebook = [
   { key: 'id' },
   { key: 'status', value: 'draft' },
@@ -28,7 +31,7 @@ const eventbrite = [
 const configReducer = config =>
   config.reduce(
     (agg, value) => ({
-      [value.key]: value.value || '',
+      [value.key]: value.value || value.value === false ? value.value : '',
       ...agg,
     }),
     {},
@@ -64,8 +67,6 @@ export const initConfig = {
   venue: '',
   banner: '',
   status: 'draft',
-  facebook: configReducer(facebook),
-  eventbrite: configReducer(eventbrite),
   dependencies: [configReducer(dependencyConfig)],
   prerequisites: [configReducer(prerequisiteConfig)],
   speakers: [configReducer(speakerConfig)],

src/containers/EventForm/components/EventForm/function.js

@@ -1,31 +1,19 @@
 import {
-  PeopleRepository,
-  ArtworksRepository,
-  OrganisationsRepository,
-  LocationsRepository,
-  EventsRepository,
-} from 'hackoss';
-import { FirebaseApp } from 'utils/firebase';
+  artworksRepository,
+  locationsRepository,
+  peopleRepository,
+  organisationsRepository,
+  eventsRepository,
+} from '../../utils/hackoss-repo';
 
-export default async function createEvent(data) {
-  const pplRepo = new PeopleRepository(FirebaseApp);
-  const locRepo = new LocationsRepository(FirebaseApp);
-  const orgRepo = new OrganisationsRepository(FirebaseApp);
-  const awRepo = new ArtworksRepository(FirebaseApp, pplRepo);
-  const eventRepo = new EventsRepository(
-    FirebaseApp,
-    pplRepo,
-    locRepo,
-    orgRepo,
-    awRepo,
-  );
-  /* eslint-disable */
+/* eslint-disable */
+export const createEvent = async data => {
   let { banner, venue, speakers, startTime, endTime, ...others } = data;
   /* eslint-enable */
-  const aw = await awRepo.getArtworks();
-  const loc = await locRepo.getLocations();
-  const ppl = await pplRepo.getPeople();
-  const org = await orgRepo.getOrganisations();
+  const aw = await artworksRepository.getArtworks();
+  const loc = await locationsRepository.getLocations();
+  const ppl = await peopleRepository.getPeople();
+  const org = await organisationsRepository.getOrganisations();
   startTime = new Date(startTime);
   endTime = new Date(endTime);
   const bannerId = aw.find(item => item.title === banner).id;
@@ -38,5 +26,5 @@ export default async function createEvent(data) {
   });
 
   const result = { ...data, bannerId, venueId, speakers, startTime, endTime };
-  return eventRepo.createEvent(result);
-}
+  return eventsRepository.createEvent(result);
+};

src/containers/EventForm/components/EventForm/index.jsx

@@ -10,7 +10,7 @@ import FirstStep from './components/FirstStep';
 import SecondStep from './components/SecondStep';
 import ThirdStep from './components/ThirdStep';
 import Referencing from './components/Referencing';
-import createEvent from './function';
+import { createEvent } from './function';
 import {
   Wrapper,
   Stepper,
@@ -20,32 +20,6 @@ import {
 } from './style';
 import { initConfig } from './config';
 
-// // export declare class FirebaseEvent {
-// //   id: string;
-// //   tgif: number;
-// //   title: string;
-// //   tagline: string;
-// //   description: string;
-// //   promotion: string;
-// //   githubUrl: string;
-// //   remarks: string;
-// //   startTime: firebase.firestore.Timestamp;
-// //   endTime: firebase.firestore.Timestamp;
-// //   speakers: FirebaseEventSpeaker[];
-// //   prerequisites: Prerequisite[];
-// //   dependencies: Dependency[];
-// //   banner: firebase.firestore.DocumentReference;
-// //   venue: firebase.firestore.DocumentReference;
-
-// //   eventbrite: Publication;
-// //   facebook: Publication;
-// //   status: EventStatus;
-// //   isPublic: boolean;
-// //   isExternal: boolean;
-// //   hasFood: boolean;
-// //   hasDrinks: boolean;
-// // }
-
 function chooseForm(values, activeStep, errors, touched) {
   switch (activeStep) {
     case 0:
@@ -65,18 +39,6 @@ function HorizontalLinearStepper({ setStatus }) {
   const [activeStep, setActiveStep] = React.useState(0);
   const steps = ['Basic setting', 'Dependencies', 'Prerequisite', 'References'];
 
-  function handleNext() {
-    setActiveStep(prevActiveStep => prevActiveStep + 1);
-  }
-
-  function handleBack() {
-    setActiveStep(prevActiveStep => prevActiveStep - 1);
-  }
-
-  function handleReset() {
-    setActiveStep(0);
-  }
-
   return (
     <Wrapper>
       <Formik
@@ -108,7 +70,7 @@ function HorizontalLinearStepper({ setStatus }) {
                     All steps completed
                   </Typography>
                   <div>
-                    <Button onClick={handleReset}>Reset</Button>
+                    <Button onClick={() => setActiveStep(0)}>Reset</Button>
                     <Button type='submit' disabled={isSubmitting}>
                       Submit
                     </Button>
@@ -123,14 +85,18 @@ function HorizontalLinearStepper({ setStatus }) {
                     <Button
                       margin='normal'
                       disabled={activeStep === 0}
-                      onClick={handleBack}
+                      onClick={() =>
+                        setActiveStep(prevActiveStep => prevActiveStep - 1)
+                      }
                     >
                       Back
                     </Button>
                     <Button
                       variant='contained'
                       color='primary'
-                      onClick={handleNext}
+                      onClick={() =>
+                        setActiveStep(prevActiveStep => prevActiveStep + 1)
+                      }
                     >
                       {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                     </Button>

src/containers/EventForm/components/LocationForm/function.js

@@ -1,13 +1,9 @@
-import { LocationsRepository } from 'hackoss';
-import { FirebaseApp } from 'utils/firebase';
+import { locationsRepository } from '../../utils/hackoss-repo';
 
-// Should use validation. but we will stick to this for now
-export default setStatus => async input => {
-  const locRepo = new LocationsRepository(FirebaseApp);
-  const exist = await locRepo.getLocations();
-  if (exist.find(loc => loc.name === input.name)) {
-    setStatus('location existed');
-    return null;
-  }
-  return locRepo.createLocation(input);
+/* eslint-disable */
+export const createLocation = async input => {
+  const repoLocations = await locationsRepository.getLocations();
+  if (repoLocations.find(loc => loc.name === input.name))
+    throw new Error('location existed');
+  return locationsRepository.createLocation(input);
 };

src/containers/EventForm/components/LocationForm/index.jsx

@@ -2,23 +2,23 @@ import React from 'react';
 import * as PropTypes from 'prop-types';
 
 import FormBase from 'containers/EventForm/utils/FormBase';
-import createLocation from './function';
+import { createLocation } from './function';
 
 const config = [
   { key: 'name', value: '' },
   { key: 'imageUrl', value: '' },
   { key: 'addressLine1', value: '' },
   { key: 'addressLine2', value: '' },
   { key: 'seatingCapacity', value: 502 },
-  { key: 'eventbriteId', value: '' },
 ];
 
 const LocationForm = ({ setStatus }) => {
   return (
+    /* prettier-ignore */
     <FormBase
       setStatus={setStatus}
       config={config}
-      callback={createLocation(setStatus)}
+      callback={createLocation}
     />
   );
 };

src/containers/EventForm/components/OrgForm/function.js

@@ -1,12 +1,10 @@
-import { OrganisationsRepository } from 'hackoss';
-import { FirebaseApp } from 'utils/firebase';
+import { organisationsRepository } from '../../utils/hackoss-repo';
 
-export default setStatus => async input => {
-  const orgRepo = new OrganisationsRepository(FirebaseApp);
-  const exist = await orgRepo.getOrganisations();
+/* eslint-disable */
+export const createOrg = async input => {
+  const exist = await organisationsRepository.getOrganisations();
   if (exist.find(org => org.name === input.name)) {
-    setStatus('This org exsited in the database');
-    return null;
+    throw new Error('This org exsited in the database');
   }
-  return orgRepo.createOrganisation(input);
+  return organisationsRepository.createOrganisation(input);
 };