[Feat][Follow List & insight bottomsheet] 0129~0212 (#102)

* [Feature][마이페이지] 폴더별 인사이트 구현 (#93)

* mypage tabs now can be pressed, changing state done

* added feedItem list for mypage, infinitequery will be used

* remove unnecessary states

* commit before git pull

* now there are  mypage insights

---------

Co-authored-by: akdlsz21 <akdlsz21@gmail.com>

* tapping on feedscreen now scrolls to top of screen

* cleaned code

* cleaning up code

* created follow, following tabs

* tabs for followlist style compelete. no functionality connected yet

* feedscreen challenge section returns null if data is invalid

* refactor: feedscreen upload button moved to seperate componnent

* fix: dividerbar imported

* connected bottom sheet modal to threedots components

* bottomsheet threedots for report done

* user block ui done. error occurs, dont know why

* follower screen optimistic update done

* connected snackbar to report component

* Toast implemented

* dismiss of modal after report done

* bottomsheet for my insight done, api not implemented yet

---------

Co-authored-by: chi-hoon choe <102471757+watchiswatch@users.noreply.github.com>

package.json

@@ -53,23 +53,25 @@
     "react-native": "0.68.2",
     "react-native-gesture-handler": "~2.2.1",
     "react-native-intersection-observer": "^0.0.9",
+    "react-native-pager-view": "5.4.15",
     "react-native-paper": "^4.12.3",
     "react-native-reanimated": "^2.11.0",
     "react-native-reanimated-carousel": "^3.1.5",
+    "react-native-root-toast": "^3.3.1",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "~3.11.1",
     "react-native-share": "^7.9.1",
     "react-native-svg": "12.3.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-tab-view": "^3.3.4",
+    "react-native-toast-message": "^2.1.5",
     "react-native-vector-icons": "^9.2.0",
     "react-native-view-shot": "3.1.2",
     "react-native-web": "0.17.7",
     "react-native-webview": "11.18.1",
     "rn-faded-scrollview": "^1.0.13",
     "unimodel-core": "^2.0.0",
-    "unimodules-permissions-interface": "^6.1.0",
-    "react-native-pager-view": "5.4.15"
+    "unimodules-permissions-interface": "^6.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/components/bars/SnackBar.tsx

@@ -1,7 +1,6 @@
 import { Pressable, Text } from 'react-native';
 import React from 'react';
-import { Snackbar } from 'react-native-paper';
-import { useTheme } from 'react-native-paper';
+import { Snackbar, useTheme } from 'react-native-paper';
 
 interface SnackBarProps {
   visible: boolean;

src/components/bars/Toasts.tsx

@@ -0,0 +1,88 @@
+import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { BaseToast, ErrorToast } from 'react-native-toast-message';
+import { Toast } from 'react-native-toast-message/lib/src/Toast';
+const toastConfig = {
+  /*
+    Overwrite 'success' type,
+    by modifying the existing `BaseToast` component
+  */
+  success: (props) => (
+    <BaseToast
+      {...props}
+      style={{ borderRadius: 8 }}
+      contentContainerStyle={{
+        backgroundColor: '#121314',
+        borderRadius: 8,
+      }}
+      text1Style={{
+        fontSize: 15,
+        fontWeight: '400',
+        color: 'white',
+        fontFamily: 'pretendard',
+      }}
+    />
+  ),
+  /*
+    Overwrite 'error' type,
+    by modifying the existing `ErrorToast` component
+  */
+  error: (props) => (
+    <ErrorToast
+      {...props}
+      text1Style={{
+        fontSize: 17,
+      }}
+      text2Style={{
+        fontSize: 15,
+      }}
+    />
+  ),
+  /*
+    Or create a completely new type - `tomatoToast`,
+    building the layout from scratch.
+
+    I can consume any custom `props` I want.
+    They will be passed when calling the `show` method (see below)
+  */
+  tomatoToast: ({ text1, props }) => (
+    <>
+      <View style={{ height: 60, width: '100%', backgroundColor: 'tomato' }}>
+        <Text>{text1}</Text>
+        <Text>{props.uuid}</Text>
+      </View>
+    </>
+  ),
+
+  styles: {
+    container: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%',
+      zIndex: 9999,
+      elevation: 9999,
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    text: {
+      fontSize: 16,
+      color: 'white',
+      fontWeight: 'bold',
+    },
+    text1: {
+      fontSize: 16,
+      color: 'white',
+      fontWeight: 'bold',
+    },
+  },
+};
+
+const Toasts = () => {
+  return <Toast config={toastConfig} />;
+};
+
+export default Toasts;
+
+const styles = StyleSheet.create({});

src/components/bottomsheet/BSMyPostOptions.tsx

@@ -0,0 +1,59 @@
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { useTheme } from 'react-native-paper';
+import TwoButtonModal from '../modal/TwoButtonModal';
+import { Toast } from 'react-native-toast-message/lib/src/Toast';
+
+interface BSMyPostOptionsProps {
+  modalRef: React.RefObject<BottomSheetModalMethods>;
+}
+
+const BSMyPostOptions = ({ modalRef }: BSMyPostOptionsProps) => {
+  const { fonts } = useTheme();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const handleDeleteInsight = () => {
+    Toast.show({
+      type: 'success',
+      text1: '인사이트를 삭제했어요.',
+      position: 'bottom',
+      text2: '아직 인사이트 삭제 api가 개발이안된듯',
+    });
+    setIsModalVisible(false);
+    modalRef.current?.close();
+  };
+
+  return (
+    <ScrollView style={styles.optionContainer}>
+      <Pressable style={styles.option} onPress={() => alert('ㅅ줭')}>
+        <Text style={[fonts.text.body1.regular]}>수정하기</Text>
+      </Pressable>
+      <Pressable style={styles.option} onPress={() => setIsModalVisible(true)}>
+        <Text style={[fonts.text.body1.regular]}>삭제하기</Text>
+      </Pressable>
+      <TwoButtonModal
+        dismissable={false}
+        mainTitle={`인사이트를 삭제할까요?`}
+        visible={isModalVisible}
+        onDismiss={() => setIsModalVisible(false)}
+        leftButtonText="취소"
+        rightButtonText="삭제"
+        leftButtonPress={() => setIsModalVisible(false)}
+        rightButtonPress={handleDeleteInsight}
+        rightButtonColor="#f24822"
+      />
+    </ScrollView>
+  );
+};
+
+export default BSMyPostOptions;
+
+const styles = StyleSheet.create({
+  optionContainer: {
+    backgroundColor: 'white',
+    padding: 16,
+  },
+  option: {
+    paddingVertical: 18,
+  },
+});