added versions flatlist

src/config/locales/en-US.json

@@ -810,6 +810,7 @@
     "detected_url": "Detected URL"
   },
   "history": {
-    "edit": "Edit History"
+    "edit": "Edit History",
+    "version": "Version"
   }
 }

src/screens/editHistoryScreen/editHistoryScreen.tsx

@@ -1,37 +1,82 @@
 import React, { Fragment } from 'react';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import {  Alert, Text, View } from 'react-native';
-import {
-  BasicHeader,
-} from '../../components';
+import { Alert, FlatList, Text, TouchableOpacity, View } from 'react-native';
+import { BasicHeader } from '../../components';
 
 // styles
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from './editHistoryScreenStyles';
 import { getCommentHistory } from '../../providers/ecency/ecency';
 import { CommentHistoryItem } from '../../providers/ecency/ecency.types';
+import { dateToFormatted } from '../../utils/time';
 
 const EditHistoryScreen = ({ navigation }) => {
-  const {author, permlink} = navigation.state.params;
+  const { author, permlink } = navigation.state.params;
   const intl = useIntl();
-  const [editHistory, setEditHistory] = useState<CommentHistoryItem[]>([])
+  const [editHistory, setEditHistory] = useState<CommentHistoryItem[]>([]);
+  const [versionSelected, setVersionSelected] = useState(1);
 
   useEffect(() => {
     _getCommentHistory();
-  },[])
+  }, []);
 
   const _getCommentHistory = async () => {
     const responseData = await getCommentHistory(author, permlink);
-    if(!responseData){
-      Alert.alert('No History found!')
+    if (!responseData) {
+      Alert.alert('No History found!');
       return;
     }
     setEditHistory(responseData);
-  }
+  };
   console.log('author, permlink : ', author, permlink);
   console.log('editHistory : ', editHistory);
-  
+
+  const _renderVersionsListItem = ({
+    item,
+    index,
+  }: {
+    item: CommentHistoryItem;
+    index: number;
+  }) => {
+    const selected = versionSelected === item.v;
+    return (
+      <TouchableOpacity
+        onPress={() => setVersionSelected(item.v)}
+        style={[
+          styles.versionItemBtn,
+          {
+            backgroundColor: selected
+              ? EStyleSheet.value('$primaryBlue')
+              : EStyleSheet.value('$primaryDarkGray'),
+          },
+        ]}
+      >
+        <Text style={[styles.versionItemBtnText, { color: selected ? 'white' : 'black' }]}>
+          {intl.formatMessage({
+            id: 'history.version',
+          })}
+          {` ${item.v}`}
+        </Text>
+        <Text style={[styles.versionItemBtnDate, { color: selected ? 'white' : 'black' }]}>
+          {dateToFormatted(item.timestamp, 'LL')}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+  const _renderVersionsList = () => (
+    <View style={styles.versionsListContainer}>
+      <FlatList
+        data={editHistory}
+        keyExtractor={(item, index) => `item ${index}`}
+        removeClippedSubviews={false}
+        renderItem={_renderVersionsListItem}
+        contentContainerStyle={styles.versionsListContentContainer}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+      />
+    </View>
+  );
   return (
     <Fragment>
       <BasicHeader
@@ -39,11 +84,7 @@ const EditHistoryScreen = ({ navigation }) => {
           id: 'history.edit',
         })}
       />
-      <View style={styles.mainContainer}>
-        <Text>
-          Edit History Screen
-        </Text>
-      </View>
+      <View style={styles.mainContainer}>{editHistory.length > 0 && _renderVersionsList()}</View>
     </Fragment>
   );
 };

src/screens/editHistoryScreen/editHistoryScreenStyles.ts

@@ -5,5 +5,26 @@ export default EStyleSheet.create({
     flex:1,
     backgroundColor: '$primaryBackgroundColor',
   },
-  
+  versionsListContentContainer: {
+    paddingHorizontal: 16
+  },
+  versionItemBtn: {
+    // backgroundColor: '$primaryBlue',
+    backgroundColor: '$primaryDarkGray',
+    marginRight: 16,
+    width: 150,
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 100,
+  },
+  versionItemBtnText: {
+    color: '$black',
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  versionItemBtnDate: {
+    color: '$black',
+    fontSize: 14,
+  }
 });

src/utils/time.js

@@ -140,3 +140,9 @@ export const daysTillDate = (dateObj) => {
   var current = moment();
   return Math.round(moment.duration(given.diff(current)).asDays());
 };
+
+export const dateToFormatted = (d, format = 'LLLL') => {
+  const isTimeZoned = d.indexOf('.') !== -1 || d.indexOf('+') !== -1 ? d : `${d}.000Z`;
+  const dm = moment(new Date(isTimeZoned));
+  return dm.format(format);
+};