import React, { useEffect, useState } from 'react'; import { useSubscription } from '@apollo/client'; import { patch } from '@mconf/bbb-diff'; import Styled from './styles'; import { GET_PAD_CONTENT_DIFF_STREAM, GetPadContentDiffStreamResponse } from './queries'; interface PadContentProps { content: string; } interface PadContentContainerProps { externalId: string; } const PadContent: React.FC = ({ content, }) => { const contentSplit = content.split(''); const contentStyle = ` `; const contentWithStyle = [contentSplit[0], contentStyle, contentSplit[1]].join(''); return ( ); }; const PadContentContainer: React.FC = ({ externalId }) => { const [content, setContent] = useState(''); const { data: contentDiffData } = useSubscription( GET_PAD_CONTENT_DIFF_STREAM, { variables: { externalId } }, ); useEffect(() => { if (!contentDiffData) return; const patches = contentDiffData.sharedNotes_diff_stream; const patchedContent = patches.reduce((currentContent, attribs) => patch( currentContent, { start: attribs.start, end: attribs.end, text: attribs.diff }, ), content); setContent(patchedContent); }, [contentDiffData]); return ( ); }; export default PadContentContainer;