// @flow

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

import { threadTypes, type ThreadType } from 'lib/types/thread-types';

type Props = {|
  +threadType: ThreadType,
  +color: string,
|};
function ThreadVisibility(props: Props) {
  const { threadType, color } = props;
  const visLabelStyle = [styles.visibilityLabel, { color }];
  if (threadType === threadTypes.CHAT_SECRET) {
    return (
      <View style={styles.container}>
        <Icon name="lock-outline" size={18} color={color} />
        <Text style={visLabelStyle}>Secret</Text>
      </View>
    );
  } else if (threadType === threadTypes.PRIVATE) {
    return (
      <View style={styles.container}>
        <Icon name="person" size={18} color={color} />
        <Text style={visLabelStyle}>Private</Text>
      </View>
    );
  } else {
    return (
      <View style={styles.container}>
        <Icon name="public" size={18} color={color} />
        <Text style={visLabelStyle}>Open</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  visibilityLabel: {
    fontSize: 16,
    fontWeight: 'bold',
    paddingLeft: 4,
  },
});

export default ThreadVisibility;

// @flow

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { threadTypes, type ThreadType } from 'lib/types/thread-types';

import ThreadIcon from './thread-icon.react';

type Props = {|
  +threadType: ThreadType,
  +color: string,
|};
function ThreadVisibility(props: Props) {
  const { threadType, color } = props;
  const visLabelStyle = [styles.visibilityLabel, { color }];

  let label;
  if (threadType === threadTypes.CHAT_SECRET) {
    label = 'Secret';
  } else if (threadType === threadTypes.PRIVATE) {
    label = 'Private';
  } else {
    label = 'Open';
  }

  return (
    <View style={styles.container}>
      <ThreadIcon threadType={threadType} color={color} />
      <Text style={visLabelStyle}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  visibilityLabel: {
    fontSize: 16,
    fontWeight: 'bold',
    paddingLeft: 4,
  },
});

export default ThreadVisibility;

Make thread-visiblity icon use thread-icon
Make thread-visiblity icon use thread-icon

Summary: Made it so thread-visiblity uses thread-icon.react.js instead of its own icon.

Test Plan: Checked in thread settings to see if icon still worked. Also checked private threads before and after updates to make sure they still work. And also made sure normal threads still work

Reviewers: ashoat, palys-swm

Reviewed By: ashoat

Subscribers: KatPo, zrebcu411, Adrian, atul

Differential Revision: https://phabricator.ashoat.com/D626
