From c6e1fd7e29c6b6adc942abdec1435bfc77d6b824 Mon Sep 17 00:00:00 2001 From: tony-tvu Date: Mon, 9 May 2022 13:44:56 -0500 Subject: [PATCH 1/3] convert file to typescript --- ...st.js => UserCalendarSubscriptionList.tsx} | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) rename web/src/app/users/{UserCalendarSubscriptionList.js => UserCalendarSubscriptionList.tsx} (77%) diff --git a/web/src/app/users/UserCalendarSubscriptionList.js b/web/src/app/users/UserCalendarSubscriptionList.tsx similarity index 77% rename from web/src/app/users/UserCalendarSubscriptionList.js rename to web/src/app/users/UserCalendarSubscriptionList.tsx index 14f2c8a287..2b3806c0de 100644 --- a/web/src/app/users/UserCalendarSubscriptionList.js +++ b/web/src/app/users/UserCalendarSubscriptionList.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react' +/* eslint-disable @typescript-eslint/no-non-null-assertion */ +import React, { ReactElement, useState } from 'react' import { useQuery, gql } from '@apollo/client' -import p from 'prop-types' import { useParams } from 'react-router-dom' import { Card, Alert } from '@mui/material' import FlatList from '../lists/FlatList' @@ -16,6 +16,7 @@ import Spinner from '../loading/components/Spinner' import { formatTimeSince } from '../util/timeFormat' import { useConfigValue } from '../util/RequireConfig' import AppLink from '../util/AppLink' +import { UserCalendarSubscription } from '../../schema' export const calendarSubscriptionsQuery = gql` query calendarSubscriptions($id: ID!) { @@ -36,15 +37,21 @@ export const calendarSubscriptionsQuery = gql` } ` -export default function UserCalendarSubscriptionList(props) { +export default function UserCalendarSubscriptionList(props: { + userID: string +}): JSX.Element { const { userID: _userID } = useParams() const userID = props.userID || _userID const [creationDisabled] = useConfigValue( 'General.DisableCalendarSubscriptions', ) const [showCreateDialog, setShowCreateDialog] = useState(false) - const [showEditDialogByID, setShowEditDialogByID] = useState(null) - const [showDeleteDialogByID, setShowDeleteDialogByID] = useState(null) + const [showEditDialogByID, setShowEditDialogByID] = useState( + null, + ) + const [showDeleteDialogByID, setShowDeleteDialogByID] = useState< + string | null + >(null) const { data, loading, error } = useQuery(calendarSubscriptionsQuery, { variables: { @@ -56,18 +63,21 @@ export default function UserCalendarSubscriptionList(props) { if (!_.get(data, 'user.id')) return loading ? : // sort by schedule names, then subscription names - const subs = data.user.calendarSubscriptions.slice().sort((a, b) => { - if (a.schedule.name < b.schedule.name) return -1 - if (a.schedule.name > b.schedule.name) return 1 + const subs: UserCalendarSubscription[] = data.user.calendarSubscriptions + .slice() + .sort((a: UserCalendarSubscription, b: UserCalendarSubscription) => { + if (a.schedule!.name < b.schedule!.name) return -1 + if (a.schedule!.name > b.schedule!.name) return 1 - if (a.name > b.name) return 1 - if (a.name < b.name) return -1 - }) + if (a.name > b.name) return 1 + if (a.name < b.name) return -1 + }) - const subheaderDict = {} - const items = [] + const subheaderDict: { [key: string]: boolean } = {} + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const items: any = [] - function renderOtherActions(id) { + function renderOtherActions(id: string): ReactElement { return ( { - if (!subheaderDict[sub.schedule.name]) { - subheaderDict[sub.schedule.name] = true + subs.forEach((sub: UserCalendarSubscription) => { + if (!subheaderDict[sub.schedule!.name]) { + subheaderDict[sub.schedule!.name] = true items.push({ subHeader: ( - {sub.schedule.name} + {sub.schedule?.name} ), }) @@ -152,7 +162,3 @@ export default function UserCalendarSubscriptionList(props) { ) } - -UserCalendarSubscriptionList.propTypes = { - userID: p.string, -} From bd403bbe77b6420d292e78de466f54828bfa90d1 Mon Sep 17 00:00:00 2001 From: tony-tvu Date: Tue, 10 May 2022 10:33:00 -0500 Subject: [PATCH 2/3] refactor and remove eslint comments --- web/src/app/lists/FlatList.tsx | 2 +- web/src/app/users/UserCalendarSubscriptionList.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/web/src/app/lists/FlatList.tsx b/web/src/app/lists/FlatList.tsx index 95c46f6290..a8fb3a909f 100644 --- a/web/src/app/lists/FlatList.tsx +++ b/web/src/app/lists/FlatList.tsx @@ -82,7 +82,7 @@ const useStyles = makeStyles((theme: Theme) => ({ export interface FlatListSub { id?: string - subHeader: string + subHeader: JSX.Element | string } export interface FlatListNotice extends Notice { diff --git a/web/src/app/users/UserCalendarSubscriptionList.tsx b/web/src/app/users/UserCalendarSubscriptionList.tsx index 2b3806c0de..421ff518aa 100644 --- a/web/src/app/users/UserCalendarSubscriptionList.tsx +++ b/web/src/app/users/UserCalendarSubscriptionList.tsx @@ -1,9 +1,8 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import React, { ReactElement, useState } from 'react' import { useQuery, gql } from '@apollo/client' import { useParams } from 'react-router-dom' import { Card, Alert } from '@mui/material' -import FlatList from '../lists/FlatList' +import FlatList, { FlatListListItem } from '../lists/FlatList' import OtherActions from '../util/OtherActions' import CreateFAB from '../lists/CreateFAB' import CalendarSubscribeCreateDialog from '../schedules/calendar-subscribe/CalendarSubscribeCreateDialog' @@ -66,16 +65,15 @@ export default function UserCalendarSubscriptionList(props: { const subs: UserCalendarSubscription[] = data.user.calendarSubscriptions .slice() .sort((a: UserCalendarSubscription, b: UserCalendarSubscription) => { - if (a.schedule!.name < b.schedule!.name) return -1 - if (a.schedule!.name > b.schedule!.name) return 1 + if ((a?.schedule?.name ?? '') < (b?.schedule?.name ?? '')) return -1 + if ((a?.schedule?.name ?? '') > (b?.schedule?.name ?? '')) return 1 if (a.name > b.name) return 1 if (a.name < b.name) return -1 }) const subheaderDict: { [key: string]: boolean } = {} - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const items: any = [] + const items: FlatListListItem[] = [] function renderOtherActions(id: string): ReactElement { return ( @@ -96,8 +94,8 @@ export default function UserCalendarSubscriptionList(props: { // push schedule names as subheaders now that the array is sorted subs.forEach((sub: UserCalendarSubscription) => { - if (!subheaderDict[sub.schedule!.name]) { - subheaderDict[sub.schedule!.name] = true + if (!subheaderDict[sub?.schedule?.name ?? '']) { + subheaderDict[sub?.schedule?.name ?? ''] = true items.push({ subHeader: ( From bcd554737a691cfb46950936e7b3e39197c58a95 Mon Sep 17 00:00:00 2001 From: tony-tvu Date: Wed, 11 May 2022 16:29:55 -0500 Subject: [PATCH 3/3] change return type --- web/src/app/users/UserCalendarSubscriptionList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/app/users/UserCalendarSubscriptionList.tsx b/web/src/app/users/UserCalendarSubscriptionList.tsx index 421ff518aa..bf895f7c35 100644 --- a/web/src/app/users/UserCalendarSubscriptionList.tsx +++ b/web/src/app/users/UserCalendarSubscriptionList.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState } from 'react' +import React, { useState } from 'react' import { useQuery, gql } from '@apollo/client' import { useParams } from 'react-router-dom' import { Card, Alert } from '@mui/material' @@ -75,7 +75,7 @@ export default function UserCalendarSubscriptionList(props: { const subheaderDict: { [key: string]: boolean } = {} const items: FlatListListItem[] = [] - function renderOtherActions(id: string): ReactElement { + function renderOtherActions(id: string): JSX.Element { return (