-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #138 from eurofurence/refactor/announcement-refact…
…roing refactor: announcement display
- Loading branch information
Showing
26 changed files
with
522 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,95 @@ | ||
import { FC } from "react"; | ||
import { StyleSheet, View } from "react-native"; | ||
import { ImageBackground } from "expo-image"; | ||
import moment, { Moment } from "moment"; | ||
import React, { FC } from "react"; | ||
import { StyleSheet, View, ViewStyle } from "react-native"; | ||
import { TouchableOpacity } from "react-native-gesture-handler"; | ||
|
||
import { colorForArea } from "./utils"; | ||
import { useThemeBackground, useThemeName } from "../../hooks/themes/useThemeHooks"; | ||
import { AnnouncementDetails } from "../../store/eurofurence/types"; | ||
import { Image } from "../generic/atoms/Image"; | ||
import { appStyles } from "../AppStyles"; | ||
import { Label } from "../generic/atoms/Label"; | ||
import { MarkdownContent } from "../generic/atoms/MarkdownContent"; | ||
import { Card } from "../generic/containers/Card"; | ||
|
||
export const AnnouncementCard: FC<{ announcement: AnnouncementDetails }> = ({ announcement }) => { | ||
export type AnnouncementDetailsInstance = { | ||
details: AnnouncementDetails; | ||
time: string; | ||
}; | ||
|
||
/** | ||
* Creates the announcement instance props for an upcoming or running announcement. | ||
* @param details The details to use. | ||
* @param now The moment to check against. | ||
*/ | ||
export function announcementInstanceForAny(details: AnnouncementDetails, now: Moment): AnnouncementDetailsInstance { | ||
return { details, time: moment.duration(moment(details.ValidFromDateTimeUtc).diff(now)).humanize(true) }; | ||
} | ||
|
||
export type AnnouncementCardProps = { | ||
containerStyle?: ViewStyle; | ||
style?: ViewStyle; | ||
announcement: AnnouncementDetailsInstance; | ||
onPress?: (announcement: AnnouncementDetails) => void; | ||
onLongPress?: (announcement: AnnouncementDetails) => void; | ||
}; | ||
|
||
export const AnnouncementCard: FC<AnnouncementCardProps> = ({ containerStyle, style, announcement, onPress, onLongPress }) => { | ||
// Dependent and independent styles. | ||
const styleContainer = useThemeBackground("background"); | ||
const saturationValue = useThemeName() === "dark" ? 0.5 : 0.7; | ||
const stylePre = useThemeBackground("primary"); | ||
const styleAreaIndicator = { backgroundColor: colorForArea(announcement.details.Area, saturationValue, 0.76) }; | ||
return ( | ||
<Card> | ||
<View style={styles.margin}> | ||
<Label type="h3">{announcement.Title}</Label> | ||
<Label type="caption"> | ||
{announcement.Area} - {announcement.Author} | ||
<TouchableOpacity | ||
containerStyle={containerStyle} | ||
style={[styles.container, appStyles.shadow, styleContainer, style]} | ||
onPress={() => onPress?.(announcement.details)} | ||
onLongPress={() => onLongPress?.(announcement.details)} | ||
> | ||
<ImageBackground style={[styles.pre, stylePre]} source={announcement.details.Image?.Url ?? null}> | ||
<View style={[styles.areaIndicator, styleAreaIndicator]} /> | ||
</ImageBackground> | ||
|
||
<View style={styles.main}> | ||
<Label style={styles.title} type="h3"> | ||
{announcement.details.NormalizedTitle} | ||
</Label> | ||
<Label style={styles.tag} type="regular" ellipsizeMode="head" numberOfLines={1}> | ||
{announcement.time} - {announcement.details.Area} | ||
</Label> | ||
</View> | ||
|
||
<MarkdownContent>{announcement.Content}</MarkdownContent> | ||
|
||
{announcement.Image && <Image source={announcement.Image.Url} style={styles.image} priority="high" />} | ||
</Card> | ||
</TouchableOpacity> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
margin: { | ||
marginBottom: 5, | ||
container: { | ||
minHeight: 80, | ||
marginVertical: 15, | ||
borderRadius: 16, | ||
overflow: "hidden", | ||
flexDirection: "row", | ||
}, | ||
pre: { | ||
overflow: "hidden", | ||
width: 70, | ||
alignItems: "center", | ||
justifyContent: "center", | ||
}, | ||
areaIndicator: { | ||
position: "absolute", | ||
top: 0, | ||
right: 0, | ||
bottom: 0, | ||
width: 5, | ||
}, | ||
main: { | ||
flex: 1, | ||
padding: 12, | ||
}, | ||
title: { | ||
flex: 1, | ||
}, | ||
image: { | ||
width: "100%", | ||
height: "auto", | ||
tag: { | ||
textAlign: "right", | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,61 @@ | ||
import { FlashList } from "@shopify/flash-list"; | ||
import { Moment } from "moment"; | ||
import { FC } from "react"; | ||
import { useTranslation } from "react-i18next"; | ||
import { FC, ReactElement } from "react"; | ||
import { StyleSheet } from "react-native"; | ||
|
||
import { AnnouncementCard } from "./AnnouncementCard"; | ||
import { useAppSelector } from "../../store"; | ||
import { selectActiveAnnouncements } from "../../store/eurofurence/selectors/announcements"; | ||
import { Label } from "../generic/atoms/Label"; | ||
import { Section } from "../generic/atoms/Section"; | ||
import { AnnouncementCard, AnnouncementDetailsInstance } from "./AnnouncementCard"; | ||
import { useThemeName } from "../../hooks/themes/useThemeHooks"; | ||
import { AnnounceListProps } from "../../routes/announce/AnnounceList"; | ||
import { useSynchronizer } from "../sync/SynchronizationProvider"; | ||
|
||
export type AnnouncementListProps = { | ||
now: Moment; | ||
navigation: AnnounceListProps["navigation"]; | ||
leader?: ReactElement; | ||
announcements: AnnouncementDetailsInstance[]; | ||
empty?: ReactElement; | ||
trailer?: ReactElement; | ||
padEnd?: boolean; | ||
}; | ||
export const AnnouncementList: FC<AnnouncementListProps> = ({ now }) => { | ||
const { t } = useTranslation("Announcements"); | ||
const announcements = useAppSelector((state) => selectActiveAnnouncements(state, now)); | ||
|
||
if (!announcements.length) { | ||
return null; | ||
} | ||
|
||
export const AnnouncementList: FC<AnnouncementListProps> = ({ navigation, leader, announcements, empty, trailer, padEnd = true }) => { | ||
const theme = useThemeName(); | ||
const synchronizer = useSynchronizer(); | ||
return ( | ||
<> | ||
<Section title={t("sectionTitle")} subtitle={t("sectionSubtitle")} icon="newspaper" /> | ||
|
||
{announcements.length === 0 ? <Label mb={15}>{t("noAnnouncements")}</Label> : announcements.map((it) => <AnnouncementCard announcement={it} key={it.Id} />)} | ||
</> | ||
<FlashList | ||
refreshing={synchronizer.isSynchronizing} | ||
onRefresh={synchronizer.synchronize} | ||
contentContainerStyle={padEnd ? styles.container : undefined} | ||
scrollEnabled={true} | ||
ListHeaderComponent={leader} | ||
ListFooterComponent={trailer} | ||
ListEmptyComponent={empty} | ||
data={announcements} | ||
keyExtractor={(item) => item.details.Id} | ||
renderItem={({ item }) => { | ||
return ( | ||
<AnnouncementCard | ||
containerStyle={styles.item} | ||
key={item.details.Id} | ||
announcement={item} | ||
onPress={(announcement) => | ||
navigation.navigate("AnnounceItem", { | ||
id: announcement.Id, | ||
}) | ||
} | ||
/> | ||
); | ||
}} | ||
estimatedItemSize={110} | ||
extraData={theme} | ||
/> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
item: { | ||
paddingHorizontal: 20, | ||
}, | ||
container: { | ||
paddingBottom: 100, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import { orderBy } from "lodash"; | ||
import { Moment } from "moment"; | ||
import React, { useMemo } from "react"; | ||
import { useTranslation } from "react-i18next"; | ||
import { StyleSheet, View } from "react-native"; | ||
|
||
import { AnnouncementCard, announcementInstanceForAny } from "./AnnouncementCard"; | ||
import { useAppNavigation } from "../../hooks/nav/useAppNavigation"; | ||
import { useAppSelector } from "../../store"; | ||
import { selectActiveAnnouncements } from "../../store/eurofurence/selectors/announcements"; | ||
import { Section } from "../generic/atoms/Section"; | ||
import { Button } from "../generic/containers/Button"; | ||
|
||
const recentLimit = 2; | ||
|
||
export type RecentAnnouncementsProps = { | ||
now: Moment; | ||
}; | ||
|
||
/** | ||
* Shows the two latest announcements and a button to open all of them, | ||
* @param now The current time. | ||
* @constructor | ||
*/ | ||
export const RecentAnnouncements = ({ now }: RecentAnnouncementsProps) => { | ||
const navigation = useAppNavigation("Areas"); | ||
const { t } = useTranslation("Home"); | ||
|
||
// Get all active announcements. | ||
const announcements = useAppSelector((state) => selectActiveAnnouncements(state, now)); | ||
|
||
// Select to the recent announcements. | ||
const recentAnnouncements = useMemo( | ||
() => | ||
orderBy(announcements, "ValidFromDateTimeUtc", "desc") | ||
.slice(0, recentLimit) | ||
.map((details) => announcementInstanceForAny(details, now)), | ||
[announcements, now], | ||
); | ||
|
||
// Skip if empty. | ||
if (recentAnnouncements.length === 0) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<> | ||
<Section title={t("recent_announcements")} subtitle={t("announcementsTitle", { count: announcements.length })} icon="newspaper" /> | ||
<View style={styles.condense}> | ||
{recentAnnouncements.map((item) => ( | ||
<AnnouncementCard | ||
key={item.details.Id} | ||
announcement={item} | ||
onPress={(announcement) => | ||
navigation.navigate("AnnounceItem", { | ||
id: announcement.Id, | ||
}) | ||
} | ||
/> | ||
))} | ||
</View> | ||
<Button style={styles.button} onPress={() => navigation.navigate("AnnounceList")} outline> | ||
{t("view_all_announcements")} | ||
</Button> | ||
</> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
condense: { | ||
marginVertical: -15, | ||
}, | ||
button: { | ||
marginTop: 20, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { colorFromHsv } from "../../util/colorFromHsv"; | ||
|
||
/** | ||
* Computes a color to display for an announcement area. | ||
* @param area Area name. | ||
* @param s Saturation to use. | ||
* @param v Value to use. | ||
*/ | ||
export const colorForArea = (area: string, s: number, v: number) => { | ||
// Hash, then xor-shift. Use as HSV index. | ||
let n = 1; | ||
for (let i = 0; i < area.length; i++) n = (n * 7 + area.charCodeAt(i)) % Number.MAX_SAFE_INTEGER; | ||
n += 0x6d2b79f5; | ||
n = Math.imul(n ^ (n >>> 15), n | 1); | ||
n ^= n + Math.imul(n ^ (n >>> 7), n | 61); | ||
n = (n ^ (n >>> 14)) >>> 0; | ||
return colorFromHsv((n % (360 / 15)) * 15, s, v); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.