support approved on as well as frontend cleanup

backend/clubs/serializers.py

@@ -2175,6 +2175,7 @@ class Meta(ClubSerializer.Meta):
             "terms",
             "owners",
             "officers",
+            "approved_on",
         ]
 
 

frontend/components/Applications.tsx

@@ -125,13 +125,14 @@ function ApplicationsPage({ whartonapplications }): ReactElement {
                           )}
                       </div>
                     </MainInfo>
-                    {application.description && application.description.length && (
-                      <DescriptionWrapper
-                        dangerouslySetInnerHTML={{
-                          __html: application.description,
-                        }}
-                      ></DescriptionWrapper>
-                    )}
+                    {application.description &&
+                      application.description.length && (
+                        <DescriptionWrapper
+                          dangerouslySetInnerHTML={{
+                            __html: application.description,
+                          }}
+                        ></DescriptionWrapper>
+                      )}
                   </Card>
                 </a>
               </Link>

frontend/components/ClubCard.tsx

@@ -97,15 +97,8 @@ type ClubCardProps = {
 }
 
 const ClubCard = ({ club, fullWidth }: ClubCardProps): ReactElement => {
-  const {
-    name,
-    active,
-    approved,
-    subtitle,
-    tags,
-    enables_subscription,
-    code,
-  } = club
+  const { name, active, approved, subtitle, tags, enables_subscription, code } =
+    club
   const img = club.image_url
   const textDescription = shorten(subtitle || 'This club has no description.')
 

frontend/components/ClubEditPage/ApplicationsCard.tsx

@@ -64,16 +64,12 @@ const ApplicationModal = (props: {
     committeeChoices,
   } = props
   // TODO: I'm positive that this is something that Formik should do for me
-  const [
-    questionType,
-    setQuestionType,
-  ] = useState<ApplicationQuestionType | null>()
-  const [multipleChoices, setMultipleChoices] = useState<
-    [{ label: string; value: string }]
-  >()
-  const [committees, setCommittees] = useState<
-    [{ label: string; value: string }]
-  >()
+  const [questionType, setQuestionType] =
+    useState<ApplicationQuestionType | null>()
+  const [multipleChoices, setMultipleChoices] =
+    useState<[{ label: string; value: string }]>()
+  const [committees, setCommittees] =
+    useState<[{ label: string; value: string }]>()
   const [committeeQuestion, setCommitteeQuestion] = useState<boolean>()
 
   const validateWordCount = (value) => {

frontend/components/ClubEditPage/ApplicationsPage.tsx

@@ -369,20 +369,16 @@ export default function ApplicationsPage({
   club: Club
 }): ReactElement {
   const [applications, setApplications] = useState<Array<Application>>([])
-  const [
-    currentApplication,
-    setCurrentApplication,
-  ] = useState<Application | null>(null)
+  const [currentApplication, setCurrentApplication] =
+    useState<Application | null>(null)
   const [submissions, setSubmissions] = useState<{
     [key: number]: Array<ApplicationSubmission>
   }>([])
   const [showModal, setShowModal] = useState<boolean>(false)
   const [showNotifModal, setShowNotifModal] = useState<boolean>(false)
   const [showReasonModal, setShowReasonModal] = useState<boolean>(false)
-  const [
-    currentSubmission,
-    setCurrentSubmission,
-  ] = useState<ApplicationSubmission | null>(null)
+  const [currentSubmission, setCurrentSubmission] =
+    useState<ApplicationSubmission | null>(null)
   const [pageIndex, setPageIndex] = useState<number>(0)
   const [statusToggle, setStatusToggle] = useState<boolean>(false)
   const [categoriesSelectAll, setCategoriesSelectAll] = useState<Array<string>>(
@@ -608,9 +604,8 @@ export default function ApplicationsPage({
                         categoriesSelectAll.includes(statusLabel)
 
                       if (deselecting) {
-                        const newCategoriesSelectAll = categoriesSelectAll.filter(
-                          (e) => e !== statusLabel,
-                        )
+                        const newCategoriesSelectAll =
+                          categoriesSelectAll.filter((e) => e !== statusLabel)
                         setCategoriesSelectAll(newCategoriesSelectAll)
                       } else {
                         const newCategoriesSelectAll = categoriesSelectAll
@@ -673,12 +668,11 @@ export default function ApplicationsPage({
                 <ScrollWrapper>
                   <TableWrapper>
                     <Table
-                      data={submissions[
-                        currentApplication.id
-                      ].map((item, index) =>
-                        item.pk
-                          ? { ...item, id: item.pk }
-                          : { ...item, id: index },
+                      data={submissions[currentApplication.id].map(
+                        (item, index) =>
+                          item.pk
+                            ? { ...item, id: item.pk }
+                            : { ...item, id: index },
                       )}
                       columns={responseTableFields}
                       searchableColumns={['name']}

frontend/components/ClubEditPage/ClubEditCard.tsx

@@ -195,29 +195,25 @@ export default function ClubEditCard({
     ),
   )
 
-  const [
-    showSchoolYearProgramming,
-    setSchoolYearProgramming,
-  ] = useState<boolean>(
-    !!(
-      club.target_majors?.length ||
-      club.target_schools?.length ||
-      club.target_years?.length ||
-      club.student_types?.length
-    ),
-  )
+  const [showSchoolYearProgramming, setSchoolYearProgramming] =
+    useState<boolean>(
+      !!(
+        club.target_majors?.length ||
+        club.target_schools?.length ||
+        club.target_years?.length ||
+        club.student_types?.length
+      ),
+    )
 
-  const [
-    showStudentTypeProgramming,
-    setStudentTypeProgramming,
-  ] = useState<boolean>(
-    !!(
-      club.target_majors?.length ||
-      club.target_schools?.length ||
-      club.target_years?.length ||
-      club.student_types?.length
-    ),
-  )
+  const [showStudentTypeProgramming, setStudentTypeProgramming] =
+    useState<boolean>(
+      !!(
+        club.target_majors?.length ||
+        club.target_schools?.length ||
+        club.target_years?.length ||
+        club.student_types?.length
+      ),
+    )
 
   const [showSchoolProgramming, setSchoolProgramming] = useState<boolean>(
     !!(
@@ -243,10 +239,10 @@ export default function ClubEditCard({
     )
 
     // sorry ts
-    const exclusives = (categorizeFilter(
+    const exclusives = categorizeFilter(
       exclusiveEntries,
       ([key]) => key.match(/^exclusive:(.+?):(.+?)$/)?.[1] ?? 'unknown',
-    ) as unknown) as {
+    ) as unknown as {
       year: Array<[string, { checked?: boolean; detail?: string }]>
       // major: Array<[string, { checked?: boolean; detail?: string }]>
       student_type: Array<[string, { checked?: boolean; detail?: string }]>
@@ -496,8 +492,7 @@ export default function ClubEditCard({
           label: 'Location',
           required: false,
           type: 'location',
-          help:
-            'Remember, this will be available to the public. Please only include information you feel comfortable sharing.',
+          help: 'Remember, this will be available to the public. Please only include information you feel comfortable sharing.',
         },
         {
           name: 'email',
@@ -865,7 +860,8 @@ export default function ClubEditCard({
                               image: FileField,
                               address: FormikAddressField,
                               checkboxText: CheckboxTextField,
-                              creatableMultiSelect: CreatableMultipleSelectField,
+                              creatableMultiSelect:
+                                CreatableMultipleSelectField,
                             }[props.type] ?? TextField
                           }
                           {...other}

frontend/components/FormComponents.tsx

@@ -16,7 +16,7 @@ import DatePicker from 'react-datepicker'
 import Select from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import styled from 'styled-components'
-import uuid from 'uuid'
+import { v4 as uuid } from 'uuid'
 
 import { DynamicQuestion } from '../types'
 import { titleize } from '../utils'

frontend/components/ModelForm.tsx

@@ -231,10 +231,8 @@ export const ModelTable = ({
  */
 export const ModelForm = (props: ModelFormProps): ReactElement => {
   const [objects, setObjects] = useState<ModelObject[]>([])
-  const [
-    currentlyEditing,
-    changeCurrentlyEditing,
-  ] = useState<ModelObject | null>(null)
+  const [currentlyEditing, changeCurrentlyEditing] =
+    useState<ModelObject | null>(null)
   const [newCount, changeNewCount] = useState<number>(0)
   const [createObject, changeCreateObject] = useState<ModelObject>(
     props.defaultObject != null

frontend/components/Submissions.tsx

@@ -120,10 +120,8 @@ function SubmissionsPage({
     formatSubmissions(initialSubmissions),
   )
   const [showModal, setShowModal] = useState<boolean>(false)
-  const [
-    currentSubmission,
-    setCurrentSubmission,
-  ] = useState<ApplicationSubmission | null>(null)
+  const [currentSubmission, setCurrentSubmission] =
+    useState<ApplicationSubmission | null>(null)
 
   const responseTableFields = [
     { label: 'Application', name: 'name' },

frontend/components/common/AuthPrompt.stories.tsx

@@ -7,9 +7,8 @@ export default {
   component: AuthPrompt,
 }
 
-export const Default: Story<
-  React.ComponentProps<typeof AuthPrompt>
-> = AuthPrompt.bind({})
+export const Default: Story<React.ComponentProps<typeof AuthPrompt>> =
+  AuthPrompt.bind({})
 
 Default.args = {
   title: undefined,

frontend/components/reports/ReportForm.tsx

@@ -47,28 +47,28 @@ type Props = {
 /**
  * Try to reconcile the JSON format for tags/badges returned by the API and the format that the field is expecting.
  */
-export const fixDeserialize = (
-  options: { id: number; label?: string; name?: string }[],
-) => (value): { id: number; label: string }[] => {
-  if (typeof value === 'string') {
-    return value
-      .trim()
-      .split(',')
-      .filter((tag) => tag.length > 0)
-      .map((tag) => {
-        const id = parseInt(tag)
-        const trueVal = options.find((oth) => oth.id === id)
-        if (trueVal != null) {
-          trueVal.label = trueVal.label ?? trueVal.name ?? 'Unknown'
-        }
-        return trueVal != null ? trueVal : { id, label: 'Unknown' }
-      }) as { id: number; label: string }[]
-  }
-  if (Array.isArray(value)) {
-    return value.map(({ id, name }) => ({ id, label: name }))
+export const fixDeserialize =
+  (options: { id: number; label?: string; name?: string }[]) =>
+  (value): { id: number; label: string }[] => {
+    if (typeof value === 'string') {
+      return value
+        .trim()
+        .split(',')
+        .filter((tag) => tag.length > 0)
+        .map((tag) => {
+          const id = parseInt(tag)
+          const trueVal = options.find((oth) => oth.id === id)
+          if (trueVal != null) {
+            trueVal.label = trueVal.label ?? trueVal.name ?? 'Unknown'
+          }
+          return trueVal != null ? trueVal : { id, label: 'Unknown' }
+        }) as { id: number; label: string }[]
+    }
+    if (Array.isArray(value)) {
+      return value.map(({ id, name }) => ({ id, label: name }))
+    }
+    return []
   }
-  return []
-}
 
 const ReportForm = ({
   fields,

frontend/next.config.js

@@ -29,7 +29,7 @@ module.exports = {
       ? process.env.DOMAIN.startsWith('http')
         ? process.env.DOMAIN
         : `https://${process.env.DOMAIN}`
-      : `http://localhost:${process.env.PORT || 3000}`,
+      : `http://127.0.0.1:${process.env.PORT || 3000}`,
     NEXT_PUBLIC_SITE_NAME: process.env.NEXT_PUBLIC_SITE_NAME || 'clubs',
     SENTRY_URL: process.env.SENTRY_URL,
   },

frontend/package.json

@@ -76,7 +76,7 @@
     "@storybook/react": "^6.1.15",
     "@types/cheerio": "^0.22.21",
     "@types/node": "^14.14.22",
-    "@types/react": "^17.0.0",
+    "@types/react": "18.0.1",
     "@types/react-select": "^4.0.11",
     "@types/showdown": "^1.9.3",
     "@types/styled-components": "^5.1.1",
@@ -103,6 +103,7 @@
     "nyc": "^15.0.0",
     "prettier": "^2.0.5",
     "typescript": "^4.1.2",
+    "uuid": "^9.0.0",
     "wait-on": "^5.2.0"
   }
 }

frontend/pages/events.tsx

@@ -355,9 +355,9 @@ const parseDateRange = (
       }
     } else {
       const max = new Date(
-        Math.max(...((range as unknown) as number[])) + 24 * 60 * 60 * 1000,
+        Math.max(...(range as unknown as number[])) + 24 * 60 * 60 * 1000,
       )
-      const min = new Date(Math.min(...((range as unknown) as number[])))
+      const min = new Date(Math.min(...(range as unknown as number[])))
       range = { start: min, end: max }
     }
   }
@@ -435,9 +435,8 @@ function EventPage({
   clubs,
   fair,
 }: EventPageProps): ReactElement {
-  const [calendarEvents, setCalendarEvents] = useState<ClubEvent[]>(
-    initialEvents,
-  )
+  const [calendarEvents, setCalendarEvents] =
+    useState<ClubEvent[]>(initialEvents)
 
   const isFair = fair != null
 
@@ -459,9 +458,8 @@ function EventPage({
     EventsViewOption.LIST,
   )
 
-  const [dateRange, setDateRange] = useState<CalendarDateRange>(
-    initialDateRange,
-  )
+  const [dateRange, setDateRange] =
+    useState<CalendarDateRange>(initialDateRange)
 
   const currentSearch = useRef<
     [SearchInput, EventsViewOption, CalendarDateRange]
@@ -884,9 +882,9 @@ EventPage.getInitialProps = async (ctx: NextPageContext) => {
       : await cache(
           'pages:events:fair',
           async () => {
-            return doApiRequest(
-              '/clubfairs/current/?format=json',
-            ).then((resp) => resp.json())
+            return doApiRequest('/clubfairs/current/?format=json').then(
+              (resp) => resp.json(),
+            )
           },
           60 * 1000,
         )
@@ -898,10 +896,9 @@ EventPage.getInitialProps = async (ctx: NextPageContext) => {
     async () => {
       const [tags, badges, clubs] = await Promise.all([
         doApiRequest('/tags/?format=json', data).then((resp) => resp.json()),
-        doApiRequest(
-          `/badges/?fair=${cachedFair?.id}&format=json`,
-          data,
-        ).then((resp) => resp.json()),
+        doApiRequest(`/badges/?fair=${cachedFair?.id}&format=json`, data).then(
+          (resp) => resp.json(),
+        ),
         doApiRequest('/clubs/directory/?format=json', data)
           .then((resp) => resp.json())
           .then((resp) => resp.filter(({ approved }) => approved)),