From 927a04778f3a69241530a7487722507f47f8f43a Mon Sep 17 00:00:00 2001
From: Xing Yi <blandilyte@gmail.com>
Date: Thu, 9 Nov 2023 09:29:27 +0800
Subject: [PATCH] feat: cache articles and positions in page

---
 android/app/build.gradle                      |   4 +-
 android/app/src/main/AndroidManifest.xml      |   4 +-
 .../main/play/release-notes/en-US/default.txt |   4 +-
 package.json                                  |   2 +-
 src/components/QueryScreen.js                 | 167 +-----------
 .../QueryScreen/ArticleBottomBar.js           |  12 +-
 src/components/QueryScreen/ArticleView.js     |  81 ++++--
 .../QueryScreen/DictionarySelection.js        |  20 +-
 src/components/QueryScreen/Input.js           |  15 +-
 src/components/QueryScreen/QueryBar.js        |  20 +-
 src/components/QueryScreen/QueryContent.js    |  58 ++---
 src/components/QueryScreen/QueryContext.js    | 241 ++++++++++++++++++
 src/config.js                                 |   3 +-
 13 files changed, 365 insertions(+), 266 deletions(-)
 create mode 100644 src/components/QueryScreen/QueryContext.js

diff --git a/android/app/build.gradle b/android/app/build.gradle
index f172814..eba30be 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -78,8 +78,8 @@ android {
 		applicationId "com.gmail.blandilyte.silverdict"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 5
-		versionName "1.0.7"
+		versionCode 6
+		versionName "1.1.0"
 	}
 	signingConfigs {
 		debug {
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 6a372ce..dc5a24a 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,8 +1,8 @@
 <manifest
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	package="com.gmail.blandilyte.silverdict"
-	android:versionCode="5"
-	android:versionName="1.0.7">
+	android:versionCode="6"
+	android:versionName="1.1.0">
 
 	<uses-permission android:name="android.permission.INTERNET" />
 
diff --git a/android/app/src/main/play/release-notes/en-US/default.txt b/android/app/src/main/play/release-notes/en-US/default.txt
index 7bd1cd9..011be38 100644
--- a/android/app/src/main/play/release-notes/en-US/default.txt
+++ b/android/app/src/main/play/release-notes/en-US/default.txt
@@ -1,2 +1,2 @@
-Fix:
-Retain the old search term when a suggestion is selected. This is the behaviour of GoldenDict.
\ No newline at end of file
+New Feature:
+Caching the search results in memory.
\ No newline at end of file
diff --git a/package.json b/package.json
index 3b20f06..f822d7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SilverDict",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
diff --git a/src/components/QueryScreen.js b/src/components/QueryScreen.js
index 17ef66b..68e40e9 100644
--- a/src/components/QueryScreen.js
+++ b/src/components/QueryScreen.js
@@ -1,164 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-import { loadDataFromJsonResponse } from '../utils';
+import { QueryProvider } from './QueryScreen/QueryContext';
 import QueryBar from './QueryScreen/QueryBar';
 import QueryContent from './QueryScreen/QueryContent';
-import { useAppContext } from '../AppContext';
-import { localisedStrings } from '../translations/l10n';
 
 export default function QueryScreen({ navigation }) {
-	const { serverAddress, dictionaries, groups, groupings, history, setHistory, sizeSuggestion } = useAppContext();
-	const apiPrefix = `${serverAddress}/api`;
-	const [query, setQuery] = useState('');
-	const textInputRef = useRef(null);
-
-	const [localHistory, setLocalHistory] = useState([]);
-	const [locationInLocalHistory, setLocationInLocalHistory] = useState(0);
-
-	const [latestSuggestionsTimestamp, setLatestSuggestionsTimestamp] = useState(0);
-	const [suggestions, setSuggestions] = useState([]);
-
-	const [nameActiveGroup, setNameActiveGroup] = useState('Default Group');
-
-	const [article, setArticle] = useState('');
-	const [namesActiveDictionaries, setNamesActiveDictionaries] = useState([]);
-	const [nameDictionaryToJumpTo, setNameDictionaryToJumpTo] = useState('');
-
-	useEffect(function() {
-		setNameActiveGroup('Default Group');
-	}, [groups.length]);
-
-	useEffect(function () {
-		if (query.length === 0) {
-			setLatestSuggestionsTimestamp(Date.now());
-			setSuggestions(['']);
-			resetNamesActiveDictionaries();
-		} else {
-			fetch(`${apiPrefix}/suggestions/${nameActiveGroup}/${encodeURIComponent(query)}?timestamp=${Date.now()}`)
-				.then(loadDataFromJsonResponse)
-				.then((data) => {
-					if (data['timestamp'] > latestSuggestionsTimestamp) {
-						setLatestSuggestionsTimestamp(data['timestamp']);
-						// Filter out empty suggestions
-						const newSuggestions = data['suggestions'].filter((suggestion) => suggestion.length > 0);
-						if (newSuggestions.length > 0) {
-							setSuggestions(newSuggestions);
-						} else {
-							setSuggestions(['']);
-						}
-					}
-				})
-				.catch((error) => {
-					alert(localisedStrings['query-screen-failure-fetch-suggestions']);
-				});
-		}
-	}, [dictionaries, groupings, nameActiveGroup, query, sizeSuggestion]);
-
-	useEffect(function() {
-		search(query);
-	}, [nameActiveGroup]);
-
-	function search(newQuery) {
-		if (newQuery.length === 0) {
-			return;
-		}
-
-		try {
-			newQuery = decodeURIComponent(newQuery);
-			// setQuery(newQuery);
-			newQuery = encodeURIComponent(newQuery);
-		}
-		catch (error) {
-			// setQuery(newQuery);
-			newQuery = encodeURIComponent(newQuery);
-		}
-
-		fetch(`${apiPrefix}/query/${nameActiveGroup}/${newQuery}?dicts=True`)
-			.then(loadDataFromJsonResponse)
-			.then((data) => {
-				setArticle(data['articles']);
-				setNamesActiveDictionaries(data['dictionaries']);
-
-				fetch(`${apiPrefix}/management/history`)
-					.then(loadDataFromJsonResponse)
-					.then((data) => {
-						setHistory(data);
-					});
-			})
-			.catch((error) => {
-				resetNamesActiveDictionaries();
-				alert(localisedStrings['query-screen-failure-fetch-articles']);
-			});
-	}
-
-	function setQueryAndFocusOnInput(newQuery) {
-		setQuery(newQuery);
-		textInputRef.current.focus();
-	}
-
-	function resetNamesActiveDictionaries() {
-		if (groupings[nameActiveGroup]) {
-			const dictionariesInGroup = [];
-			for (let dictionary of dictionaries) {
-				if (groupings[nameActiveGroup].includes(dictionary.name)) {
-					dictionariesInGroup.push(dictionary.name);
-				}
-			}
-			setNamesActiveDictionaries(dictionariesInGroup);
-		}
-	}
-
-	function searchBranching(newQuery) {
-		search(newQuery);
-		// If the current location is not the end of the local history, pop to the current location
-		setLocationInLocalHistory(localHistory.length);
-		setLocalHistory([...localHistory.slice(0, locationInLocalHistory + 1), newQuery]);
-	}
-
-	function searchInLocalHistory(direction) {
-		search(localHistory[locationInLocalHistory + direction]);
-		setLocationInLocalHistory(locationInLocalHistory + direction);
-	}
-
-	function handleInputSubmit(e) {
-		const firstSuggetion = suggestions[0];
-		if (firstSuggetion && firstSuggetion.length > 0) {
-			searchBranching(firstSuggetion);
-		} else {
-			searchBranching(query);
-		}
-	}
 
 	return (
-		<View style={{ flex: 1 }}>
-			<QueryBar
-				openDrawer={navigation.openDrawer}
-				query={query}
-				setQuery={setQuery}
-				textInputRef={textInputRef}
-				handleInputSubmit={handleInputSubmit}
-				setArticle={setArticle}
-				dictionaries={dictionaries}
-				groups={groups}
-				groupings={groupings}
-				nameActiveGroup={nameActiveGroup}
-				setNameActiveGroup={setNameActiveGroup}
-				namesActiveDictionaries={namesActiveDictionaries}
-				setNameDictionaryToJumpTo={setNameDictionaryToJumpTo}
-			/>
-			<QueryContent
-				serverAddress={serverAddress}
-				queryIsEmpty={query.length === 0}
-				history={history}
-				suggestions={suggestions}
-				search={searchBranching}
-				article={article}
-				nameDictionaryToJumpTo={nameDictionaryToJumpTo}
-				setQuery={setQueryAndFocusOnInput}
-				searchInLocalHistory={searchInLocalHistory}
-				ableToGoBack={locationInLocalHistory > 0}
-				ableToGoForward={locationInLocalHistory < localHistory.length - 1}
-			/>
-		</View>
+		<QueryProvider>
+			<View style={{ flex: 1 }}>
+				<QueryBar
+					openDrawer={navigation.openDrawer}
+				/>
+				<QueryContent />
+			</View>
+		</QueryProvider>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/ArticleBottomBar.js b/src/components/QueryScreen/ArticleBottomBar.js
index 277b7e8..39897ec 100644
--- a/src/components/QueryScreen/ArticleBottomBar.js
+++ b/src/components/QueryScreen/ArticleBottomBar.js
@@ -2,13 +2,15 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import { Appbar, TextInput, useTheme } from 'react-native-paper';
 import { TEXT_ZOOM_MAX, TEXT_ZOOM_MIN } from '../../config';
+import { useQueryContext } from './QueryContext';
 import { localisedStrings } from '../../translations/l10n';
 
 const TEXT_ZOOM_STEP = 10;
 
-export default function ArticleBottomBar(props) {
+export default function ArticleBottomBar() {
 	const onSurfaceColour = useTheme().colors.onSurface;
-	const { searchInLocalHistory, ableToGoBack, ableToGoForward, textZoom, setTextZoom, findInPageRef } = props;
+	const { ableToGoBackInHistory, ableToGoForwardInHistory, searchInLocalHistory, textZoom, setTextZoom, findInPageRef } = useQueryContext();
+
 	const [findBarActive, setFindBarActive] = useState(false);
 	const [wordToFind, setWordToFind] = useState('');
 
@@ -69,7 +71,7 @@ export default function ArticleBottomBar(props) {
 			<Appbar>
 				<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
 					{
-						ableToGoBack ?
+						ableToGoBackInHistory ?
 							<Appbar.Action
 								icon='arrow-left'
 								color={onSurfaceColour}
@@ -79,7 +81,7 @@ export default function ArticleBottomBar(props) {
 								color={onSurfaceColour} />
 					}
 					{
-						ableToGoForward ?
+						ableToGoForwardInHistory ?
 							<Appbar.Action
 								icon='arrow-right'
 								color={onSurfaceColour}
@@ -103,4 +105,4 @@ export default function ArticleBottomBar(props) {
 				</View>
 			</Appbar>
 		);
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/ArticleView.js b/src/components/QueryScreen/ArticleView.js
index 0221239..6a585e7 100644
--- a/src/components/QueryScreen/ArticleView.js
+++ b/src/components/QueryScreen/ArticleView.js
@@ -1,13 +1,15 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
 import AutoHeightWebView from 'react-native-autoheight-webview';
 import { Button, Dialog, Portal, Text, useTheme } from 'react-native-paper';
+import { ADDITIONAL_GOOGLE_FONTS, SEPARATOR } from '../../config';
 import { useAppContext } from '../../AppContext';
+import { useQueryContext } from './QueryContext';
 import { localisedStrings } from '../../translations/l10n';
-import { ADDITIONAL_GOOGLE_FONTS } from '../../config';
 
 function ConfirmSearchDialogue(props) {
-	const { visible, wordSelected, setWordSelected, setQuery, search } = props;
+	const { visible, wordSelected, setWordSelected } = props;
+	const { searchBranching, setQueryAndFocusOnInput } = useQueryContext();
 
 	return (
 		<Portal>
@@ -24,13 +26,13 @@ function ConfirmSearchDialogue(props) {
 						{localisedStrings['generic-no']}
 					</Button>
 					<Button onPress={() => {
-						setQuery(wordSelected);
+						setQueryAndFocusOnInput(wordSelected);
 						setWordSelected('');
 					}}>
 						{localisedStrings['generic-edit']}
 					</Button>
 					<Button onPress={() => {
-						search(wordSelected);
+						searchBranching(wordSelected);
 						setWordSelected('');
 					}}>
 						{localisedStrings['generic-yes']}
@@ -42,7 +44,6 @@ function ConfirmSearchDialogue(props) {
 }
 
 const clickListenersScript = `
-window.scrollTo(0, 0);
 let wordToFind = '';
 document.addEventListener('click', function (event) {
 	if (event.target.matches('a')) {
@@ -93,9 +94,10 @@ articleElement.addEventListener('click', function (event) {
 	window.ReactNativeWebView.postMessage(word);
 });`
 
-export default function ArticleView(props) {
-	const { serverAddress, article, textZoom, nameDictionaryToJumpTo, search, setQuery, findInPageRef } = props;
-	const { fontFamily, darkTextColour, scriptsWithAdditionalFonts } = useAppContext();
+export default function ArticleView() {
+	const { serverAddress, fontFamily, darkTextColour, scriptsWithAdditionalFonts } = useAppContext();
+	const { article, textZoom, findInPageRef, jumpToDictionaryRef, getPositionInPageRef, localHistoryRef, positionInLocalHistoryRef, searchBranching, setArticle, search, setPositionInLocalHistory, setNamesActiveDictionaries } = useQueryContext();
+
 	const webref = useRef(null);
 	const [wordSelected, setWordSelected] = useState('');
 
@@ -147,7 +149,8 @@ export default function ArticleView(props) {
 [style*="color: olive;"]          { color: #F0E68C !important; }
 [style*="color: darkolivegreen;"] { color: #ADFF2F !important; }
 [style*="color: olivedrab;"]      { color: #ADFF2F !important; }
-[style*="color: grey;"]           { color: #887C66 !important; }
+[style*="color: grey;"]           { color: #008080 !important; }
+[style*="color: teal;"]           { color: #008080 !important; }
 
 body {
 	color: ${darkTextColour} !important;
@@ -163,14 +166,6 @@ a {
 }
 `
 
-	useEffect(function () {
-		if (nameDictionaryToJumpTo.length > 0) {
-			webref.current.injectJavaScript(`
-				document.getElementById('${nameDictionaryToJumpTo}').scrollIntoView();
-			`);
-		}
-	}, [nameDictionaryToJumpTo]);
-
 	return (
 		<View style={{ flex: 1 }}>
 			<AutoHeightWebView
@@ -224,18 +219,60 @@ ${useTheme().dark ? darkTextColourStylesheet : ''}
 				onLoadEnd={() => {
 					webref.current.injectJavaScript(clickListenersScript);
 					webref.current.requestFocus();
+
+					let positionToScrollTo = 0;
+					try {
+						positionToScrollTo = localHistoryRef.current[positionInLocalHistoryRef.current].position;
+					} catch (error) {
+					}
+					webref.current.injectJavaScript(`
+						window.scrollTo(0, ${positionToScrollTo});
+					`);
+
 					findInPageRef.current = function (wordToFind, isBackwards) {
 						webref.current.injectJavaScript(`
 							wordToFind = '${wordToFind}';
 							window.find(wordToFind, false, ${isBackwards}, true, false, false);
 						`);
-					}
+					};
+					jumpToDictionaryRef.current = function (nameDictionaryToJumpTo) {
+						webref.current.injectJavaScript(`
+							document.getElementById('${nameDictionaryToJumpTo}').scrollIntoView();
+						`);
+					};
+					getPositionInPageRef.current = function (callbackType, argument) {
+						let message = '!POS!' + callbackType;
+						if (callbackType !== 1) {
+							message += SEPARATOR + argument + SEPARATOR;
+						}
+						webref.current.injectJavaScript(`
+							window.ReactNativeWebView.postMessage('${message}' + window.scrollY);
+						`);
+					};
 				}}
 				onMessage={(event) => {
 					const message = event.nativeEvent.data;
 					if (message.startsWith('!!S!!')) {
 						const query = message.substring(5);
-						search(query);
+						searchBranching(query);
+					} else if (message.startsWith('!POS!')) {
+						const callbackType = parseInt(message.substring(5, 6));
+						if (callbackType === 1) {
+							setArticle('');
+							localHistoryRef.current[positionInLocalHistoryRef.current].position = parseFloat(message.substring(6));
+						} else {
+							const [argument, position] = message.substring(7).split(SEPARATOR);
+							localHistoryRef.current[positionInLocalHistoryRef.current].position = parseFloat(position);
+							if (callbackType === 2) {
+								search(argument);
+							} else if (callbackType === 3) {
+								const direction = parseInt(argument);
+								const newPosition = positionInLocalHistoryRef.current + direction;
+								setPositionInLocalHistory(newPosition);
+								setArticle(localHistoryRef.current[newPosition].article);
+								setNamesActiveDictionaries(localHistoryRef.current[newPosition].dictionaries);
+							}
+						}
 					} else {
 						setWordSelected(message);
 					}
@@ -245,9 +282,7 @@ ${useTheme().dark ? darkTextColourStylesheet : ''}
 				visible={wordSelected.length > 0}
 				wordSelected={wordSelected}
 				setWordSelected={setWordSelected}
-				setQuery={setQuery}
-				search={search}
 			/>
 		</View>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/DictionarySelection.js b/src/components/QueryScreen/DictionarySelection.js
index 02cf8e7..5b1c178 100644
--- a/src/components/QueryScreen/DictionarySelection.js
+++ b/src/components/QueryScreen/DictionarySelection.js
@@ -2,16 +2,20 @@ import React from 'react';
 import { FlatList } from 'react-native';
 import { List, Modal, Portal, useTheme } from 'react-native-paper';
 import RNPickerSelect from 'react-native-picker-select';
+import { useAppContext } from '../../AppContext';
+import { useQueryContext } from './QueryContext';
 
 function DictionaryItem(props) {
-	const { name, displayName, setNameDictionaryToJumpTo, setVisible } = props;
+	const { name, displayName, setVisible, jumpToDictionaryRef } = props;
 
 	return (
 		<List.Item
 			title={displayName}
 			onPress={(e) => {
-				setNameDictionaryToJumpTo(name);
-				setVisible(false);
+				if (jumpToDictionaryRef.current) {
+					jumpToDictionaryRef.current(name);
+					setVisible(false);
+				}
 			}}
 		/>
 	);
@@ -19,7 +23,9 @@ function DictionaryItem(props) {
 
 export default function DictionarySelection(props) {
 	const theme = useTheme();
-	const { visible, setVisible, dictionaries, groups, groupings, nameActiveGroup, setNameActiveGroup, namesActiveDictionaries, setNameDictionaryToJumpTo } = props;
+	const { dictionaries, groups, groupings } = useAppContext();
+	const { nameActiveGroup, setNameActiveGroup, namesActiveDictionaries, jumpToDictionaryRef } = useQueryContext();
+	const { visible, setVisible } = props;
 
 	return (
 		<Portal>
@@ -63,8 +69,8 @@ export default function DictionarySelection(props) {
 								<DictionaryItem
 									name={item.name}
 									displayName={item.displayName}
-									setNameDictionaryToJumpTo={setNameDictionaryToJumpTo}
-									setVisible={setVisible} />}
+									setVisible={setVisible}
+									jumpToDictionaryRef={jumpToDictionaryRef} />}
 							keyExtractor={(item) => item.name}
 						/>
 					</>
@@ -72,4 +78,4 @@ export default function DictionarySelection(props) {
 			</Modal>
 		</Portal>
 	)
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/Input.js b/src/components/QueryScreen/Input.js
index cac2790..52126b0 100644
--- a/src/components/QueryScreen/Input.js
+++ b/src/components/QueryScreen/Input.js
@@ -1,17 +1,14 @@
 import React, { useEffect } from 'react';
 import { TextInput, useTheme } from 'react-native-paper';
 import { isRTL } from '../../utils';
+import { useQueryContext } from './QueryContext';
 import { localisedStrings } from '../../translations/l10n';
 
-export default function Input(props) {
-	const { query, setQuery, textInputRef, handleInputSubmit, setArticle } = props;
-
-	function handleQueryChange(newQuery) {
-		setQuery(newQuery);
-	}
+export default function Input() {
+	const { query, setQuery, textInputRef, handleInputSubmit, clearArticle } = useQueryContext();
 
 	function handleInputFocus(e) {
-		setArticle('');
+		clearArticle();
 	}
 
 	useEffect(function () {
@@ -32,7 +29,7 @@ export default function Input(props) {
 			activeUnderlineColor='transparent'
 			placeholder={localisedStrings['placeholder-search']}
 			value={query}
-			onChangeText={handleQueryChange}
+			onChangeText={setQuery}
 			onFocus={handleInputFocus}
 			selectTextOnFocus={true}
 			autoFocus={true}
@@ -43,4 +40,4 @@ export default function Input(props) {
 			onSubmitEditing={handleInputSubmit}
 		/>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/QueryBar.js b/src/components/QueryScreen/QueryBar.js
index 6f329b3..9c8090e 100644
--- a/src/components/QueryScreen/QueryBar.js
+++ b/src/components/QueryScreen/QueryBar.js
@@ -5,7 +5,6 @@ import Input from './Input';
 import DictionarySelection from './DictionarySelection';
 
 export default function QueryBar(props) {
-	const { openDrawer, query, setQuery, textInputRef, handleInputSubmit, setArticle, dictionaries, groups, groupings, nameActiveGroup, setNameActiveGroup, namesActiveDictionaries, setNameDictionaryToJumpTo } = props;
 	const [dictionarySelectionVisible, setDictionarySelectionVisible] = useState(false);
 
 	return (
@@ -14,28 +13,15 @@ export default function QueryBar(props) {
 		>
 			<Appbar.Action
 				icon='menu'
-				onPress={() => { Keyboard.dismiss(); openDrawer(); }} />
-			<Input
-				query={query}
-				setQuery={setQuery}
-				textInputRef={textInputRef}
-				handleInputSubmit={handleInputSubmit}
-				setArticle={setArticle}
-			/>
+				onPress={() => { Keyboard.dismiss(); props.openDrawer(); }} />
+			<Input />
 			<Appbar.Action
 				icon='bookshelf'
 				onPress={() => { Keyboard.dismiss(); setDictionarySelectionVisible(true) }} />
 			<DictionarySelection
 				visible={dictionarySelectionVisible}
 				setVisible={setDictionarySelectionVisible}
-				dictionaries={dictionaries}
-				groups={groups}
-				groupings={groupings}
-				nameActiveGroup={nameActiveGroup}
-				setNameActiveGroup={setNameActiveGroup}
-				namesActiveDictionaries={namesActiveDictionaries}
-				setNameDictionaryToJumpTo={setNameDictionaryToJumpTo}
 			/>
 		</Appbar.Header>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/components/QueryScreen/QueryContent.js b/src/components/QueryScreen/QueryContent.js
index cb0c585..356e4a0 100644
--- a/src/components/QueryScreen/QueryContent.js
+++ b/src/components/QueryScreen/QueryContent.js
@@ -1,15 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FlatList, View } from 'react-native';
+import React from 'react';
+import { FlatList, Keyboard, View } from 'react-native';
 import { List } from 'react-native-paper';
-import { Keyboard } from 'react-native';
 import ArticleView from './ArticleView';
 import ArticleBottomBar from './ArticleBottomBar';
-import { loadPersistentData, storePersistentData, isRTL } from '../../utils';
-import { DEFAULT_TEXT_ZOOM } from '../../config';
+import { useAppContext } from '../../AppContext';
+import { useQueryContext } from './QueryContext';
+import { isRTL } from '../../utils';
 
 function WordItem(props) {
-	const { word, search } = props;
+	const { word } = props;
 	const wordIsRTL = isRTL(word);
+	const { search } = useQueryContext();
 
 	return (
 		<List.Item
@@ -19,24 +20,10 @@ function WordItem(props) {
 	);
 }
 
-export default function QueryContent(props) {
-	const { serverAddress, queryIsEmpty, history, suggestions, search, article, nameDictionaryToJumpTo, setQuery, searchInLocalHistory, ableToGoBack, ableToGoForward } = props;
-	const wordsToDisplay = queryIsEmpty ? history : suggestions;
-	const findInPageRef = useRef(null);
-	const [textZoom, setTextZoom] = useState('');
-
-	async function loadStoredTextZoom() {
-		const storedTextZoom = await loadPersistentData('textZoom', DEFAULT_TEXT_ZOOM);
-		setTextZoom(parseInt(storedTextZoom));
-	}
-
-	async function storeTextZoom() {
-		await storePersistentData('textZoom', textZoom.toString());
-	}
-
-	useEffect(function () { loadStoredTextZoom(); }, []);
-
-	useEffect(function () { storeTextZoom(); }, [textZoom]);
+export default function QueryContent() {
+	const { history } = useAppContext();
+	const { query, article, suggestions } = useQueryContext();
+	const wordsToDisplay = query.length === 0 ? history : suggestions;
 
 	if (article.length === 0)
 		return (
@@ -44,29 +31,18 @@ export default function QueryContent(props) {
 				<FlatList
 					keyboardShouldPersistTaps='handled'
 					data={wordsToDisplay}
-					renderItem={({ item }) => <WordItem word={item} search={search} />}
+					renderItem={({ item }) => <WordItem word={item} />}
 					keyExtractor={(item) => item}
 				/>
 			</View>
 		);
 	else
 		return (
-			<View style={{ flex: 1 }}>
-				<ArticleView
-					serverAddress={serverAddress}
-					article={article}
-					textZoom={textZoom}
-					nameDictionaryToJumpTo={nameDictionaryToJumpTo}
-					search={search}
-					setQuery={setQuery}
-					findInPageRef={findInPageRef} />
-				<ArticleBottomBar
-					searchInLocalHistory={searchInLocalHistory}
-					ableToGoBack={ableToGoBack}
-					ableToGoForward={ableToGoForward}
-					textZoom={textZoom}
-					setTextZoom={setTextZoom}
-					findInPageRef={findInPageRef} />
+			<View
+				style={{ flex: 1 }}
+			>
+				<ArticleView />
+				<ArticleBottomBar />
 			</View>
 		);
 }
diff --git a/src/components/QueryScreen/QueryContext.js b/src/components/QueryScreen/QueryContext.js
new file mode 100644
index 0000000..cfab94a
--- /dev/null
+++ b/src/components/QueryScreen/QueryContext.js
@@ -0,0 +1,241 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useAppContext } from '../../AppContext';
+import { DEFAULT_TEXT_ZOOM } from '../../config';
+import { loadDataFromJsonResponse, loadPersistentData, storePersistentData } from '../../utils';
+import { localisedStrings } from '../../translations/l10n';
+
+const QueryContext = createContext();
+
+export function QueryProvider({ children }) {
+	const { serverAddress, dictionaries, groups, groupings, setHistory, sizeSuggestion } = useAppContext();
+	const apiPrefix = `${serverAddress}/api`;
+
+	const [query, setQuery] = useState('');
+	const textInputRef = useRef(null);
+
+	const [latestSuggestionsTimestamp, setLatestSuggestionsTimestamp] = useState(0);
+	const [suggestions, setSuggestions] = useState([]);
+
+	const [nameActiveGroup, setNameActiveGroup] = useState('Default Group');
+
+	const [article, setArticle] = useState('');
+
+	const [namesActiveDictionaries, setNamesActiveDictionaries] = useState([]);
+
+	const findInPageRef = useRef(null);
+	const jumpToDictionaryRef = useRef(null);
+
+	const [textZoom, setTextZoom] = useState('');
+
+	async function loadStoredTextZoom() {
+		const storedTextZoom = await loadPersistentData('textZoom', DEFAULT_TEXT_ZOOM);
+		setTextZoom(parseInt(storedTextZoom));
+	}
+
+	async function storeTextZoom() {
+		await storePersistentData('textZoom', textZoom.toString());
+	}
+
+	useEffect(function () { loadStoredTextZoom(); }, []);
+
+	useEffect(function () { storeTextZoom(); }, [textZoom]);
+
+	useEffect(function () {
+		setNameActiveGroup('Default Group');
+	}, [groups.length]);
+
+	useEffect(function () {
+		if (query.length === 0) {
+			setLatestSuggestionsTimestamp(Date.now());
+			setSuggestions(['']);
+			resetNamesActiveDictionaries();
+		} else {
+			fetch(`${apiPrefix}/suggestions/${nameActiveGroup}/${encodeURIComponent(query)}?timestamp=${Date.now()}`)
+				.then(loadDataFromJsonResponse)
+				.then((data) => {
+					if (data['timestamp'] > latestSuggestionsTimestamp) {
+						setLatestSuggestionsTimestamp(data['timestamp']);
+						// Filter out empty suggestions
+						const newSuggestions = data['suggestions'].filter((suggestion) => suggestion.length > 0);
+						if (newSuggestions.length > 0) {
+							setSuggestions(newSuggestions);
+						} else {
+							setSuggestions(['']);
+						}
+					}
+				})
+				.catch((error) => {
+					alert(localisedStrings['query-screen-failure-fetch-suggestions']);
+				});
+		}
+	}, [dictionaries, groupings, nameActiveGroup, query, sizeSuggestion]);
+
+	useEffect(function () {
+		search(query);
+	}, [nameActiveGroup]);
+
+	function search(newQuery) {
+		if (newQuery.length === 0) {
+			return;
+		}
+
+		try {
+			newQuery = decodeURIComponent(newQuery);
+			// setQuery(newQuery);
+			newQuery = encodeURIComponent(newQuery);
+		}
+		catch (error) {
+			// setQuery(newQuery);
+			newQuery = encodeURIComponent(newQuery);
+		}
+
+		fetch(`${apiPrefix}/query/${nameActiveGroup}/${newQuery}?dicts=True`)
+			.then(loadDataFromJsonResponse)
+			.then((data) => {
+				setArticle(data['articles']);
+				setNamesActiveDictionaries(data['dictionaries']);
+
+				if (localHistoryRef.current.length === 0) {
+					localHistoryRef.current.push({
+						article: data['articles'],
+						dictionaries: data['dictionaries'],
+						position: 0
+					});
+					setPositionInLocalHistory(0);
+				} else {
+					localHistoryRef.current = [...localHistoryRef.current.slice(0, positionInLocalHistoryRef.current + 1), {
+						article: data['articles'],
+						dictionaries: data['dictionaries'],
+						position: 0
+					}];
+					setPositionInLocalHistory(localHistoryRef.current.length - 1);
+				}
+
+				fetch(`${apiPrefix}/management/history`)
+					.then(loadDataFromJsonResponse)
+					.then((data) => {
+						setHistory(data);
+					});
+			})
+			.catch((error) => {
+				resetNamesActiveDictionaries();
+				alert(localisedStrings['query-screen-failure-fetch-articles']);
+			});
+	}
+
+	function setQueryAndFocusOnInput(newQuery) {
+		setQuery(newQuery);
+		textInputRef.current.focus();
+	}
+
+	function resetNamesActiveDictionaries() {
+		if (groupings[nameActiveGroup]) {
+			const dictionariesInGroup = [];
+			for (let dictionary of dictionaries) {
+				if (groupings[nameActiveGroup].includes(dictionary.name)) {
+					dictionariesInGroup.push(dictionary.name);
+				}
+			}
+			setNamesActiveDictionaries(dictionariesInGroup);
+		}
+	}
+
+	/**
+	 * This is going to be very ugly but I don't see a clean way to do it.
+	 * Basically I would like to execute three functions after getPositionInPage is executed,
+	 * the problem is, it goes through the web view... So I have to use magic numbers.
+	 * 1. clear article
+	 * 2. search for a new query
+	 * 3. go back/forward in local history
+	 * 
+	 * So the message sent into the web view is going to be in this format:
+	 * 1. !POS!
+	 * 2. 1/2/3 (denotes the type of callback)
+	 * 3. If the callback is the second or the third, then the separator defined in config.js, followed by the argument, and another separator; if it is the first, then nothing.
+	 * 4. The position in page
+	 */
+	const getPositionInPageRef = useRef(null);
+	const positionInLocalHistoryRef = useRef(0);
+	const localHistoryRef = useRef([]);
+
+	const [ableToGoBackInHistory, setAbleToGoBackInHistory] = useState(false);
+	const [ableToGoForwardInHistory, setAbleToGoForwardInHistory] = useState(false);
+	function setPositionInLocalHistory(newPosition) {
+		positionInLocalHistoryRef.current = newPosition;
+		setAbleToGoBackInHistory(newPosition > 0);
+		setAbleToGoForwardInHistory(newPosition < localHistoryRef.current.length - 1);
+	}
+
+	function clearArticle() {
+		if (article.length > 0) {
+			if (getPositionInPageRef.current) {
+				getPositionInPageRef.current(1);
+			}
+			// setArticle('');
+		}
+	}
+
+	function searchBranching(newQuery) {
+		if (getPositionInPageRef.current) {
+			getPositionInPageRef.current(2, newQuery);
+		}
+		// search(newQuery);
+	}
+
+	function searchInLocalHistory(direction) {
+		if (getPositionInPageRef.current) {
+			getPositionInPageRef.current(3, direction);
+		}
+		// setPositionInLocalHistory(positionInLocalHistoryRef.current + direction);
+		// setArticle(localHistoryRef.current[positionInLocalHistoryRef.current].article);
+		// setNamesActiveDictionaries(localHistoryRef.current[positionInLocalHistoryRef.current].dictionaries);
+	}
+
+	function handleInputSubmit(e) {
+		const firstSuggetion = suggestions[0];
+		if (firstSuggetion && firstSuggetion.length > 0) {
+			search(firstSuggetion);
+		} else {
+			search(query);
+		}
+	}
+
+	return (
+		<QueryContext.Provider
+			value={{
+				query,
+				setQuery,
+				textInputRef,
+				suggestions,
+				nameActiveGroup,
+				setNameActiveGroup,
+				article,
+				setArticle,
+				namesActiveDictionaries,
+				setNamesActiveDictionaries,
+				search,
+				searchBranching,
+				searchInLocalHistory,
+				handleInputSubmit,
+				setQueryAndFocusOnInput,
+				textZoom,
+				setTextZoom,
+				findInPageRef,
+				jumpToDictionaryRef,
+				localHistoryRef,
+				positionInLocalHistoryRef,
+				setPositionInLocalHistory,
+				getPositionInPageRef,
+				ableToGoBackInHistory,
+				ableToGoForwardInHistory,
+				clearArticle
+			}}
+		>
+			{children}
+		</QueryContext.Provider>
+	);
+}
+
+export function useQueryContext() {
+	return useContext(QueryContext);
+}
diff --git a/src/config.js b/src/config.js
index f8adfd6..b3d5e86 100644
--- a/src/config.js
+++ b/src/config.js
@@ -63,4 +63,5 @@ export const DEFAULT_ADDITIONAL_GOOGLE_FONTS_ENABLED_STATUS =
 	Object.keys(ADDITIONAL_GOOGLE_FONTS.serif).reduce((status, script) => {
 		status[script] = false;
 		return status;
-	}, {});
\ No newline at end of file
+	}, {});
+export const SEPARATOR = '\x10'; // ASCII Data Link Escape, chosen because it is unlikely to appear in dictionary headwords