Skip to content

Commit

Permalink
Merge pull request #143 from oxymore-tech/refonte-ui
Browse files Browse the repository at this point in the history 
Refonte UI
  • Loading branch information
@ThibaultKeleo
ThibaultKeleo authored Oct 9, 2024
2 parents 99b5cb1 + 095e41a commit 00a2b46
Show file tree
Hide file tree
Showing 7 changed files with 231 additions and 248 deletions.
3 changes: 3 additions & 0 deletions app/assets/icons/position-end.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/assets/icons/position-marker.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions app/src/components/base/AppIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import DirectionsWalk from "@/assets/icons/directions_walk.svg";
import History from "@/assets/icons/history.svg";
import PositionOn from "@/assets/icons/position-on.svg";
import PositionOff from "@/assets/icons/position-off.svg";
import PositionMarker from "@/assets/icons/position-marker.svg";
import PositionEnd from "@/assets/icons/position-end.svg";

import RallyingPoint from "@/assets/icons/liane_rallying_point.svg";
import Seat from "@/assets/icons/seat.svg";
import ArrowSwitch from "@/assets/icons/arrow-switch.svg";
Expand Down Expand Up @@ -79,6 +82,10 @@ export function AppIcon({ name, color = AppColorPalettes.gray[800], size = AppDi
return <ThumbUp {...props} opacity={opacity} width={size} height={size} fill={color} />;
case "thumb-down":
return <ThumbDown {...props} opacity={opacity} width={size} height={size} fill={color} />;
case "position-marker":
return <PositionMarker {...props} opacity={opacity} width={size} height={size} fill={color} />;
case "position-end":
return <PositionEnd {...props} opacity={opacity} width={size} height={size} fill={color} />;
default:
return <Icon {...props} opacity={opacity} name={name} width={size} height={size} fill={color} />;
}
Expand All @@ -95,6 +102,8 @@ const AppIconsNames = [
"history",
"position-on",
"position-off",
"position-marker",
"position-end",
"twisting-arrow",
"directions-walk",
"rallying-point",
Expand Down
253 changes: 171 additions & 82 deletions app/src/components/communities/LianeRequestItemView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,42 @@
import React, { useContext, useMemo } from "react";
import React, { useContext, useMemo, useState } from "react";

import { Pressable, StyleSheet, View } from "react-native";
import { CoLianeMatch } from "@liane/common";
import { CoLianeMatch, RallyingPointPropertiesLabels, RallyingPointRequest } from "@liane/common";
import { AppContext } from "@/components/context/ContextProvider";
import { Row } from "@/components/base/AppLayout";
import { Column, Row } from "@/components/base/AppLayout";
import { AppText } from "@/components/base/AppText";
import { AppColors } from "@/theme/colors";
import { AppColors, defaultTextColor } from "@/theme/colors";
import { JoinedLianeView } from "@/components/communities/JoinedLianeView";
import { AppLogger } from "@/api/logger";
import { extractDaysOnly, extractWaypointFromTo } from "@/util/hooks/lianeRequest";
import { DetachedLianeItem } from "@/components/communities/DetachedLianeItem.tsx";
import { useAppNavigation } from "@/components/context/routing.ts";
import { AppIcon } from "@/components/base/AppIcon.tsx";
import App from "@/App.tsx";
import { SimpleModal } from "@/components/modal/SimpleModal.tsx";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { TextField } from "@/components/forms/fields/TextField";
import { AppRoundedButton } from "@/components/base/AppRoundedButton.tsx";

type LianeRequestItemProps = {
item: CoLianeMatch;
onRefresh: (() => void) | undefined;
unreadLianes: Record<string, number>;
};
type FormValues = { name: string };

export const LianeRequestItem = ({ item, onRefresh, unreadLianes }: LianeRequestItemProps) => {
const { services } = useContext(AppContext);
const { navigation } = useAppNavigation();
const [myModalVisible, setMyModalVisible] = useState<boolean>(false);
const [showLianeNameInput, setLianeNameInputVisible] = useState<boolean>(false);

const [hasError, setError] = useState<any>();
const methods = useForm<FormValues>({
// mode: "onChange",
defaultValues: { name: "" }
});
const { setValue, watch, reset, formState, handleSubmit } = methods;

const { to, from } = useMemo(() => extractWaypointFromTo(item.lianeRequest?.wayPoints), [item.lianeRequest.wayPoints]);

Expand All @@ -44,91 +58,166 @@ export const LianeRequestItem = ({ item, onRefresh, unreadLianes }: LianeRequest
}
};

const renameLiane = async (name: string) => {
const lianeRequest = item.lianeRequest;

if (lianeRequest && lianeRequest.id) {
try {
let newLiane = lianeRequest;
newLiane.name = name;
const result = await services.community.update(lianeRequest.id, newLiane);
AppLogger.debug("COMMUNITIES", "Suppression d'une liane avec succès", result);
setLianeNameInputVisible(false);
setMyModalVisible(false);
if (onRefresh) {
onRefresh();
}
} catch (error) {
AppLogger.debug("COMMUNITIES", "Une erreur est survenue lors de la suppression d'une liane", error);
}
} else {
AppLogger.debug("COMMUNITIES", "Pas de liane ID lors de la suppression d'une liane", item);
}
};

const onSubmit: SubmitHandler<FormValues> = async data => {
try {
await renameLiane(data.name);
} catch (e) {
setError(e);
}
};

return (
<Pressable
style={{ justifyContent: "center", display: "flex", marginRight: 20 }}
onPress={() => item.state.type === "Attached" && navigation.navigate("CommunitiesChat", { liane: item.state.liane })}>
<View>
<Row style={styles.driverContainer}>
<Row>
<View style={styles.headerContainer}>
<View
style={{
backgroundColor: AppColors.backgroundColor,
paddingLeft: 10,
flex: 1,
borderRadius: 8,
borderWidth: 1,
borderColor: AppColors.grayBackground
}}>
<View style={{ position: "absolute", top: 10, right: 10 }}>
<AppIcon name={"edit-2-outline"} color={AppColors.darkGray} size={22} />
</View>
<View style={{ padding: 10 }}>
<AppText
style={{
fontSize: 22,
fontWeight: "500",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{item?.lianeRequest?.name}
</AppText>
<AppText
style={{
fontSize: 20,
fontWeight: "bold",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{`${from.city}`}
</AppText>
<AppText
style={{
fontSize: 20,
fontWeight: "bold",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{`${to.city}`}
</AppText>
<AppText
style={{
fontSize: 15,
fontWeight: "500",
flexShrink: 1,
lineHeight: 20,
color: AppColors.darkGray
}}>
{extractDaysOnly(item.lianeRequest)}
</AppText>
<View style={styles.subRowsContainer}>
{item.state.type === "Detached" && <DetachedLianeItem lianeRequest={item.lianeRequest} state={item.state} />}
<View>
<Pressable
style={{ justifyContent: "center", display: "flex", marginRight: 20 }}
onPress={() => item.state.type === "Attached" && navigation.navigate("CommunitiesChat", { liane: item.state.liane })}>
<View>
<Row style={styles.driverContainer}>
<Row>
<View style={styles.headerContainer}>
<View
style={{
backgroundColor: AppColors.backgroundColor,
paddingLeft: 10,
flex: 1,
borderRadius: 8,
borderWidth: 1,
borderColor: AppColors.grayBackground
}}>
<View style={{ padding: 10 }}>
<AppText
style={{
fontSize: 22,
fontWeight: "500",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{item?.lianeRequest?.name}
</AppText>
<AppText
style={{
fontSize: 20,
fontWeight: "bold",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{`${from.city}`}
</AppText>
<AppText
style={{
fontSize: 20,
fontWeight: "bold",
flexShrink: 1,
lineHeight: 27,
color: "black"
}}>
{`${to.city}`}
</AppText>
<AppText
style={{
fontSize: 15,
fontWeight: "500",
flexShrink: 1,
lineHeight: 20,
color: AppColors.darkGray
}}>
{extractDaysOnly(item.lianeRequest)}
</AppText>
<Pressable
style={{ position: "absolute", top: 10, right: 10 }}
onPress={event => {
setMyModalVisible(true);
}}>
<AppIcon name={"edit-2-outline"} color={AppColors.darkGray} size={22} />
</Pressable>
<View style={styles.subRowsContainer}>
{item.state.type === "Detached" && <DetachedLianeItem lianeRequest={item.lianeRequest} state={item.state} />}

{item.state.type === "Pending" && (
<Row style={styles.subRow}>
<AppText style={{ fontSize: 14, fontWeight: "bold", lineHeight: 23, color: AppColors.black }}>
en attente de validation
</AppText>
</Row>
)}
{item.state.type === "Pending" && (
<Row style={styles.subRow}>
<AppText style={{ fontSize: 14, fontWeight: "bold", lineHeight: 23, color: AppColors.black }}>
en attente de validation
</AppText>
</Row>
)}

{item.state.type === "Attached" && (
<Row style={styles.subRow}>
<JoinedLianeView liane={item.state.liane} />
</Row>
)}
{item.state.type === "Attached" && (
<Row style={styles.subRow}>
<JoinedLianeView liane={item.state.liane} />
</Row>
)}
</View>
</View>
</View>
</View>
</View>
</Row>
</Row>
</Row>
</View>
</Pressable>
</View>
</Pressable>
<SimpleModal visible={myModalVisible} setVisible={setMyModalVisible} backgroundColor={AppColors.white} hideClose>
{!showLianeNameInput ? (
<Column>
<Pressable style={{ margin: 16, flexDirection: "row" }} onPress={() => setLianeNameInputVisible(true)}>
<AppText style={{ marginLeft: 5, fontSize: 16, fontWeight: "bold", lineHeight: 24, color: AppColors.darkGray }}>
Renommer la liane
</AppText>
</Pressable>
<Pressable style={{ margin: 16, flexDirection: "row" }} onPress={() => setMyModalVisible(false)}>
<AppText style={{ marginLeft: 5, fontSize: 16, fontWeight: "bold", lineHeight: 24, color: AppColors.darkGray }}>
Modifier la liane
</AppText>
</Pressable>
<Pressable style={{ margin: 16, flexDirection: "row" }} onPress={deleteLiane}>
<AppText style={{ marginLeft: 5, fontSize: 16, fontWeight: "bold", lineHeight: 24, color: AppColors.darkGray }}>
Quitter la liane
</AppText>
</Pressable>
</Column>
) : (
<Column>
<FormProvider {...methods}>
<View>
<TextField name="name" label={"Nom de la liane"} />
</View>

<View>
<AppRoundedButton
enabled={formState.isValid}
color={defaultTextColor(AppColors.primaryColor)}
onPress={handleSubmit(onSubmit, setError)}
backgroundColor={AppColors.primaryColor}
text={"Envoyer"}
/>
</View>
</FormProvider>
</Column>
)}
</SimpleModal>
</View>
);
};

Expand Down
10 changes: 5 additions & 5 deletions app/src/components/communities/displayDaysView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const DisplayDays = ({ days }: DisplayDaysProps) => {
<AppText
style={{
fontWeight: "400",
fontSize: 20,
fontSize: 18,
lineHeight: 27,
color: AppColors.white
}}>{`${DaysOfWeek[position]}`}</AppText>
Expand All @@ -57,17 +57,17 @@ const styles = StyleSheet.create({
daySelected: {
backgroundColor: AppColors.primaryColor,
borderRadius: 90,
height: 45,
width: 45,
height: 40,
width: 40,
alignItems: "center",
justifyContent: "center",
marginHorizontal: 3
},
dayNotSelected: {
backgroundColor: AppColors.grayBackground,
borderRadius: 90,
height: 45,
width: 45,
height: 40,
width: 40,
alignItems: "center",
justifyContent: "center",
marginHorizontal: 3
Expand Down
Loading

0 comments on commit 00a2b46

Please sign in to comment.