diff --git a/src/components/Base.tsx b/src/components/Base.tsx index a5730c126..2d650deb3 100644 --- a/src/components/Base.tsx +++ b/src/components/Base.tsx @@ -34,15 +34,17 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader = {children} {rightNav && ( - - + + {rightNav} )} @@ -94,15 +96,16 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader = {rightNav && ( - - + + {rightNav} )} diff --git a/src/components/accueil/LastActivities.tsx b/src/components/accueil/LastActivities.tsx new file mode 100644 index 000000000..f62ca7dcd --- /dev/null +++ b/src/components/accueil/LastActivities.tsx @@ -0,0 +1,69 @@ +import React from 'react'; + +import { Button } from '@mui/material'; + +import { CommentIcon } from '../activities/ActivityCard/CommentIcon'; +import { icons, DESC } from 'src/components/activities/utils'; +import { useActivities } from 'src/services/useActivities'; +import { primaryColor } from 'src/styles/variables.const'; +import { toDate } from 'src/utils'; +import { ActivityType } from 'types/activity.type'; +import type { User } from 'types/user.type'; + +interface Props { + title: string; + activityUser: User; +} + +export const LastActivities: React.FC = ({ title, activityUser }) => { + const { activities } = useActivities({ + limit: 200, + page: 0, + type: [], + userId: activityUser?.id ?? 0, + }); + + return ( +
+

+ {title} +

+ {activities.slice(0, 3).map((activity, index) => { + const ActivityIcon = icons[activity.type] || null; + return ( +
+ {activity.type !== ActivityType.GAME && ( + <> +
+ {DESC[activity.type]},  + le {toDate(activity.createDate as string)} + {ActivityIcon && ( + + )} +
+
+ + +
+ + )} +
+ ); + })} +
+ ); +}; diff --git a/src/components/accueil/RightNavigation.tsx b/src/components/accueil/RightNavigation.tsx index af9364389..c65901353 100644 --- a/src/components/accueil/RightNavigation.tsx +++ b/src/components/accueil/RightNavigation.tsx @@ -1,44 +1,61 @@ import Image from 'next/image'; import { useRouter } from 'next/router'; +import type { ReactNode } from 'react'; import React from 'react'; -import { Button, Link, Tooltip } from '@mui/material'; +import { Box, Button, Link, Tooltip } from '@mui/material'; import { AvatarImg } from '../Avatar'; import { Flag } from '../Flag'; -import { CommentIcon } from '../activities/ActivityCard/CommentIcon'; +import { LastActivities } from './LastActivities'; import { isMascotte } from 'src/activity-types/anyActivity'; import { useWeather } from 'src/api/weather/weather.get'; import { Map } from 'src/components/Map'; -import { icons, DESC } from 'src/components/activities/utils'; import { UserContext } from 'src/contexts/userContext'; -import { useActivities } from 'src/services/useActivities'; import { useActivity } from 'src/services/useActivity'; -import { primaryColor } from 'src/styles/variables.const'; -import { getUserDisplayName, toDate } from 'src/utils'; -import { ActivityType } from 'types/activity.type'; +import { getUserDisplayName } from 'src/utils'; import type { User } from 'types/user.type'; import { UserType } from 'types/user.type'; +interface LayoutProps { + children: ReactNode; +} + +const Layout: React.FC = ({ children }) => ( + + {children} + +); + export const RightNavigation = ({ activityUser, displayAsUser = false }: { activityUser: User; displayAsUser?: boolean }) => { const router = useRouter(); const [localTime, setLocalTime] = React.useState(null); const { user } = React.useContext(UserContext); const { data: weather } = useWeather({ latitude: activityUser.position.lat, longitude: activityUser.position.lng }); const { activity: userMascotte } = useActivity(activityUser.mascotteId || -1); - const { activities } = useActivities({ - limit: 200, - page: 0, - type: [], - userId: activityUser?.id ?? 0, - }); + const isPelico = activityUser.type < UserType.TEACHER; const isMediator = user !== null && user.type <= UserType.MEDIATOR; + const formatPseudo = activityUser.pseudo.replace(' ', '-'); const onclick = React.useCallback(() => { router.push(`/activite/${activityUser.mascotteId}`); }, [activityUser.mascotteId, router]); - const formatPseudo = activityUser.pseudo.replace(' ', '-'); + // ---- Get user weather and time ---- React.useEffect(() => { if (weather) { @@ -60,7 +77,32 @@ export const RightNavigation = ({ activityUser, displayAsUser = false }: { activ if (isPelico) { return ( - <> + + +
+ + + + + Pelico + +
+ + + + ); + } + + return ( + + ({ + [theme.breakpoints.only('sm')]: { + marginRight: '20px', + flexBasis: '60%', + }, + })} + >
- -
- - - - - Pelico +
+ + {activityUser.avatar && activityUser.mascotteId ? ( + + ) : ( + + + + + + )} + + {userMascotte && isMascotte(userMascotte) ? ( + + {userMascotte.data.mascotteName} -
- -
-
-

- Dernières activités de Pelico -

- {activities.slice(0, 3).map((activity, index) => { - const ActivityIcon = icons[activity.type] || null; - return ( -
- {activity.type !== ActivityType.GAME && ( - <> -
- {DESC[activity.type]},  - le {toDate(activity.createDate as string)} - {ActivityIcon && ( - - )} -
-
- - -
- - )} -
- ); - })} -
- - ); - } - return ( - <> - {/* MASCOTTE + drapeau à garder */} -
-
- - {activityUser.avatar && activityUser.mascotteId ? ( - ) : ( - - - - - + + {getUserDisplayName(activityUser, user !== null && user.id === activityUser.id)} + )} +
+ + - {userMascotte && isMascotte(userMascotte) ? ( - - {userMascotte.data.mascotteName} - - ) : ( - - {getUserDisplayName(activityUser, user !== null && user.id === activityUser.id)} - - )}
- - - -
- {/* MASCOTTE + drapeau à garder */} - {/* BOUTON PROF */} - {isMediator && ( - - )} - {/* BOUTON PROF */} + {isMediator && ( + + + + )} - {/* MAP / METEO */} -
-
- -
-
- {weather !== null && ( -
-
- {activityUser.city} +
+
+
- {localTime} - {weather && ( - <> - - {weather.temperature}°C - - )}
- )} - {/* MAP / METEO */} + - {/* LAST ACTIVITIES */} -
({ + [theme.breakpoints.only('sm')]: { + flexBasis: '40%', + }, + })} > -

- Dernières activités -

- {activities.slice(0, 3).map((activity, index) => { - const ActivityIcon = icons[activity.type] || null; - return ( -
- {activity.type !== ActivityType.GAME && ( - <> -
- {DESC[activity.type]},  - le {toDate(activity.createDate as string)} - {ActivityIcon && ( - - )} -
-
- - -
- - )} + {weather !== null && ( +
+
+ {activityUser.city}
- ); - })} -
- {/* LAST ACTIVITIES */} - + {localTime} + {weather && ( + <> + + {weather.temperature}°C + + )} +
+ )} + + + ); };