[WIP] Feature/events crud

client/components/Dashboard/Events/EventForm.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  FormControl,
+  TextField,
+  Button,
+  makeStyles,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@material-ui/core';
+import { IVenueModal } from 'client/store/types/venues';
+
+interface IField {
+  key: string;
+  label: string;
+  placeholder?: string;
+  type: string;
+  defaultValue?: string;
+}
+
+const fields: IField[] = [
+  {
+    key: 'name',
+    type: 'text',
+    label: 'Event title',
+    placeholder: 'Foo and the Bars',
+  },
+  {
+    key: 'description',
+    type: 'text',
+    label: 'Description',
+    placeholder: '',
+  },
+  {
+    key: 'capacity',
+    type: 'number',
+    label: 'Capacity',
+    placeholder: '50',
+  },
+  {
+    key: 'tags',
+    type: 'text',
+    label: 'Tags (separated by a comma)',
+    placeholder: 'Foo, bar',
+  },
+  {
+    key: 'start_at',
+    type: 'datetime-local',
+    label: 'Start at',
+    defaultValue: new Date().toISOString().slice(0, 16),
+  },
+  {
+    key: 'ends_at',
+    type: 'datetime-local',
+    label: 'End at',
+    defaultValue: new Date(Date.now() + 1000 * 60 * 60)
+      .toISOString()
+      .slice(0, 16),
+  },
+];
+
+const useStyles = makeStyles(() => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '25%',
+  },
+  item: {
+    marginTop: '20px',
+  },
+}));
+
+export interface IEventFormData {
+  name: string;
+  description: string;
+  capacity: number;
+  tags: string;
+  venue: number;
+}
+
+interface IEventFormProps {
+  onSubmit: (data: IEventFormData) => void;
+  loading: boolean;
+  venues: IVenueModal[];
+  venuesLoading: boolean;
+}
+
+const EventForm: React.FC<IEventFormProps> = ({
+  onSubmit,
+  loading,
+  venues,
+  venuesLoading,
+}) => {
+  const { control, handleSubmit } = useForm();
+  const styles = useStyles();
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      {fields.map(field => (
+        <FormControl className={styles.item} key={field.key}>
+          <Controller
+            control={control}
+            as={
+              <TextField
+                label={field.label}
+                type={field.type}
+                placeholder={field.placeholder}
+              />
+            }
+            name={field.key}
+            defaultValue={field.defaultValue}
+            options={{ required: true }}
+          />
+        </FormControl>
+      ))}
+      {venuesLoading ? (
+        <h1>Loading venues...</h1>
+      ) : (
+        <FormControl className={styles.item}>
+          <InputLabel id="venue-label">Venue</InputLabel>
+          <Controller
+            control={control}
+            as={
+              <Select labelId="venue-label">
+                {venues.map(venue => (
+                  <MenuItem value={venue.id} key={venue.id}>
+                    {venue.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            }
+            name="venue"
+            options={{ required: true }}
+            defaultValue={0}
+          />
+        </FormControl>
+      )}
+      <Button
+        className={styles.item}
+        variant="contained"
+        color="primary"
+        type="submit"
+        disabled={loading}
+      >
+        Add Event
+      </Button>
+    </form>
+  );
+};
+
+export default EventForm;

client/components/Dashboard/Events/EventItem.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { Card, Typography } from '@material-ui/core';
+import { Card, Typography, Button } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
+import Link from 'next/link';
 
 import { IEventModal } from 'client/store/types/events';
+import { eventActions } from 'client/store/actions';
+import useConfirm from 'client/hooks/useConfirm';
 import { ProgressCardContent } from 'client/components';
 
 interface IEventItemProps {
@@ -10,18 +14,53 @@ interface IEventItemProps {
 }
 
 const EventItem: React.FC<IEventItemProps> = ({ event, loading }) => {
+  const dispatch = useDispatch();
+
+  const [confirmCancel, clickCancel] = useConfirm(() =>
+    dispatch(eventActions.cancelEvent(1, event.id)),
+  );
+  const [confirmRemove, clickRemove] = useConfirm(() =>
+    dispatch(eventActions.removeEvent(1, event.id)),
+  );
+
   return (
-    <Card style={{ marginTop: '12px' }} key={`event-${event.id}`}>
+    <Card style={{ marginTop: '12px' }}>
       <ProgressCardContent loading={loading}>
-        <Typography gutterBottom variant="h5" component="h2">
-          {event.name}
-        </Typography>
+        <Link
+          href="/dashboard/events/[id]"
+          as={`/dashboard/events/${event.id}`}
+        >
+          <a>
+            <Typography gutterBottom variant="h5" component="h2">
+              {event.name}
+            </Typography>
+          </a>
+        </Link>
+        {event.canceled && (
+          <Typography variant="h5" color="error">
+            Canceled
+          </Typography>
+        )}
         <Typography variant="body2" color="textSecondary" component="p">
           {event.description}
         </Typography>
         <Typography variant="body2" color="textSecondary" component="p">
           {event.capacity}
         </Typography>
+        {!event.canceled && (
+          <Button onClick={clickCancel}>
+            {confirmCancel ? 'Are you sure?' : 'Cancel'}
+          </Button>
+        )}
+        <Button onClick={clickRemove}>
+          {confirmRemove ? 'Are you sure?' : 'delete'}
+        </Button>
+        <Link
+          href={`/dashboard/events/[id]/edit`}
+          as={`/dashboard/events/${event.id}/edit`}
+        >
+          <a style={{ marginLeft: '10px' }}>Edit</a>
+        </Link>
       </ProgressCardContent>
     </Card>
   );

client/components/Dashboard/Events/Skeleton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Link from 'next/link';
+
+const Skeleton: React.FC = ({ children }) => {
+  return (
+    <>
+      <Link href="/dashboard/events">
+        <a>Events</a>
+      </Link>
+      {children}
+    </>
+  );
+};
+
+export default Skeleton;

client/components/Dashboard/Events/index.ts

@@ -1,3 +1,5 @@
 import EventItem from './EventItem';
+import EventForm from './EventForm';
+import Skeleton from './Skeleton';
 
-export { EventItem };
+export { EventItem, EventForm, Skeleton };

client/hooks/useConfirm.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+const useConfirm = (callback: Function): [boolean, () => void] => {
+  const [confirm, setConfirm] = useState<boolean>(false);
+
+  const click = () => {
+    if (confirm) {
+      callback();
+    } else {
+      setConfirm(true);
+    }
+  };
+
+  useEffect(() => {
+    if (confirm) {
+      setTimeout(() => {
+        setConfirm(false);
+      }, 2000);
+    }
+  }, [confirm]);
+
+  return [confirm, click];
+};
+
+export default useConfirm;

client/modules/home.tsx

@@ -46,7 +46,7 @@ const Home: React.FC = () => {
       </Link>
       <br />
       <Link href="/dashboard">
-        <a>Dashboard</a>
+        <a>Admin dashboard</a>
       </Link>
     </>
   );