Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
PPL KI Ganjil 2021 2022
Clicks - Ecosystem Business
clicks-frontend
Commits
2bece58b
Commit
2bece58b
authored
Dec 04, 2021
by
Muhammad Zahran Agung Dewantoro
Committed by
Ahmad Izzudin Alifyandra
Dec 04, 2021
Browse files
feat: create display comment post component
parent
1abfae7b
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/ForumPost/Comment.tsx
0 → 100644
View file @
2bece58b
import
React
from
"
react
"
;
import
{
Text
,
StyleSheet
,
View
,
Image
}
from
"
react-native
"
;
import
Colors
from
"
../../constants/Colors
"
;
import
Spacer
from
"
../../components/Spacer/Spacer
"
;
import
{
IThreadComment
}
from
"
../../types/firestore/threadComment
"
;
import
{
useEffect
,
useState
}
from
"
react
"
;
import
{
getUser
}
from
"
../../service/firestore/user
"
;
import
{
IUser
}
from
"
../../types/firestore/User
"
;
type
props
=
{
item
:
IThreadComment
;
};
const
Comment
=
({
item
}:
props
)
=>
{
const
[
userName
,
setUserName
]
=
useState
(
""
);
const
[
userPic
,
setUserPic
]
=
useState
(
""
);
useEffect
(()
=>
{
getUser
(
item
.
userId
).
then
((
res
)
=>
{
const
data
=
res
.
data
()
as
IUser
;
setUserName
(
data
.
firstName
+
"
"
+
data
.
lastName
);
setUserPic
(
data
.
pic
);
});
},
[]);
const
formatDate
=
()
=>
{
const
date
=
item
.
timestamp
.
toDate
();
const
day
=
date
.
getDate
();
const
month
=
date
.
getMonth
()
+
1
;
const
year
=
date
.
getFullYear
();
return
`
${
day
}
-
${
month
}
-
${
year
}
`
;
};
return
(
<
View
testID
=
"Card"
>
<
View
style
=
{
styles
.
container
}
testID
=
"Container"
>
<
View
style
=
{
styles
.
cardWrapper
}
testID
=
"Wrapper"
>
<
View
style
=
{
styles
.
profileWrapper
}
testID
=
"Profile Wrapper"
>
<
Image
style
=
{
styles
.
profilePic
}
source
=
{
{
uri
:
userPic
}
}
testID
=
"Profile Picture"
/>
<
View
style
=
{
styles
.
textWrapper
}
testID
=
"Text Wrapper"
>
<
Text
style
=
{
styles
.
memberName
}
testID
=
"Member Name"
>
{
userName
}
</
Text
>
<
Spacer
variant
=
{
"
s
"
}
/>
<
Text
style
=
{
styles
.
timeStamp
}
testID
=
"Time Stamp"
>
{
formatDate
()
}
</
Text
>
</
View
>
</
View
>
<
Spacer
variant
=
{
"
l
"
}
/>
<
View
style
=
{
styles
.
textWrapper
}
testID
=
"Body Wrapper"
>
<
Text
style
=
{
styles
.
comment
}
testID
=
"Comment"
>
{
item
.
content
}
</
Text
>
</
View
>
</
View
>
</
View
>
</
View
>
);
};
export
default
Comment
;
const
styles
=
StyleSheet
.
create
({
container
:
{
width
:
"
100%
"
,
borderRadius
:
8
,
elevation
:
4
,
flexDirection
:
"
row
"
,
alignItems
:
"
center
"
,
backgroundColor
:
Colors
.
background
,
},
cardWrapper
:
{
width
:
"
100%
"
,
padding
:
8
,
},
profileWrapper
:
{
width
:
"
100%
"
,
flexDirection
:
"
row
"
,
paddingTop
:
8
,
},
profilePic
:
{
width
:
48
,
height
:
48
,
borderRadius
:
100
,
},
textWrapper
:
{
width
:
"
100%
"
,
marginTop
:
4
,
paddingLeft
:
8
,
},
memberName
:
{
color
:
Colors
.
text
.
subtitle
,
fontSize
:
14
,
fontWeight
:
"
bold
"
,
},
timeStamp
:
{
color
:
Colors
.
text
.
disabled
,
fontSize
:
12
,
},
comment
:
{
color
:
Colors
.
text
.
body
,
fontSize
:
14
,
},
});
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment