notesnook/apps/mobile/src/components/AddTopicDialog/index.js

import React, {useState} from 'react';
import {Modal, Text, TouchableOpacity, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Feather';
import {db} from '../../../App';
import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {getElevation, ToastEvent} from '../../utils/utils';

export const AddTopicDialog = ({
  visible,
  close = () => {},
  notebookID,
  toEdit = null,
}) => {
  const [state, dispatch] = useTracked();
  const {colors} = state;
  const [titleFocused, setTitleFocused] = useState(false);

  let title = null;
  const addNewTopic = async () => {
    if (!title)
      return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
    db.addTopicToNotebook(notebookID, title);
    ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
    close(true);
  };

  return (
    <Modal
      visible={visible}
      animated
      animationType="fade"
      transparent={true}
      onRequestClose={() => (refs = [])}>
      <View
        style={{
          width: '100%',
          height: '100%',
          backgroundColor: 'rgba(0,0,0,0.3)',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <TouchableOpacity
          onPress={() => close()}
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
          }}
        />

        <View
          style={{
            ...getElevation(5),
            width: '80%',
            maxHeight: 350,
            borderRadius: 5,
            backgroundColor: colors.bg,
            paddingHorizontal: ph,
            paddingVertical: pv,
          }}>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
            <Text
              style={{
                color: colors.accent,
                fontFamily: WEIGHT.bold,
                marginLeft: 5,
                fontSize: SIZE.md,
              }}>
              {toEdit ? 'Edit Topic' : 'Add New Topic'}
            </Text>
          </View>

          <TextInput
            style={{
              padding: pv,
              borderWidth: 1.5,
              borderColor: titleFocused ? colors.accent : colors.nav,
              paddingHorizontal: ph,
              borderRadius: 5,
              fontSize: SIZE.sm,
              fontFamily: WEIGHT.regular,
              color: colors.pri,
              marginTop: 20,
            }}
            onFocus={() => {
              setTitleFocused(true);
            }}
            onBlur={() => {
              setTitleFocused(false);
            }}
            defaultValue={toEdit ? toEdit.title : null}
            onChangeText={value => {
              title = value;
            }}
            placeholder="Enter title of topic"
            placeholderTextColor={colors.icon}
          />

          <View
            style={{
              justifyContent: 'space-around',
              alignItems: 'center',
              flexDirection: 'row',
              marginTop: 20,
            }}>
            <TouchableOpacity
              activeOpacity={opacity}
              onPress={async () => await addNewTopic()}
              style={{
                paddingVertical: pv,
                paddingHorizontal: ph,
                borderRadius: 5,
                width: '45%',
                justifyContent: 'center',
                alignItems: 'center',
                borderColor: colors.accent,
                backgroundColor: colors.accent,
                borderWidth: 1,
              }}>
              <Text
                style={{
                  fontFamily: WEIGHT.medium,
                  color: 'white',
                  fontSize: SIZE.sm,
                }}>
                Add
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              activeOpacity={opacity}
              onPress={() => close()}
              style={{
                paddingVertical: pv,
                paddingHorizontal: ph,
                borderRadius: 5,
                width: '45%',
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: colors.nav,
              }}>
              <Text
                style={{
                  fontFamily: WEIGHT.medium,
                  color: colors.icon,
                  fontSize: SIZE.sm,
                }}>
                Cancel
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};