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

import React, { useEffect, useState } from 'react';
import { ScrollView, Text, View } from 'react-native';
import BaseDialog from '../../components/Dialog/base-dialog';
import { PressableButton } from '../../components/PressableButton';
import Seperator from '../../components/Seperator';
import { useTracked } from '../../provider';
import { DDS } from '../../services/DeviceDetection';
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
import { getElevation } from '../../utils';
import {
	eCloseJumpToDialog,
	eOpenJumpToDialog
} from '../../utils/Events';
import { SIZE, WEIGHT } from '../../utils/SizeUtils';
import Paragraph from '../Typography/Paragraph';

const JumpToDialog = () => {
	const [state] = useTracked();
	const {notes, colors, settings} = state;
	const [visible,setVisible] = useState(false)
  
	useEffect(() => {});
	console.log(notes.filter((i) => i.type === 'header'));
  
	const onPress = (item, index) => {
	  let offset = 30 * index;
	  let ind = notes.findIndex(
		(i) => i.title === item.title && i.type === 'header',
	  );
	  ind = ind + 1;
	  ind = ind - (index + 1);
	  offset = offset + ind * 100;
	  scrollRef.current?.scrollToOffset(0, index === 0 ? 0 : offset + 50, true);
	  close();
	};
  
	useEffect(() => {
	  eSubscribeEvent(eOpenJumpToDialog, open);
	  eSubscribeEvent(eCloseJumpToDialog, close);
  
	  return () => {
		eUnSubscribeEvent(eOpenJumpToDialog, open);
		eUnSubscribeEvent(eCloseJumpToDialog, close);
	  };
	}, []);
  
	const open = () => {
	  setVisible(true);
	};
  
	const close = () => {
	  setVisible(false);
	 
	};
  
	return (
	  <BaseDialog onRequestClose={close} visible={visible}>
		<View
		  style={{
			...getElevation(5),
			width: DDS.isTab ? 500 : '80%',
			backgroundColor: colors.bg,
			zIndex: 100,
			bottom: 20,
			maxHeight: '65%',
			borderRadius: 5,
			alignSelf: 'center',
			padding: 10,
		  }}>
		  <Text
			style={{
			  fontSize: SIZE.xl,
			  fontFamily: WEIGHT.bold,
			  color: colors.heading,
			  alignSelf: 'center',
			}}>
			{settings.sort.slice(0, 1).toUpperCase() +
			  settings.sort.slice(1, settings.sort.length)}
		  </Text>
		  <Seperator />
		  <ScrollView
			style={{
			  maxHeight: '100%',
			}}>
			<View
			  style={{
				flexDirection: 'row',
				flexWrap: 'wrap',
				alignSelf: 'center',
				justifyContent: 'center',
			  }}>
			  {notes
				.filter((i) => i.type === 'header')
				.map((item, index) => (
				  <PressableButton
					onPress={() => onPress(item, index)}
					selectedColor={colors.nav}
					customStyle={{
					  minWidth: '20%',
					  maxWidth: '46%',
					  width: null,
					  padding: 15,
					  margin: 5,
					}}>
					<Paragraph
					  size={SIZE.xs}
					  style={{
						textAlign: 'center',
					  }}>
					  {item.title}
					</Paragraph>
				  </PressableButton>
				))}
			</View>
		  </ScrollView>
		</View>
	  </BaseDialog>
	);
  };

  export default JumpToDialog