Unverified Commit 5346a09e authored by benguedj's avatar benguedj Committed by GitHub
Browse files

fix: 🐛 Corrige les retours design sur les événements (#706)



 Closes: #524, #35
Co-authored-by: default avatarBenjamin Guedj <benjaminguedj@hotmail.fr>
parent e501d507
......@@ -2,7 +2,7 @@ import type { FC } from "react";
import * as React from "react";
import { StyleSheet } from "react-native";
import { FontWeight, Margins, Sizes } from "../../constants";
import { FontWeight, Margins, Paddings, Sizes } from "../../constants";
import type { Tag } from "../../types";
import { SecondaryText } from "../StyledText";
import { View } from "../Themed";
......@@ -40,14 +40,15 @@ const styles = StyleSheet.create({
backgroundColor: "transparent",
},
tag: {
fontSize: Sizes.sm,
fontSize: Sizes.xs,
fontWeight: FontWeight.bold,
},
tagContainer: {
borderRadius: Sizes.xxxxxs,
marginBottom: Margins.smallest,
marginRight: Margins.smaller,
padding: Margins.smaller,
paddingHorizontal: Paddings.smaller,
paddingVertical: Paddings.smallest,
},
});
......
......@@ -23,6 +23,7 @@ import type { Article, Event, Tag } from "../../types";
import { StorageUtils, TrackerUtils } from "../../utils";
import * as RootNavigation from "../../utils/rootNavigation.util";
import { getThematiqueIcon } from "../../utils/thematique.util";
import { Loader } from "..";
import ArticleCard from "../article/articleCard.component";
import Button from "../base/button.component";
import ErrorMessage from "../base/errorMessage.component";
......@@ -32,11 +33,12 @@ import { CommonText, SecondaryText } from "../StyledText";
interface Props {
event: Event;
showEventDetails: boolean;
isExpanded: boolean;
onPressed: (eventId: string) => void;
}
const dotIconSize = Sizes.xxxs;
const EventCard: FC<Props> = ({ event, showEventDetails }) => {
const EventCard: FC<Props> = ({ event, isExpanded, onPressed }) => {
const { trackScreenView } = useMatomo();
const [articles, setArticles] = React.useState<Article[]>([]);
const MAX_ARTICLES = 10;
......@@ -60,14 +62,6 @@ const EventCard: FC<Props> = ({ event, showEventDetails }) => {
return tags;
};
const navigateToEventDetails = () => {
if (!showEventDetails) {
RootNavigation.navigate("eventDetails", {
eventId: event.id.toString(),
});
}
};
const updateCartoFilterStorage = () => {
const cartoFilterStorage: CartoFilterStorage = {
etapes: _.map(event.etapes, "nom"),
......@@ -100,7 +94,7 @@ const EventCard: FC<Props> = ({ event, showEventDetails }) => {
return condition;
};
const [loadArticles, { loading, error, data, called }] = useLazyQuery(
const [loadArticles, { loading, error, data }] = useLazyQuery(
GET_EVENT_ARTICLES(buildWhereCondition(), MAX_ARTICLES),
{
variables: {
......@@ -111,10 +105,8 @@ const EventCard: FC<Props> = ({ event, showEventDetails }) => {
);
useEffect(() => {
if (showEventDetails && !called) {
loadArticles();
}
}, []);
if (isExpanded) loadArticles();
}, [isExpanded]);
useEffect(() => {
if (!loading && data) {
......@@ -131,7 +123,9 @@ const EventCard: FC<Props> = ({ event, showEventDetails }) => {
key={event.id}
pad={0}
containerStyle={styles.listItemContainer}
onPress={showEventDetails ? undefined : navigateToEventDetails}
onPress={() => {
onPressed(event.id.toString());
}}
>
<View style={styles.eventContainer}>
<View style={styles.eventIconContainer}>
......@@ -157,28 +151,35 @@ const EventCard: FC<Props> = ({ event, showEventDetails }) => {
</View>
</ListItem>
{showEventDetails && (
{isExpanded && (
<View style={styles.eventDetailsContainer}>
<View style={styles.linkCarto}>
<Button
rounded={true}
title={Labels.event.seeOnTheMap}
titleStyle={{ textTransform: "uppercase" }}
onPressIn={seeOnTheMap}
titleStyle={{
textTransform: "uppercase",
}}
buttonStyle={{ alignSelf: "center" }}
action={seeOnTheMap}
/>
</View>
{articles.length > 0 && (
<View style={styles.listArticles}>
<CommonText style={styles.listArticlesTitle}>
{Labels.event.matchingArticles} :
</CommonText>
{articles.map((article, index) => (
<View key={index}>
<ArticleCard article={article} />
</View>
))}
</View>
{loading ? (
<Loader />
) : (
articles.length > 0 && (
<View style={styles.listArticles}>
<CommonText style={styles.listArticlesTitle}>
{Labels.event.matchingArticles} :
</CommonText>
{articles.map((article, index) => (
<View key={index}>
<ArticleCard article={article} />
</View>
))}
</View>
)
)}
</View>
)}
......
......@@ -28,8 +28,11 @@ interface Props {
showEventDetails: boolean;
}
const dotIconSize = Sizes.xxxs;
const Events: FC<Props> = ({ evenements, childBirthday, showEventDetails }) => {
const Events: FC<Props> = ({ evenements, childBirthday }) => {
let closestEventHasBeenFound = false;
const [eventIdPressed, setEventIdPressed] = React.useState<string | null>(
null
);
const today = new Date().setUTCHours(0, 0, 0, 0);
......@@ -63,12 +66,29 @@ const Events: FC<Props> = ({ evenements, childBirthday, showEventDetails }) => {
else return format(new Date(date), Formats.dateEvent, { locale: fr });
};
const eventCardPressed = (eventId: string) => {
setEventIdPressed(eventId);
};
const scrollViewRef = React.useRef<ScrollView>(null);
const scrollTo = (positionY: number) => {
scrollViewRef.current?.scrollTo({
animated: true,
y: positionY,
});
const scrollToEvent = (event: Event, layoutEvent: LayoutChangeEvent) => {
let posY: number | null = null;
if (eventIdPressed) {
if (eventIdPressed === event.id.toString()) {
posY = layoutEvent.nativeEvent.layout.y;
}
} else {
if (event.isClosestEvent) {
posY = layoutEvent.nativeEvent.layout.y;
}
}
if (posY) {
scrollViewRef.current?.scrollTo({
animated: true,
y: posY,
});
}
};
return (
......@@ -79,10 +99,7 @@ const Events: FC<Props> = ({ evenements, childBirthday, showEventDetails }) => {
key={index}
onLayout={(layoutEvent: LayoutChangeEvent) => {
const event = formattedEvents[date][0];
if (event.isClosestEvent) {
const { layout } = layoutEvent.nativeEvent;
scrollTo(layout.y);
}
scrollToEvent(event, layoutEvent);
}}
>
<View style={styles.dateTagContainer}>
......@@ -100,7 +117,11 @@ const Events: FC<Props> = ({ evenements, childBirthday, showEventDetails }) => {
</View>
{formattedEvents[date].map((event, indexEvents) => (
<View key={indexEvents}>
<EventCard event={event} showEventDetails={showEventDetails} />
<EventCard
event={event}
onPressed={eventCardPressed}
isExpanded={eventIdPressed === event.id.toString()}
/>
</View>
))}
</View>
......@@ -118,6 +139,7 @@ const styles = StyleSheet.create({
overflow: "hidden",
paddingHorizontal: Paddings.default,
paddingVertical: Paddings.smaller,
textTransform: "capitalize",
},
dateTagContainer: {
flexDirection: "row",
......
......@@ -252,6 +252,8 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
<View>
<Button
title={Labels.calendar.synchronise}
titleStyle={styles.buttonTitle}
buttonStyle={{ alignSelf: "center" }}
rounded={true}
action={syncEventsWithOsCalendar}
/>
......@@ -291,6 +293,10 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
};
const styles = StyleSheet.create({
buttonTitle: {
fontSize: Sizes.md,
textTransform: "uppercase",
},
calendarContainer: {
flex: 1,
marginTop: Paddings.default,
......
......@@ -196,11 +196,7 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
duration={1000}
delay={0}
>
<ArticleCard
article={article}
step={route.params.step}
index={index}
/>
<ArticleCard article={article} step={route.params.step} />
</Animatable.View>
))}
</View>
......
......@@ -90,6 +90,7 @@ export type Event = {
fin: number;
thematique?: Thematique;
etapes?: Step[];
isClosestEvent?: boolean;
};
export type AgendaItems<TEvent> = Record<string, TEvent[]>;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment