update main view {pdf + form}

Author: Anir-Ln

src/App.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { useState } from 'react'
 import { Viewer, Worker, Popover, Position, Tooltip} from '@react-pdf-viewer/core';
 import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
 import { searchPlugin } from '@react-pdf-viewer/search';
+import SelectionHandler from './SelectionHandler';
+import PhraseForm from './PhraseForm'
 
 // Import styles
 import '@react-pdf-viewer/search/lib/styles/index.css';
@@ -10,6 +13,19 @@ import '@react-pdf-viewer/core/lib/styles/index.css';
 import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 
 const App = () => {
+    const [phrase, setPhrase] = useState('')
+    const [context, setContext] = useState('')
+
+    const onSelectionChange = (selection) => {
+        setContext(selection.anchorNode.data)
+        setPhrase(selection.toString())
+        console.log(selection);
+    }
+
+    const onSavePhrase = (phrase, context, meaning) => {
+        console.log("here: " + phrase);
+        setData([...data, phrase])
+    }
 
     const renderHighlights = React.useCallback(
         (renderProps) => {
@@ -70,7 +86,7 @@ const App = () => {
 
 
 
-    const data = ['Liberation', 'National Security', 'throughout', 'Cybersecurity was by then already a hot topic', 'conference', 'This project', 'should', 'States', 'Group', 'Opening', 'pdf', 'example', 'File', 'includes', 'content', 'could', 'new work', 'Parameters', 'agreement']
+    const [data, setData] = useState(['Liberation', 'National Security', 'throughout', 'Cybersecurity was by then already a hot topic', 'conference', 'This project', 'should', 'States', 'Group', 'Opening', 'pdf', 'example', 'File', 'includes', 'content', 'could', 'new work', 'Parameters', 'agreement'])
     const searchPluginInstance = searchPlugin({
         keyword: [
             ...data.map(text => new RegExp(text)) 
@@ -84,22 +100,46 @@ const App = () => {
 
     const defaultLayoutPluginInstance = defaultLayoutPlugin();
 
+
+    const styles = {
+        splitScreen: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+        topPane: {
+            width: '60%',
+        },
+        bottomPane: {
+            width: '40%',
+        },
+    }
+
+
     return (
         <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
-            <div
-                style={{
-                    height: '750px',
-                    width: '900px',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
-                }}
-            >
-                <Viewer
-                    fileUrl={`${process.env.PUBLIC_URL}/pdf-open-parameters.pdf`}
-                    plugins={[defaultLayoutPluginInstance, searchPluginInstance]}
-                />
+            <div style={styles.splitScreen}>
+                <div style={styles.topPane}>
+                <div
+                    style={{
+                        height: '100vh',
+                        // width: '900px',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }}
+                >
+                    <Viewer
+                        fileUrl={`${process.env.PUBLIC_URL}/pdf-open-parameters.pdf`}
+                        plugins={[defaultLayoutPluginInstance, searchPluginInstance]}
+                    />
+                    <SelectionHandler phrase={phrase} onSelectionChange={onSelectionChange}/>
+                </div>
+                </div>
+                <div style={styles.bottomPane}>
+                    <PhraseForm phrase={phrase} context={context} onSavePhrase={onSavePhrase}/> 
+                </div>
             </div>
         </Worker>
+
     );
 };