add delete functionality.

2025-12-18 20:49:36 +01:00 · 2019-12-09 13:17:40 +05:00
parent 01b034d189
commit 10b2486ff2
13 changed files with 722 additions and 136 deletions
--- a/apps/mobile/src/components/AddTopicDialog/index.js
+++ b/apps/mobile/src/components/AddTopicDialog/index.js
@@ -0,0 +1,171 @@
+import React, {useEffect, useState, createRef} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+  Modal,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Feather';
+
+import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils';
+import {FlatList, TextInput} from 'react-native-gesture-handler';
+import {useForceUpdate} from '../../views/ListsEditor';
+import {storage} from '../../../App';
+
+export const AddTopicDialog = ({
+  visible,
+  close = () => {},
+  notebookID,
+  toEdit = null,
+}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const [topics, setTopics] = useState(['']);
+  const forceUpdate = useForceUpdate();
+  const setTitleRef = createRef();
+  let description = 'my first notebook';
+  let title = null;
+  const addNewTopic = async () => {
+    if (!title)
+      return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
+    console.log(notebookID, title);
+    storage.addTopicToNotebook(notebookID, title);
+    ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
+    close(true);
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      onRequestClose={() => (refs = [])}>
+      <View
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(255,255,255,0.3)',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            width: '80%',
+            maxHeight: 350,
+            elevation: 5,
+            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.semibold,
+                marginLeft: 10,
+                fontSize: SIZE.lg,
+                marginTop: -5,
+              }}>
+              {toEdit ? 'Edit Topic' : 'Add New Topic'}
+            </Text>
+          </View>
+
+          <TextInput
+            style={{
+              padding: pv,
+              borderWidth: 1.5,
+              borderColor: colors.nav,
+              paddingHorizontal: ph,
+              borderRadius: 5,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+              marginTop: 20,
+            }}
+            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>
+  );
+};