[WIP] Comments

package.json

@@ -47,6 +47,7 @@
     "react-native-paper": "5.10.6",
     "react-native-reanimated": "3.5.4",
     "react-native-remote-svg": "2.0.11",
+    "react-native-render-html": "6.3.4",
     "react-native-safe-area-context": "4.7.2",
     "react-native-screens": "3.25.0",
     "react-native-svg": "13.14.0",
@@ -78,6 +79,7 @@
     "@types/metro-config": "0.76.3",
     "@types/node": "20.7.0",
     "@types/react": "18.2.22",
+    "@types/react-native": "0.72.2",
     "@types/react-native-vector-icons": "6.4.14",
     "@types/react-native-video": "5.0.15",
     "@types/react-syntax-highlighter": "15.5.7",

src/api/types.ts

@@ -73,7 +73,7 @@ export enum ArticleFeedApiStates {
 }
 
 export interface ApiVideoListItem {
-	type_of: VideoTypes;
+	type_of: string;
 	id: number;
 	path: string;
 	cloudinary_video_url: string;
@@ -84,4 +84,11 @@ export interface ApiVideoListItem {
 	user: User;
 }
 
-export enum VideoTypes {}
+export interface ApiCommentItem {
+	type_of: string;
+	id_code: string;
+	created_at: string;
+	body_html: string;
+	user: User;
+	children: ApiCommentItem[];
+}

src/components/Comments/Comment.tsx

@@ -0,0 +1,27 @@
+import { Fragment, FunctionComponent, memo } from "react";
+import { View, useWindowDimensions } from "react-native";
+import RenderHTML from "react-native-render-html";
+import { ApiCommentItem } from "../../api/types";
+import CommentsContainer from "./CommentsContainer";
+
+type Props = {
+	comment: ApiCommentItem;
+};
+
+const Comment: FunctionComponent<Props> = ({ comment }) => {
+	const { width } = useWindowDimensions();
+	return (
+		<View style={{ padding: 8 }}>
+			<View style={{ borderWidth: 1 }}>
+				<RenderHTML
+					contentWidth={width}
+					source={{ html: comment.body_html }}
+					enableCSSInlineProcessing={false}
+				/>
+			</View>
+			<CommentsContainer comments={comment.children} />
+		</View>
+	);
+};
+
+export default memo(Comment);

src/components/Comments/CommentsContainer.tsx

@@ -0,0 +1,18 @@
+import { FunctionComponent } from "react";
+import { FlatList } from "react-native";
+import { ApiCommentItem } from "../../api/types";
+import Comment from "./Comment";
+
+type Props = {
+	comments: ApiCommentItem[];
+};
+
+const CommentsContainer: FunctionComponent<Props> = ({ comments }) => {
+	const renderItem = ({ item }: { item: ApiCommentItem }) => {
+		return <Comment comment={item} />;
+	};
+
+	return <FlatList data={comments} renderItem={renderItem} />;
+};
+
+export default CommentsContainer;

src/components/Comments/index.tsx

@@ -0,0 +1,4 @@
+import Comment from "./Comment";
+import CommentsContainer from "./CommentsContainer";
+
+export { CommentsContainer, Comment };

src/router/index.tsx

@@ -11,6 +11,7 @@ import Icon from "react-native-vector-icons/MaterialIcons";
 import AboutScreen from "../screens/About";
 import ArticleScreen from "../screens/Article";
 import BookmarksScreen from "../screens/Bookmarks";
+import CommentsScreen from "../screens/Comments";
 import LandingScreen from "../screens/LandingFeed";
 import LatestScreen from "../screens/LatestFeed";
 import SearchScreen from "../screens/Search";
@@ -127,6 +128,7 @@ const Router: FunctionComponent<RouterProps> = ({ theme, onReady }) => {
 					component={TermsAndConditionsScreen}
 				/>
 				<Stack.Screen name="Search" component={SearchScreen} />
+				<Stack.Screen name="Comments" component={CommentsScreen} />
 			</Stack.Navigator>
 		</NavigationContainer>
 	);

src/router/types.ts

@@ -37,4 +37,5 @@ export type StackParamList = {
 	Settings: undefined;
 	TermsAndConditions: undefined;
 	Search: undefined;
+	Comments: undefined;
 };

src/screens/Article/index.tsx

@@ -251,6 +251,12 @@ const ArticleScreen: FunctionComponent<Props> = ({ route, navigation }) => {
 			<Appbar.Header elevated style={styles.nav}>
 				<Appbar.BackAction onPress={onBackActionPress} />
 				<AnimatedAppbarContent title={title} style={[appbarContentOpacity]} />
+				<Appbar.Action
+					icon="comment"
+					onPress={() => navigation.navigate("Comments")}
+					accessibilityHint="Open in browser"
+					accessibilityLabel="Open in browser"
+				/>
 				<Tooltip title="Bookmark">
 					<Appbar.Action
 						icon={isPostBookmarked ? "bookmark-added" : "bookmark-add"}

src/screens/Comments/index.tsx

@@ -0,0 +1,131 @@
+import { FunctionComponent } from "react";
+import { ApiCommentItem } from "../../api/types";
+import { CommentsContainer } from "../../components/Comments";
+
+const comments: ApiCommentItem[] = [
+	{
+		type_of: "comment",
+		id_code: "29dem",
+		created_at: "2023-09-18T20:31:47Z",
+		body_html:
+			"<p>I've never gotten involved with Hacktoberfest before, but keen to get involved this time around :)</p>\n\n",
+		user: {
+			name: "Barry Michael Doyle",
+			username: "barrymichaeldoyle",
+			twitter_username: "barrymdoyle",
+			github_username: "barrymichaeldoyle",
+			user_id: 41018,
+			website_url: "https://barrymichaeldoyle.start.page",
+			profile_image:
+				"https://res.cloudinary.com/practicaldev/image/fetch/s--xezS2DKk--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/41018/162edfc7-780a-4d8b-87ba-ddd14206256c.jpg",
+			profile_image_90:
+				"https://res.cloudinary.com/practicaldev/image/fetch/s--u9kQsuic--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/41018/162edfc7-780a-4d8b-87ba-ddd14206256c.jpg",
+		},
+		children: [
+			{
+				type_of: "comment",
+				id_code: "29dp7",
+				created_at: "2023-09-19T11:37:40Z",
+				body_html:
+					"<p>Last year was my first and it's great to participate! If you need help I'm here!</p>\n\n",
+				user: {
+					name: "Renan Ferro",
+					username: "renancferro",
+					twitter_username: "renancferro",
+					github_username: "ferrorenan",
+					user_id: 617582,
+					website_url: "https://dev-tab-daily.vercel.app/",
+					profile_image:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--UbkUaQkL--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/617582/bc204122-f4d9-4ca9-b458-cd897fca945b.png",
+					profile_image_90:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--MZso0KUf--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/617582/bc204122-f4d9-4ca9-b458-cd897fca945b.png",
+				},
+				children: [
+					{
+						type_of: "comment",
+						id_code: "29dpn",
+						created_at: "2023-09-19T12:16:40Z",
+						body_html: "<p>Thanks man!</p>\n\n",
+						user: {
+							name: "Barry Michael Doyle",
+							username: "barrymichaeldoyle",
+							twitter_username: "barrymdoyle",
+							github_username: "barrymichaeldoyle",
+							user_id: 41018,
+							website_url: "https://barrymichaeldoyle.start.page",
+							profile_image:
+								"https://res.cloudinary.com/practicaldev/image/fetch/s--xezS2DKk--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/41018/162edfc7-780a-4d8b-87ba-ddd14206256c.jpg",
+							profile_image_90:
+								"https://res.cloudinary.com/practicaldev/image/fetch/s--u9kQsuic--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/41018/162edfc7-780a-4d8b-87ba-ddd14206256c.jpg",
+						},
+						children: [],
+					},
+				],
+			},
+			{
+				type_of: "comment",
+				id_code: "29dg4",
+				created_at: "2023-09-18T22:43:16Z",
+				body_html: "<p>Same here :)</p>\n\n",
+				user: {
+					name: "Cherlock Code 🔎",
+					username: "evergrowingdev",
+					twitter_username: "evergrowingdev",
+					github_username: null,
+					user_id: 1027000,
+					website_url: "https://evergrowingdev.substack.com/",
+					profile_image:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--DNl98s33--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1027000/3d79f207-f265-41e7-a460-5db1a113ce57.png",
+					profile_image_90:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--p1bhZ4cs--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1027000/3d79f207-f265-41e7-a460-5db1a113ce57.png",
+				},
+				children: [],
+			},
+			{
+				type_of: "comment",
+				id_code: "29dk6",
+				created_at: "2023-09-19T03:49:24Z",
+				body_html: "<p>+1</p>\n\n",
+				user: {
+					name: "Jyothikrishna ",
+					username: "bhendi",
+					twitter_username: "bhendiboi22",
+					github_username: "bhendi-boi",
+					user_id: 897790,
+					website_url: "https://linktr.ee/jyothikrishna22",
+					profile_image:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--DqcMVYxU--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/897790/1e04b27c-f4c2-452e-b5c1-8e803cc6d875.png",
+					profile_image_90:
+						"https://res.cloudinary.com/practicaldev/image/fetch/s--f4eCCkd1--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/897790/1e04b27c-f4c2-452e-b5c1-8e803cc6d875.png",
+				},
+				children: [],
+			},
+		],
+	},
+	{
+		type_of: "comment",
+		id_code: "29dp6",
+		created_at: "2023-09-19T11:36:12Z",
+		body_html:
+			"<p>Let's goooo, really looking forward to another year of Hacktoberfest 🤟🤟</p>\n\n",
+		user: {
+			name: "Renan Ferro",
+			username: "renancferro",
+			twitter_username: "renancferro",
+			github_username: "ferrorenan",
+			user_id: 617582,
+			website_url: "https://dev-tab-daily.vercel.app/",
+			profile_image:
+				"https://res.cloudinary.com/practicaldev/image/fetch/s--UbkUaQkL--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/617582/bc204122-f4d9-4ca9-b458-cd897fca945b.png",
+			profile_image_90:
+				"https://res.cloudinary.com/practicaldev/image/fetch/s--MZso0KUf--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/617582/bc204122-f4d9-4ca9-b458-cd897fca945b.png",
+		},
+		children: [],
+	},
+];
+
+const CommentsScreen: FunctionComponent = () => {
+	return <CommentsContainer comments={comments} />;
+};
+
+export default CommentsScreen;