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
5e1e1d88
Commit
5e1e1d88
authored
Dec 04, 2021
by
Muhammad Zahran Agung Dewantoro
Committed by
Ahmad Izzudin Alifyandra
Dec 04, 2021
Browse files
feat: Create Forum Post Component
parent
1abfae7b
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/ForumPost/ForumPost.tsx
0 → 100644
View file @
5e1e1d88
/* eslint-disable @typescript-eslint/no-unused-vars */
import
{
MaterialIcons
}
from
"
@expo/vector-icons
"
;
import
React
from
"
react
"
;
import
{
Text
,
StyleSheet
,
TouchableOpacity
,
View
,
Image
}
from
"
react-native
"
;
import
Colors
from
"
../../constants/Colors
"
;
import
Spacer
from
"
../../components/Spacer/Spacer
"
;
import
Layout
from
"
../../constants/Layout
"
;
import
{
IThread
}
from
"
../../types/firestore/thread
"
;
import
{
useNavigation
}
from
"
@react-navigation/core
"
;
import
{
useEffect
,
useState
}
from
"
react
"
;
import
{
getUser
}
from
"
../../service/firestore/user
"
;
import
{
IUser
}
from
"
../../types/firestore/User
"
;
type
props
=
{
item
:
IThread
;
onLike
:
()
=>
void
;
onUnLike
:
()
=>
void
;
};
const
ForumPost
=
({
item
}:
props
)
=>
{
const
nav
=
useNavigation
();
const
[
userName
,
setUserName
]
=
useState
(
""
);
const
[
userPic
,
setUserPic
]
=
useState
(
""
);
const
[
isLike
,
setIslike
]
=
useState
<
boolean
|
undefined
>
(
undefined
);
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"
>
<
TouchableOpacity
onPress
=
{
()
=>
{}
}
testID
=
"Touchable"
>
<
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"
>
{
/* {item.timestamp.toDate().toString()} */
}
{
formatDate
()
}
</
Text
>
</
View
>
</
View
>
<
Spacer
variant
=
{
"
l
"
}
/>
<
View
style
=
{
styles
.
textWrapper
}
testID
=
"Body Wrapper"
>
<
Text
style
=
{
styles
.
title
}
testID
=
"Title"
>
{
item
.
title
}
</
Text
>
<
Spacer
variant
=
{
"
s
"
}
/>
<
Text
style
=
{
styles
.
description
}
testID
=
"Description"
numberOfLines
=
{
4
}
ellipsizeMode
=
"tail"
>
{
item
.
content
}
</
Text
>
</
View
>
<
Spacer
variant
=
{
"
l
"
}
/>
{
item
.
pic
&&
(
<
View
style
=
{
styles
.
imageWrapper
}
testID
=
"Image Wrapper"
>
<
Image
style
=
{
styles
.
image
}
source
=
{
{
uri
:
item
.
pic
}
}
testID
=
"Image"
/>
<
Spacer
variant
=
{
"
l
"
}
/>
</
View
>
)
}
<
View
style
=
{
styles
.
footerWrapper
}
testID
=
"Fotter Wrapper"
>
<
View
style
=
{
styles
.
iconWrapper
}
testID
=
"Comment Wrapper"
>
<
MaterialIcons
name
=
{
"
comment
"
}
style
=
{
styles
.
icon
}
size
=
{
30
}
testID
=
"Comment Icon"
/>
<
Text
style
=
{
styles
.
textIcon
}
testID
=
"Comment"
>
{
item
.
commentCount
}
</
Text
>
</
View
>
<
View
style
=
{
styles
.
iconWrapper
}
testID
=
"Upvote Wrapper"
>
<
MaterialIcons
name
=
{
"
thumb-up
"
}
style
=
{
styles
.
icon
}
size
=
{
30
}
testID
=
"Upvote Icon"
/>
<
Text
style
=
{
styles
.
textIcon
}
testID
=
"Upvote"
>
{
item
.
likeCount
}
</
Text
>
</
View
>
</
View
>
</
View
>
</
View
>
</
TouchableOpacity
>
</
View
>
);
};
export
default
ForumPost
;
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
,
},
imageWrapper
:
{
width
:
"
100%
"
,
},
textWrapper
:
{
width
:
"
100%
"
,
marginTop
:
4
,
paddingLeft
:
8
,
},
footerWrapper
:
{
flexDirection
:
"
row
"
,
flex
:
1
,
},
iconWrapper
:
{
width
:
"
100%
"
,
flexDirection
:
"
row
"
,
flex
:
1
,
},
memberName
:
{
color
:
Colors
.
text
.
subtitle
,
fontSize
:
14
,
fontWeight
:
"
bold
"
,
},
timeStamp
:
{
color
:
Colors
.
text
.
disabled
,
fontSize
:
12
,
},
title
:
{
color
:
Colors
.
text
.
title
,
fontSize
:
14
,
fontWeight
:
"
bold
"
,
},
description
:
{
color
:
Colors
.
text
.
body
,
fontSize
:
14
,
},
image
:
{
width
:
Layout
.
window
.
width
*
0.86
,
height
:
Layout
.
window
.
height
*
0.2
,
overflow
:
"
hidden
"
,
backgroundColor
:
Colors
.
background
,
},
icon
:
{
color
:
Colors
.
icon
.
tab
.
inactive
,
},
textIcon
:
{
color
:
Colors
.
text
.
body
,
fontSize
:
14
,
paddingLeft
:
10
,
marginTop
:
4
,
},
});
src/types/firestore/thread.ts
View file @
5e1e1d88
...
...
@@ -7,7 +7,7 @@ export type IThread = {
userId
:
string
;
title
:
string
;
content
:
string
;
pic
:
string
;
pic
?
:
string
;
likeCount
:
number
;
commentCount
:
number
;
};
...
...
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