From 52a3fe743e6122d157eaab3ad7bab0c70a96676b Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Thu, 22 Oct 2020 17:42:29 -0400
Subject: [TMA-242] Twitter and Facebook Tagg View (#63)

* modified the way we store social media data, initial skeleton

* MVP? Twitter done?

* cleaned up some things

* forgot to lint and cleaned up some more code

* minor change to text display

* fixed some UI bug, linting, and minor adjustment to posts UI

* fixed a couple of things

* added DateLabel, Facebook taggs view, fixed minor stuff

* Some small changes for the PR

* removed unused Feed

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
---
 src/components/common/DateLabel.tsx | 58 +++++++++++++++++++++++++++++++++++++
 src/components/common/index.ts      |  1 +
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/common/DateLabel.tsx

(limited to 'src/components/common')

diff --git a/src/components/common/DateLabel.tsx b/src/components/common/DateLabel.tsx
new file mode 100644
index 00000000..145c614c
--- /dev/null
+++ b/src/components/common/DateLabel.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import moment from 'moment';
+
+interface DateLabelProps {
+  timestamp: string;
+  type: 'default' | 'short' | 'small';
+  decorate?: (date: string) => string;
+}
+
+const DateLabel: React.FC<DateLabelProps> = ({
+  timestamp,
+  type,
+  decorate = (date) => `${date}`,
+}) => {
+  let parsedDate = moment(timestamp);
+
+  if (!parsedDate) {
+    return <React.Fragment />;
+  }
+
+  switch (type) {
+    case 'default':
+      return (
+        <Text style={styles.default}>
+          {decorate(parsedDate.format('h:mm a • MMM D, YYYY'))}
+        </Text>
+      );
+
+    case 'short':
+      return (
+        <Text style={styles.default}>
+          {decorate(parsedDate.format('MMM D'))}
+        </Text>
+      );
+
+    case 'small':
+      return (
+        <Text style={styles.smallAndBlue}>
+          {decorate(parsedDate.format('MMM D'))}
+        </Text>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 15,
+    color: '#c4c4c4',
+  },
+  smallAndBlue: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#8FA9C2',
+  },
+});
+
+export default DateLabel;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index cb9d641b..cd72a70b 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -8,4 +8,5 @@ export {default as SocialIcon} from './SocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
 export {default as LoadingIndicator} from './LoadingIndicator';
+export {default as DateLabel} from './DateLabel';
 export * from './post';
-- 
cgit v1.2.3-70-g09d2