lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make map 100% width on message

Browse Source 
Took 4 minutes
This commit is contained in:
Lucàs
2023-05-21 16:50:59 +02:00
parent b59a871182
commit bb92a9525b
4 changed files with 16 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/ChatListItem.tsx
+2 -4
View File
@@ -1,5 +1,5 @@
import {Chat, User} from '@prisma/client'; import {Chat, User} from '@prisma/client';
import {Box, Button, Flex, Image, Text} from '@chakra-ui/react'; import {Avatar, Box, Flex, Text} from '@chakra-ui/react';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
type Props = { type Props = {
@@ -11,11 +11,9 @@ export default function ChatListItem({user, chat}: Props) {
const router = useRouter(); const router = useRouter();
const otherUser = chat.User.find((u: User) => u.id !== user.id) as User; const otherUser = chat.User.find((u: User) => u.id !== user.id) as User;
console.log(chat);
return ( return (
<Flex alignItems={"center"} gap={5} cursor={'pointer'} onClick={() => router.push(`/chat/${chat.id}`)}> <Flex alignItems={"center"} gap={5} cursor={'pointer'} onClick={() => router.push(`/chat/${chat.id}`)}>
<Image borderRadius={'full'} boxSize="50px" src={otherUser.images[0] ?? '/blank_profile_picture.webp'}/> <Avatar borderRadius={'full'} boxSize="50px" name={`${otherUser.firstName} ${otherUser.lastName}`} src={otherUser.images[0] ?? ''}/>
<Box> <Box>
<Text>{otherUser.firstName} {otherUser.lastName}</Text> <Text>{otherUser.firstName} {otherUser.lastName}</Text>
</Box> </Box>
src/components/chat/MapBar.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import { Flex } from "@chakra-ui/react"; import { Flex } from "@chakra-ui/react";
import { MapContainer, Marker, TileLayer } from "react-leaflet"; import { MapContainer, TileLayer } from "react-leaflet";
import SimpleMarkerBar from "./SimpleMarkerBar"; import SimpleMarkerBar from "./SimpleMarkerBar";
import MarkerClusterGroup from "@christopherpickering/react-leaflet-markercluster";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
type MapBarProps = { type MapBarProps = {
@@ -19,7 +18,7 @@ export default function MapBar({ lat, lon, name, align }: MapBarProps) {
zoom={13} zoom={13}
minZoom={6} minZoom={6}
zoomControl={false} zoomControl={false}
style={{ width: "50%", height: "20rem" }} style={{ width: "100%", height: "20rem" }}
> >
<TileLayer <TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
src/components/chat/Message.tsx
-1
View File
@@ -1,7 +1,6 @@
import type {Message as MessageType} from '@prisma/client'; import type {Message as MessageType} from '@prisma/client';
import MessageText from '@/components/chat/MessageText'; import MessageText from '@/components/chat/MessageText';
import React from 'react'; import React from 'react';
import { Icon } from "leaflet";
import MessageMap from '@/components/chat/MessageMap'; import MessageMap from '@/components/chat/MessageMap';
type Props = { type Props = {
src/components/chat/MessageMap.tsx
+9 -14
View File
@@ -1,13 +1,13 @@
import { Box, Text } from "@chakra-ui/react"; import {Box, Flex, Text} from '@chakra-ui/react';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
const MapBarWithNoSSR = dynamic(() => import("./MapBar"), { const MapBarWithNoSSR = dynamic(() => import('./MapBar'), {
ssr: false, ssr: false,
}); });
type Props = { type Props = {
align: "left" | "right"; align: 'left' | 'right';
point: { point: {
lon: string; lon: string;
lat: string; lat: string;
@@ -18,16 +18,11 @@ type Props = {
export default function MessageMap({align, point}: Props) { export default function MessageMap({align, point}: Props) {
const {lon, lat, name} = point; const {lon, lat, name} = point;
return ( return (
<Box> <Flex justifyContent={align}>
<MapBarWithNoSSR <Box w={'50%'} bg={'purple.500'} borderRadius={10} p={2}>
lon={lon} <MapBarWithNoSSR lon={lon} lat={lat} name={name}/>
lat={lat} {/*<Text align={align}>{lon}, {lat}, {name}</Text>*/}
name={name}
align={align}
></MapBarWithNoSSR>
<Text align={align}>
{lon}, {lat}, {name}
</Text>
</Box> </Box>
</Flex>
); );
} }