eventlist cleanup

src/app/sampleData.js

@@ -1,16 +1,36 @@
 const dummy = new Date();
 
 export const sampleData = {
-  id: '1',
-  title: 'Is the internet a fad?',
-  subtitle: 'Carlos Valente',
-  timeStart: '10:00',
-  timeEnd: '11:30',
-  clockStarted: dummy,
-  timerDuration: 10,
-  message: {
-    text: 'Hurry Up!',
-    color: '#F00',
-    active: false,
-  },
+  events: [
+    {
+      id: '1',
+      title: 'Is the internet a fad?',
+      subtitle: 'It is',
+      presenter: 'Carlos Valente',
+      timeStart: '10:00',
+      timeEnd: '11:30',
+      clockStarted: dummy,
+      timerDuration: 10,
+      message: {
+        text: 'Hurry Up!',
+        color: '#F00',
+        active: false,
+      },
+    },
+    {
+      id: '2',
+      title: 'Is reddit a dictatorship?',
+      subtitle: 'It is',
+      presenter: 'Carlos Valente',
+      timeStart: '11:40',
+      timeEnd: '13:00',
+      clockStarted: dummy,
+      timerDuration: 10,
+      message: {
+        text: 'Hurry Up!',
+        color: '#F00',
+        active: false,
+      },
+    },
+  ],
 };

src/features/editors/Editor.jsx

@@ -1,7 +1,8 @@
-import { Flex, Text } from '@chakra-ui/layout';
+import { Button } from '@chakra-ui/button';
 import { Heading } from '@chakra-ui/layout';
 import { SimpleGrid } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
+import { useState } from 'react';
 import NumberedText from '../../common/components/text/NumberedText';
 import EventForm from '../form/EventForm';
 import PreviewContainer from '../viewers/PreviewContainer';
@@ -9,6 +10,8 @@ import styles from './Editor.module.css';
 import EventList from './list/EventList';
 
 export default function Editor() {
+  const [selectedEvent, setSelectedEvent] = useState(null);
+
   return (
     <SimpleGrid
       minChildWidth='120px'
@@ -19,7 +22,10 @@ export default function Editor() {
         <Heading>List Events</Heading>
         <NumberedText number={1} text={'Select Event'} />
         <div className={styles.content}>
-          <EventList />
+          <EventList selected={selectedEvent} setSelected={setSelectedEvent} />
+          <div className={styles.buttons}>
+            <Button colorScheme='teal'>Add Event</Button>
+          </div>
         </div>
       </Box>
 

src/features/editors/Editor.module.css

@@ -6,8 +6,8 @@
 
 .editor {
   height: 100%;
-  margin-top: 1em;
-  background-color: white;
+  margin-top: 2.5vh;
+  background-color: #fcfcfa;
   padding: 2em;
 
   display: flex;
@@ -16,4 +16,4 @@
 
 .content {
   padding-top: 2em;
-}
+}

src/features/editors/list/EventList.jsx

@@ -1,56 +1,32 @@
-import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableCaption,
-  Button,
-} from '@chakra-ui/react';
+import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import { useState } from 'react';
+import { sampleData } from '../../../app/sampleData';
+import EventListItem from './EventListItem';
+
+export default function EventList(props) {
+  const [data, setData] = useState(sampleData);
 
-export default function EventList() {
   return (
-    <div className>
-      <Table variant='simple' size='sm'>
-        <TableCaption>Todays event list</TableCaption>
-
-        <Thead>
-          <Tr>
-            <Th>Event Title</Th>
-            <Th>Event Subtitle</Th>
-            <Th>Presenter Name</Th>
-            <Th>Time Start</Th>
-            <Th>Time End</Th>
-            <Th>Timer</Th>
-            <Th></Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          <Tr>
-            <Td>Title</Td>
-            <Td>Subtitle</Td>
-            <Td>Presenter</Td>
-            <Td>10:00</Td>
-            <Td>11:00</Td>
-            <Td>60.00</Td>
-            <Td>
-              <Button colorScheme='teal'>❯</Button>
-            </Td>
-          </Tr>
-          <Tr>
-            <Td>Title</Td>
-            <Td>Subtitle</Td>
-            <Td>Presenter</Td>
-            <Td>10:00</Td>
-            <Td>11:00</Td>
-            <Td>60.00</Td>
-            <Td>
-              <Button colorScheme='teal'>❯</Button>
-            </Td>
-          </Tr>
-        </Tbody>
-      </Table>
-    </div>
+    <Table variant='simple' size='sm'>
+      <Thead>
+        <Tr>
+          <Th>Event Title</Th>
+          <Th>Presenter Name</Th>
+          <Th>Time Start</Th>
+          <Th>Time End</Th>
+          <Th></Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data.events.map((e) => (
+          <EventListItem
+            key={e.id}
+            data={e}
+            isSelected={props.selected === e.id}
+            setSelected={props.setSelected}
+          />
+        ))}
+      </Tbody>
+    </Table>
   );
 }

src/features/editors/list/EventListItem.jsx

@@ -0,0 +1,27 @@
+import { Button } from '@chakra-ui/button';
+import { Td, Tr } from '@chakra-ui/table';
+
+export default function EventListItem(props) {
+  return (
+    <Tr
+      style={
+        props.isSelected
+          ? { backgroundColor: '#b2f5ea' }
+          : { backgroundColor: 'white' }
+      }
+    >
+      <Td>{props.data.title}</Td>
+      <Td>{props.data.presenter}</Td>
+      <Td>{props.data.timeStart}</Td>
+      <Td>{props.data.timeEnd}</Td>
+      <Td>
+        <Button
+          colorScheme='teal'
+          onClick={() => props.setSelected(props.data.id)}
+        >
+          ❯
+        </Button>
+      </Td>
+    </Tr>
+  );
+}