comment section ui react native

commentSection.js

/*
prepare sample data array
base structure. title and list
design model ui
design comment item username and comment text
design comment item profile picture
add styles
adjust margin and padding
form data array in useeffect
test the result
*/

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

// mock comment text
const list_comments = [
  {
    id: '1',
    parent_id: '0',
    name: 'david',
    image: 'https://tr.web.img4.acsta.net/pictures/23/03/09/13/58/2006576.jpg',
    text: 'John Wick is a retired assassin who returns back to his old ways after a group of Russian gangsters steal his car and kill a puppy which was gifted to him by his late wife Helen.',
  },
  {
    id: '2',
    parent_id: '0',
    name: 'paul',
    image: '',
    text: 'Forced to honor a debt from his past life, John Wick is sent to assassinate a target he has no wish to kill, where he faces betrayal at the hands of his sponsor.',
  },
  {
    id: '3',
    parent_id: '0',
    name: 'johnny',
    image: '',
    text: 'a former hitman who is drawn back into the criminal underworld he had previously abandoned.',
  },
  {
    id: '4',
    parent_id: '1',
    name: 'zaheer',
    image: '',
    text: 'Every assassin in the world sticks to a strict code for conducting "business", revolving around the Continental hotel chain,',
  },
  {
    id: '5',
    parent_id: '1',
    name: 'stephen',
    image: '',
    text: 'The films have received critical acclaim and earned a collective gross of more than $1 billion worldwide.[4]',
  },
  {
    id: '6',
    parent_id: '2',
    name: 'imran',
    image: '',
    text: 'John Wick takes his fight against the High Table global as he seeks out more powerful players in the underworld from different countries.',
  },
  {
    id: '7',
    parent_id: '4',
    name: 'martin',
    image: '',
    text: 'In May 2019, prior to the release of John Wick: Chapter 3 – Parabellum, Chad Stahelski confirmed on a Reddit "Ask Me Anything" thread that there has been discussion of another film',
  },
];

/*
// basic comment text
const list_comments = [
  {
    id: '1',
    parent_id: '0',
    name: 'david',
    image: 'http',
    text: 'this is parent cooment 1',
  },
  {
    id: '2',
    parent_id: '0',
    name: 'paul',
    image: '',
    text: 'this is parent cooment 2',
  },
  {
    id: '3',
    parent_id: '0',
    name: 'johnny',
    image: '',
    text: 'this is parent cooment 3',
  },
  {
    id: '4',
    parent_id: '1',
    name: 'zaheer',
    image: '',
    text: 'this is c1 comment of p1',
  },
  {
    id: '5',
    parent_id: '1',
    name: 'stephen',
    image: '',
    text: 'this is c2 comment of p1',
  },
  {
    id: '6',
    parent_id: '2',
    name: 'imran',
    image: '',
    text: 'this is c1 comment of p2',
  },
  {
    id: '7',
    parent_id: '4',
    name: 'martin',
    image: '',
    text: 'this is c1 comment of p1c1',
  },
];
*/

const comment_margin_left = 15;
export default function App() {
  const [listComment, setListComment] = useState([...list_comments]);

  const renderItem = ({ item }) => {
    return <CommentItem comment={item} />;
  };

  const CommentItem = ({ comment }) => {
    return (
      <View
        style={[
          styles.commentItem,
          {
            marginLeft: comment.type * comment_margin_left,
            marginTop: comment.type === 0 ? 10 : 2,
          },
        ]}>
        <ProfilePic letter={comment.name[0]} />
        <View style={{ marginLeft: 10, flex: 1 }}>
          <Text style={styles.commentBy}>{comment.name}</Text>
          <Text style={styles.commentText}>{comment.text}</Text>
        </View>
      </View>
    );
  };

  const ProfilePic = ({ letter = '' }) => {
    return (
      <View style={styles.profileImg}>
        <Text style={styles.profileText}>{letter.toUpperCase()}</Text>
      </View>
    );
  };

  React.useEffect(() => {
    /*
    setListComment(list_comments);
    return;
    */

    /*
    // form object to render child
    var arr = [];
    var arr2 = [];
    for (let item of list_comments) {
      if (item.parent_id === '0') {
        // type 0 parent comment
        arr.push({ ...item, type: 0 }); 
        arr2 = list_comments.filter((ele) => ele.parent_id === item.id);
        if (arr2.length) {
          // type 1 child comment
          arr2 = arr2.map((ele) => ({ ...ele, type: 1 })); 
          arr = arr.concat(arr2);
        }
      }
    }
    setListComment(arr);
    return;
    */

    // forming object to render grand child
    var arr = [];
    var arr2 = [],
      arr3 = [];
    for (let item of list_comments) {
      if (item.parent_id === '0') {
        arr.push({ ...item, type: 0 });
        arr2 = list_comments.filter((ele) => ele.parent_id === item.id);
        if (arr2.length) {
          for (let item2 of arr2) {
            arr3 = list_comments.filter((ele) => ele.parent_id === item2.id);
            if (arr3.length) {
              arr.push({ ...item2, type: 1 });
              arr3 = arr3.map((ele) => ({ ...ele, type: 2 }));
              arr = arr.concat(arr3);
            } else {
              arr.push({ ...item2, type: 1 });
            }
          }
        }
      }
    }
    setListComment(arr);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Comments {listComment.length}</Text>
      <FlatList
        style={{ marginTop: 5 }}
        data={listComment}
        renderItem={renderItem}
        keyExtractor={(item, index) => '_cmt_item' + index}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'snow',
    padding: 2,
    paddingTop: 20,
  },
  text: {
    fontSize: 12,
  },
  commentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 3,
    //  paddingHorizontal: 3,
  },
  commentBy: {
    fontSize: 12,
    color: '#909090',
  },
  commentText: {
    marginTop: 5,
    fontSize: 12,
    color: 'black',
  },
  profileImg: {
    height: 24,
    width: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'seagreen',
  },
  profileText: {
    fontSize: 10,
    fontWeight: 'bold',
    color: 'white',
  },
});