Fix table bugs

frontend/components/ClubEditPage/EventsCard.tsx

@@ -1,7 +1,6 @@
 import { Field } from 'formik'
 import moment from 'moment'
 import React, { ReactElement, useState } from 'react'
-import CreatableSelect from 'react-select/creatable'
 import TimeAgo from 'react-timeago'
 import styled from 'styled-components'
 
@@ -297,7 +296,22 @@ const eventTableFields = [
   {
     name: 'is_ics_event',
     label: 'ICS',
-    converter: (a: boolean): ReactElement => <Icon name={a ? 'check' : 'x'} />,
+    converter: (a: boolean): ReactElement => (
+      <Icon
+        className={`${a ? 'has-text-success' : 'has-text-danger'}`}
+        name={a ? 'check' : 'x'}
+      />
+    ),
+  },
+]
+
+const eventTableFilter = [
+  {
+    label: 'Types',
+    options: EVENT_TYPES.map((obj) => {
+      return { key: obj.value, label: obj.label }
+    }),
+    filterFunction: (selection, object) => object.type === selection,
   },
 ]
 
@@ -343,12 +357,6 @@ const eventFields = (
       placeholder="Type your event description here!"
       as={RichTextField}
     />
-    <CreatableSelect
-      name="multiple_choice"
-      as={SelectField}
-      isMulti
-      creatable
-    />
   </>
 )
 
@@ -415,6 +423,7 @@ export default function EventsCard({ club }: EventsCardProps): ReactElement {
         fields={eventFields}
         fileFields={['image']}
         tableFields={eventTableFields}
+        filterOptions={eventTableFilter}
         noun="Event"
         currentTitle={(obj) => (obj != null ? obj.name : 'Deleted Event')}
         onChange={(obj) => {

frontend/components/ClubEditPage/MembersCard.tsx

@@ -95,7 +95,16 @@ export default function MembersCard({ club }: MembersCardProps): ReactElement {
             ],
             filterFunction: (selection, object) => object.role === selection,
           },
+          {
+            label: 'Active',
+            options: [
+              { key: true, label: 'Active' },
+              { key: false, label: 'Inactive' },
+            ],
+            filterFunction: (selection, object) => object.active === selection,
+          },
         ]}
+        searchableColumns={['name', 'email']}
         currentTitle={(obj) =>
           obj != null ? `${obj.name} (${obj.email})` : 'Kicked Member'
         }

frontend/components/ModelForm.tsx

@@ -74,6 +74,7 @@ type ModelFormProps = {
   fields: any
   tableFields?: TableField[]
   filterOptions?: FilterOption[]
+  searchableColumns?: string[]
   currentTitle?: (object: ModelObject) => ReactElement | string
   noun?: string
   deleteVerb?: string
@@ -111,6 +112,7 @@ export const doFormikInitialValueFixes = (currentObject: {
 type ModelTableProps = {
   tableFields: TableField[]
   filterOptions?: FilterOption[]
+  searchableColumns?: string[]
   objects: ModelObject[]
   allowEditing?: boolean
   allowDeletion?: boolean
@@ -130,6 +132,7 @@ type ModelTableProps = {
 export const ModelTable = ({
   tableFields,
   filterOptions,
+  searchableColumns,
   objects,
   allowEditing = false,
   allowDeletion = false,
@@ -150,16 +153,16 @@ export const ModelTable = ({
       })),
     [tableFields],
   )
-
   tableFields = tableFields.map((column, index) => {
     if (column.converter) {
       const renderFunction = column.converter
       return {
         ...column,
-        render: (id, _) => {
-          const obj = objects?.[id]
+        render: (id) => {
+          const obj =
+            objects?.filter((item) => item.id === id)[0] || objects?.[id]
           const value = obj?.[column.name]
-          return obj && value ? renderFunction(value, obj) : 'N/A'
+          return obj && value !== null ? renderFunction(value, obj) : 'None'
         },
       }
     } else return column
@@ -215,7 +218,9 @@ export const ModelTable = ({
       <Table
         data={objects}
         columns={tableFields}
-        searchableColumns={['name']}
+        searchableColumns={
+          searchableColumns || tableFields.map((field) => field.name)
+        }
         filterOptions={filterOptions || []}
         draggable={draggable}
         onDragEnd={onDragEnd}
@@ -255,6 +260,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
     fields,
     tableFields,
     filterOptions,
+    searchableColumns,
     onUpdate,
     currentTitle,
     noun = 'Object',
@@ -464,6 +470,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
           noun={noun}
           tableFields={tableFields}
           filterOptions={filterOptions}
+          searchableColumns={searchableColumns}
           objects={objects}
           allowDeletion={allowDeletion}
           confirmDeletion={confirmDeletion}

frontend/components/PaginatedClubDisplay.tsx

@@ -101,7 +101,7 @@ const PaginatedClubDisplay = ({
         />
       )}
       {isLoading && <Loading delay={0} />}
-      {clubs && clubs.length <= 0 && (
+      {(clubs == null || clubs.length <= 0) && (
         <EmptyState>
           <img
             src="/static/img/button.svg"