Skip to content

Commit

Permalink
perf(dashboard): improve card visibility logic and update state manag…
Browse files Browse the repository at this point in the history 
…ement
  • Loading branch information
@Robert27
Robert27 committed Oct 22, 2024
1 parent 616df20 commit e6fbd79
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 50 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
44 changes: 22 additions & 22 deletions src/app/(screens)/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function DashboardEdit(): JSX.Element {
const { t } = useTranslation(['settings'])
const [draggedId, setDraggedId] = useState<number | null>(null)
const [hasUserDefaultOrder, setHasUserDefaultOrder] = useState(true)
const [defaultHiddenKeys, setDefaultHiddenKeys] = useState<string[]>([])
const [unavailableCards, setUnavailableCards] = useState<Card[]>([])
const [filteredHiddenDashboardEntries, setFilteredHiddenDashboardEntries] =
useState<Card[]>([])

Expand Down Expand Up @@ -81,11 +81,7 @@ export default function DashboardEdit(): JSX.Element {

useEffect(() => {
setFilteredHiddenDashboardEntries(
hiddenDashboardEntries?.filter(
(item) =>
item?.exclusive !== true ||
item.default.includes(userKind ?? 'guest')
)
hiddenDashboardEntries.concat(unavailableCards)
)
}, [hiddenDashboardEntries, userKind])

Expand All @@ -94,8 +90,6 @@ export default function DashboardEdit(): JSX.Element {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
hideDashboardEntry(params.key)
}
// To call this worklet from React (e.g., in an event handler or useEffect)

const isLast =
shownDashboardEntries?.[shownDashboardEntries.length - 1].key ===
params.key
Expand Down Expand Up @@ -132,11 +126,9 @@ export default function DashboardEdit(): JSX.Element {
}, [resetOrder])

useEffect(() => {
const defaultHidden = getDefaultDashboardOrder(userKind).hidden.map(
(item) => item
)
const defaultShown =
getDefaultDashboardOrder(userKind).shown?.map((item) => item) ?? []
const { hidden, shown } = getDefaultDashboardOrder(userKind)
const defaultHidden = hidden.map((item) => item)
const defaultShown = shown.map((item) => item)

if (shownDashboardEntries == null) {
return
Expand All @@ -157,10 +149,22 @@ export default function DashboardEdit(): JSX.Element {
.map((item) => item.key) || []
)
)

setDefaultHiddenKeys(defaultHidden)
}, [shownDashboardEntries, hiddenDashboardEntries, userKind])
console.info(filteredHiddenDashboardEntries)

useEffect(() => {
const keys = getDefaultDashboardOrder(userKind).unavailable
const cards = keys.map((key) => {
return {
key,
removable: false,
initial: [],
allowed: [],
card: () => <></>,
}
})
setUnavailableCards(cards)
}, [userKind])

return (
<View>
<ScrollView
Expand Down Expand Up @@ -339,9 +343,7 @@ export default function DashboardEdit(): JSX.Element {
return (
<React.Fragment key={index}>
<Pressable
disabled={defaultHiddenKeys.includes(
item.key
)}
disabled={!item.removable}
onPress={() => {
handleRestore(item)
}}
Expand Down Expand Up @@ -397,9 +399,7 @@ export default function DashboardEdit(): JSX.Element {
{ ns: 'navigation' }
)}
</Text>
{defaultHiddenKeys.includes(
item.key
) ? (
{!item.removable ? (
<PlatformIcon
color={
colors.labelColor
Expand Down
36 changes: 23 additions & 13 deletions src/components/allCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,68 +16,78 @@ export const AllCards: Card[] = [
{
key: 'timetable',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE],
initial: [USER_STUDENT, USER_EMPLOYEE],
allowed: [USER_STUDENT, USER_EMPLOYEE],
card: () => <TimetableCard />,
},

{
key: 'calendar',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
initial: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
allowed: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
card: () => <CalendarCard />,
},

{
key: 'events',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
initial: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
allowed: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
card: () => <EventsCard />,
},
{
key: 'food',
removable: true,
default: [USER_GUEST, USER_STUDENT, USER_EMPLOYEE],
initial: [USER_GUEST],
allowed: [USER_GUEST, USER_STUDENT, USER_EMPLOYEE],
card: () => <FoodCard />,
},
{
key: 'library',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE],
initial: [USER_STUDENT, USER_EMPLOYEE],
allowed: [USER_STUDENT, USER_EMPLOYEE],
card: () => <LibraryCard />,
},
{
key: 'links',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
initial: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
allowed: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
card: () => <LinkCard />,
},
{
key: 'news',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE],
initial: [USER_STUDENT, USER_EMPLOYEE],
allowed: [USER_STUDENT, USER_EMPLOYEE],
card: () => <BaseCard title="news" onPressRoute="news" />,
},
{
key: 'lecturers',
removable: true,
default: [USER_STUDENT, USER_EMPLOYEE],
initial: [USER_STUDENT, USER_EMPLOYEE],
allowed: [USER_STUDENT, USER_EMPLOYEE],
card: () => <BaseCard title="lecturers" onPressRoute="lecturers" />,
},

{
key: 'login',
removable: false,
exclusive: true,
default: [USER_GUEST],
initial: [USER_GUEST],
stillVisible: false,
allowed: [USER_GUEST],
card: () => <LoginCard />,
},
]

export interface Card {
key: string
removable: boolean
exclusive?: boolean
default: string[]
removable: boolean // can the card be removed
stillVisible?: boolean // is the card visible to not allowed users
initial: string[] // for which user kind is the card shown by default
allowed: string[] // for which user kind is the card allowed
card: () => JSX.Element
}

Expand Down
48 changes: 33 additions & 15 deletions src/contexts/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,34 @@ import { useMMKVObject } from 'react-native-mmkv'

import { useUserKind } from './userKind'

export function getDefaultDashboardOrder(userKind: string | undefined): {
interface DashboardOrder {
shown: string[]
hidden: string[]
} {
const filter = (x: Card): boolean => x.default.includes(userKind ?? 'guest')
return {
shown: AllCards.filter(filter).map((card) => card.key),
hidden: AllCards.filter((x) => !filter(x)).map((card) => card.key),
}
unavailable: string[]
}

export function getDefaultDashboardOrder(
userKind: string | undefined
): DashboardOrder {
const userRole = userKind ?? USER_GUEST

const shown: string[] = [] // default visible cards
const hidden: string[] = [] // default hidden cards
const unavailable: string[] = [] // cards that are not available for the user and not secret

AllCards.forEach((card) => {
if (card.allowed.includes(userRole)) {
if (card.initial.includes(userRole)) {
shown.push(card.key)
} else {
hidden.push(card.key)
}
} else if (card.stillVisible ?? true) {
unavailable.push(card.key)
}
})

return { shown, hidden, unavailable }
}

export interface Dashboard {
Expand All @@ -30,10 +49,10 @@ export interface Dashboard {
export function useDashboard(): Dashboard {
const [shownDashboardEntries, setShownDashboardEntries] = useMMKVObject<
string[]
>('shownDashboardEnetsriessss')
>('shownDashboardEnetsriesV4')
const [hiddenDashboardEntries, setHiddenDashboardEntries] = useMMKVObject<
string[]
>('hiddenDashboardEnetsriessss')
>('hiddenDashboardEnetsriesV4')
const [hiddenAnnouncements, setHiddenAnnouncements] = useMMKVObject<
string[]
>('hiddenAnnouncements')
Expand Down Expand Up @@ -121,11 +140,11 @@ export function useDashboard(): Dashboard {
const bringBackDashboardEntry = useCallback(
(key: string) => {
setShownDashboardEntries((prevEntries) => {
if (prevEntries == null) {
throw new Error('prevEntries is null')
}
const entries = [...prevEntries]
const hiddenEntries = [...(hiddenDashboardEntries ?? [])]
// using defaultEntries if the user has not configured the dashboard yet
const entries = [...(prevEntries ?? defaultEntries.shown)]
const hiddenEntries = [
...(hiddenDashboardEntries ?? defaultEntries.hidden),
]

const index = hiddenEntries.findIndex(
(x) => x !== undefined && x === key
Expand All @@ -135,7 +154,6 @@ export function useDashboard(): Dashboard {
entries.push(shownCard)
hiddenEntries.splice(index, 1)
}

changeDashboardOrder(entries, hiddenEntries)
return entries
})
Expand Down

0 comments on commit e6fbd79

Please sign in to comment.