Skip to content

Commit 4516bb0

Browse files
safinsinghsafinsingh
committed
Finish DirectMessages abstraction
1 parent 1d4bc1d commit 4516bb0

File tree

10 files changed

+404
-523
lines changed

10 files changed

+404
-523
lines changed

‎src/components/atoms/ImageGrid.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Box, Flex, Image } from '@chakra-ui/core'
2+
import React from 'react'
3+
4+
interface imageGridProps {
5+
size: number
6+
images: Array<string>
7+
}
8+
9+
const ImageGrid = (props: imageGridProps) => {
10+
return (
11+
<Box height={props.size + 'px'}>
12+
<Flex
13+
h={props.size + 'px'}
14+
w={props.size + 'px'}
15+
direction="row"
16+
align="center"
17+
justify="center"
18+
>
19+
<Flex direction="column" align="center" justify="center">
20+
<Flex
21+
h={props.size / 2 + 'px'}
22+
w={props.size / 2 + 'px'}
23+
align="center"
24+
justify="center"
25+
>
26+
<Image
27+
size={props.size / 2.75 + 'px'}
28+
src={props.images[0]}
29+
borderRadius="50%"
30+
cursor="pointer"
31+
/>
32+
</Flex>
33+
<Flex
34+
h={props.size / 2 + 'px'}
35+
w={props.size / 2 + 'px'}
36+
align="center"
37+
justify="center"
38+
>
39+
<Image
40+
size={props.size / 2.75 + 'px'}
41+
src={props.images[1]}
42+
borderRadius="50%"
43+
cursor="pointer"
44+
/>
45+
</Flex>
46+
</Flex>
47+
<Flex direction="column" align="center" justify="center">
48+
<Flex
49+
h={props.size / 2 + 'px'}
50+
w={props.size / 2 + 'px'}
51+
align="center"
52+
justify="center"
53+
>
54+
<Image
55+
size={props.size / 2.75 + 'px'}
56+
src={props.images[2]}
57+
borderRadius="50%"
58+
cursor="pointer"
59+
/>
60+
</Flex>
61+
<Flex
62+
h={props.size / 2 + 'px'}
63+
w={props.size / 2 + 'px'}
64+
align="center"
65+
justify="center"
66+
>
67+
<Image
68+
size={props.size / 2.75 + 'px'}
69+
src={props.images[3]}
70+
borderRadius="50%"
71+
cursor="pointer"
72+
/>
73+
</Flex>
74+
</Flex>
75+
</Flex>
76+
</Box>
77+
)
78+
}
79+
export default ImageGrid

‎src/components/atoms/WordWithLine.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,29 @@ import React from 'react'
33

44
interface wordWithLineProps {
55
title: string
6+
color: string
67
}
78

89
const WordWithLine = (props: wordWithLineProps) => {
910
return (
1011
<Flex
11-
color="#42434A"
12+
color={props.color}
1213
w="100%"
1314
direction="row"
1415
alignItems="center"
1516
marginTop="8px"
1617
marginBottom="15px"
1718
>
18-
<Text>{props.title}</Text>
19-
<Box marginLeft="15px" w="100%" h="1px" bg="#42434A"></Box>
19+
{props.title.split(' ').map((e, index) => (
20+
<Text
21+
key={index}
22+
fontSize="15px"
23+
marginLeft={index !== 0 ? '5px' : '0px'}
24+
>
25+
{e}
26+
</Text>
27+
))}
28+
<Box marginLeft="12px" w="100%" h="1px" bg={props.color}></Box>
2029
</Flex>
2130
)
2231
}

‎src/components/molecules/FriendItem.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ interface userSchema {
1818
interface friendItemProps {
1919
userSchema: userSchema
2020
isOnline: boolean
21+
index: number
22+
len: number
2123
}
2224

2325
const FriendItem = (props: friendItemProps) => {
@@ -124,7 +126,12 @@ const FriendItem = (props: friendItemProps) => {
124126
))}
125127
</Flex>
126128
</Flex>
127-
<Box w="100%" h="1px" bg="#42434A" marginBottom="10px"></Box>
129+
<Box
130+
w="100%"
131+
h="1px"
132+
bg={props.index !== props.len - 1 ? '#42434A' : 'transparent'}
133+
marginBottom="10px"
134+
></Box>
128135
</Flex>
129136
)
130137
}

‎src/components/molecules/GroupDmCard.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Box, Flex, Tag, Text } from '@chakra-ui/core'
2+
import React from 'react'
3+
4+
import ImageGrid from '../atoms/ImageGrid'
5+
6+
interface groupDmCardProps {
7+
groupDm: {
8+
pfps: Array<string>
9+
unread: string
10+
online: number
11+
name: string
12+
}
13+
}
14+
15+
const GroupDmCard = (props: groupDmCardProps) => {
16+
return (
17+
<Flex direction="row" w="100%" alignItems="center" marginY="6px">
18+
<ImageGrid size={45} images={props.groupDm.pfps} />
19+
<Box marginLeft="20px">
20+
<Text color="#fff" fontSize="lg">
21+
{props.groupDm.name}
22+
</Text>
23+
<Text color="#979797" fontSize="xs">
24+
{props.groupDm.online} online
25+
</Text>
26+
</Box>
27+
<Tag
28+
size="sm"
29+
variant="solid"
30+
bg="#5280E2"
31+
borderRadius="20px"
32+
marginLeft="auto"
33+
fontSize="12px"
34+
h="15px"
35+
>
36+
713
37+
</Tag>
38+
</Flex>
39+
)
40+
}
41+
42+
export default GroupDmCard

‎src/components/molecules/UserDmCard.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Box, Flex, Image, Tag, Text } from '@chakra-ui/core'
2+
import React from 'react'
3+
4+
interface userDmCardProps {
5+
dm: {
6+
online: boolean
7+
name: string
8+
username: string
9+
unread: string
10+
pfp: string
11+
}
12+
}
13+
14+
const UserDmCard = (props: userDmCardProps) => {
15+
return (
16+
<Flex direction="row" w="100%" alignItems="center" marginY="6px">
17+
<Box height="45px">
18+
<Image
19+
size="45px"
20+
src={props.dm.pfp}
21+
borderRadius="50%"
22+
cursor="pointer"
23+
/>
24+
<Flex
25+
bg={props.dm.online ? '#67e5ae' : '#000'}
26+
w="16px"
27+
h="16px"
28+
position="relative"
29+
bottom="15px"
30+
left="30px"
31+
borderRadius="50%"
32+
margin="0px"
33+
padding="0px"
34+
border="1px solid black"
35+
align="center"
36+
justify="center"
37+
>
38+
{!props.dm.online && (
39+
<Box bg="#242529" w="8px" h="8px" borderRadius="50%"></Box>
40+
)}
41+
</Flex>
42+
</Box>
43+
<Box marginLeft="20px">
44+
<Text color="#fff" fontSize="lg">
45+
{props.dm.name}
46+
</Text>
47+
<Text color="#979797" fontSize="xs">
48+
{props.dm.username}
49+
</Text>
50+
</Box>
51+
<Tag
52+
size="sm"
53+
variant="solid"
54+
bg="#5280E2"
55+
borderRadius="20px"
56+
marginLeft="auto"
57+
fontSize="12px"
58+
h="15px"
59+
>
60+
{props.dm.unread}
61+
</Tag>
62+
</Flex>
63+
)
64+
}
65+
66+
export default UserDmCard

‎src/components/organisms/DirectMessages.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Box, Flex, Text } from '@chakra-ui/core'
2+
import React from 'react'
3+
4+
import { dms, groupDms } from '../../util/dummyData'
5+
import SearchBar from '../atoms/SearchBar'
6+
import WordWithLine from '../atoms/WordWithLine'
7+
import GroupDmCard from '../molecules/GroupDmCard'
8+
import UserDmCard from '../molecules/UserDmCard'
9+
import Sidebar from './NavSidebar'
10+
11+
const DirectMessages = () => {
12+
return (
13+
<Flex
14+
w="500px"
15+
bg="#292A2F"
16+
borderTopRightRadius="45px"
17+
borderBottomRightRadius="45px"
18+
direction="row"
19+
>
20+
<Sidebar />
21+
<Flex w="100%" justifyContent="center" direction="row">
22+
<Flex w="85%" paddingY="30px" direction="column">
23+
<Text fontSize="25px" color="white">
24+
Direct Messages
25+
</Text>
26+
<Box paddingY="10px">
27+
<SearchBar />
28+
</Box>
29+
<WordWithLine color="#707070" title="Pinned conversations" />
30+
{dms
31+
.filter((dm) => {
32+
if (dm.isPinned) {
33+
return dm
34+
}
35+
})
36+
.map((dm, index) => (
37+
<UserDmCard dm={dm} key={index} />
38+
))}
39+
{groupDms
40+
.filter((groupDm) => {
41+
if (groupDm.isPinned) {
42+
return groupDm
43+
}
44+
})
45+
.map((groupDm, index) => (
46+
<GroupDmCard groupDm={groupDm} key={index} />
47+
))}
48+
<WordWithLine color="#707070" title="All conversations" />
49+
{dms
50+
.filter((dm) => {
51+
if (!dm.isPinned) {
52+
return dm
53+
}
54+
})
55+
.map((dm, index) => (
56+
<UserDmCard dm={dm} key={index} />
57+
))}
58+
{groupDms
59+
.filter((groupDm) => {
60+
if (!groupDm.isPinned) {
61+
return groupDm
62+
}
63+
})
64+
.map((groupDm, index) => (
65+
<GroupDmCard groupDm={groupDm} key={index} />
66+
))}
67+
</Flex>
68+
</Flex>
69+
</Flex>
70+
)
71+
}
72+
73+
export default DirectMessages

‎src/components/organisms/FriendList.tsx

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,37 @@
11
import { Flex } from '@chakra-ui/core'
22
import React from 'react'
3-
3+
import { offlineUsers, onlineUsers } from '../../util/dummyData'
44
import WordWithLine from '../atoms/WordWithLine'
55
import FriendItem from '../molecules/FriendItem'
66
import FriendSearchBar from '../molecules/FriendSearchBar'
77
import ThemeX from '../theme'
88

99
const FriendList = () => {
10-
const onlineUsers = [
11-
{
12-
name: 'Safin',
13-
username: 'safinsingh',
14-
imageURL:
15-
'https://www.yourdictionary.com/images/definitions/lg/10750.person.jpg',
16-
drops: ['Google Translate'],
17-
},
18-
{
19-
name: 'Safin',
20-
username: 'safinsingh',
21-
imageURL:
22-
'https://www.yourdictionary.com/images/definitions/lg/10750.person.jpg',
23-
drops: ['Google Translate'],
24-
},
25-
]
26-
27-
const offlineUsers = [
28-
{
29-
name: 'Safin',
30-
username: 'safinsingh',
31-
imageURL:
32-
'https://www.yourdictionary.com/images/definitions/lg/10750.person.jpg',
33-
drops: ['Google Translate'],
34-
},
35-
{
36-
name: 'Safin',
37-
username: 'safinsingh',
38-
imageURL:
39-
'https://www.yourdictionary.com/images/definitions/lg/10750.person.jpg',
40-
drops: ['Google Translate'],
41-
},
42-
]
43-
4410
return (
4511
<ThemeX>
4612
<FriendSearchBar />
4713
<Flex w="100%" bg="#242529" justifyContent="center" direction="column">
4814
<Flex w="100%" justifyContent="center">
4915
<Flex w="92%" direction="column">
50-
<WordWithLine title="Online" />
16+
<WordWithLine title="Online" color="#979797" />
5117
{onlineUsers.map((u, index) => (
52-
<FriendItem userSchema={u} isOnline={true} key={index} />
18+
<FriendItem
19+
userSchema={u}
20+
isOnline={true}
21+
key={index}
22+
index={index}
23+
len={onlineUsers.length}
24+
/>
5325
))}
54-
<WordWithLine title="Offline" />
26+
<WordWithLine title="Offline" color="#979797" />
5527
{offlineUsers.map((u, index) => (
56-
<FriendItem userSchema={u} isOnline={false} key={index} />
28+
<FriendItem
29+
userSchema={u}
30+
isOnline={false}
31+
key={index}
32+
index={index}
33+
len={offlineUsers.length}
34+
/>
5735
))}
5836
</Flex>
5937
</Flex>

0 commit comments

Comments
 (0)