#32 star added

ufal · Mar 29, 2022 · 83996d6 · 83996d6
1 parent 2019e72
commit 83996d6
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 33 deletions.
diff --git a/src/components/TranslationHistory.js b/src/components/TranslationHistory.js
@@ -2,13 +2,25 @@ import React, { useState } from "react";
 import {
 	Drawer,
 	IconButton,
+	Button,
 	List,
 	ListItemButton,
 	ListItemText,
 	ListSubheader,
 	Tooltip,
 } from "@mui/material";
-import { History as HistoryIcon } from "@mui/icons-material";
+import {
+	History as HistoryIcon,
+	Star as StarIcon,
+	StarBorder as StarBorderIcon,
+} from "@mui/icons-material";
+
+import {
+	changeStarInHistory,
+	removeItemFromHistory,
+} from "../history";
+
+import styles from "./TranslationHistory.module.scss"
 
 
 export function TranslationHistory({ getHistory, onSelect }) {
@@ -25,25 +37,23 @@ export function TranslationHistory({ getHistory, onSelect }) {
 		setHistory(getHistory());
 	}
 
-	function selectItem(text) {
-		onSelect(text);
+	function selectItem(item) {
+		onSelect(item.text, item.fromLanguageId, item.toLanguageId);
 		setHistoryOpen(false);
 	}
 
 	return (
 		<div>
-			<div>
-				<Tooltip title="History">
-					<IconButton
-						aria-label="history"
-						size="large"
-						onClick={open}
-						sx={{ padding: 0 }}
-					>
-						<HistoryIcon fontSize="inherit" />
-					</IconButton>
-				</Tooltip>
-			</div>
+			<Tooltip title="History">
+				<IconButton
+					aria-label="history"
+					size="large"
+					onClick={open}
+					sx={{ padding: 0 }}
+				>
+					<HistoryIcon fontSize="inherit" />
+				</IconButton>
+			</Tooltip>
 
 			<Drawer
 				open={historyOpen}
@@ -57,15 +67,26 @@ export function TranslationHistory({ getHistory, onSelect }) {
 					component="nav"
 					aria-labelledby="nested-list-subheader"
 					subheader={
-						<ListSubheader component="div" id="nested-list-subheader">
+						<ListSubheader component="div" id="nested-list-subheader" className={styles.header}>
 							History
 						</ListSubheader>
 					}
 				>
-					{history.map((text, i) => (
-						<ListItemButton key={i} onClick={() => selectItem(text)}>
-							<ListItemText primary={text} />
-						</ListItemButton>
+					{history.sort((a,b) => a.star ? -1 : b.star ? 1 : 0).map((value, index) => (
+						<div key={index} className={styles.historyItem}>
+							{ value.star ? 
+								<Button onClick={()=>{changeStarInHistory(value, false); setHistory(getHistory());}}>
+									<StarIcon/>
+								</Button>
+							:
+								<Button onClick={()=>{changeStarInHistory(value, true); setHistory(getHistory());}}>
+									<StarBorderIcon/>
+								</Button>
+							}
+							<ListItemButton onClick={() => selectItem(value)}>
+								<ListItemText primary={`${value.fromLanguageId} => ${value.toLanguageId} : ${value.text}`} />
+							</ListItemButton>
+						</div>
 					))}
 				</List>
 			</Drawer>

diff --git a/src/components/TranslationHistory.module.scss b/src/components/TranslationHistory.module.scss
@@ -0,0 +1,10 @@
+.header{
+	font-weight: bold;
+}
+
+.historyItem{
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	align-items: center;
+	justify-items: start;
+}
diff --git a/src/components/form.js b/src/components/form.js
@@ -15,7 +15,10 @@ import {
 	SwapVert,
 } from "@mui/icons-material";
 
-import { getHistory, saveHistory } from "../history";
+import {
+	getHistory,
+	saveHistory,
+} from "../history";
 import { translate } from "../api";
 import { TranslationHistory } from "./TranslationHistory";
 import { transliterateCyrilToLatin, transliterateLatinToCyril } from "../transliterate";
@@ -64,7 +67,13 @@ const Form = () => {
 		setSource(text);
 		setLoading(true);
 
-		debouncedSave(languages.source, text);
+		if(fromLanguage === languageCs.id)
+			setLanguages((state) => ({ source: languageCs, target: languageUk }));
+		else
+			setLanguages((state) => ({ source: languageUk, target: languageCs }));
+
+
+		debouncedSave(fromLanguage, toLanguage, text);
 		debouncedTranslate({
 			text,
 			fromLanguage,
@@ -96,7 +105,6 @@ const Form = () => {
 		const oldSource = languages.source;
 		const oldTarget = languages.target;
 		setTranslation("");
-		setLanguages((state) => ({ source: state.target, target: state.source }));
 
 		/**/// switch - keep source text as source
 		handleChangeSource(source, oldTarget.id, oldSource.id);
@@ -168,7 +176,7 @@ const Form = () => {
 						</Button>
 					</Tooltip>}
 					<TranslationHistory
-						getHistory={() => getHistory(languages.source)}
+						getHistory={() => getHistory()}
 						onSelect={handleChangeSource}
 					/>
 				</div>

diff --git a/src/history.js b/src/history.js
@@ -1,10 +1,10 @@
-const maxHistory = 100;
+const MAX_HISTORY_COUNT = 100;
 
-export function getHistory(language) {
+export function getHistory() {
 	if (typeof window === "undefined")
 		return [];
-	
-	const historyJson = localStorage.getItem(`history-${language}`) || "";
+
+	const historyJson = localStorage.getItem("translationHistory");
 
 	if (historyJson == null)
 		return [];
@@ -16,13 +16,35 @@ export function getHistory(language) {
 	}
 }
 
-export function saveHistory(language, text) {
+export function saveHistory(fromLanguageId, toLanguageId, text) {
 	if (text === "")
 		return;
 
-	const originalHistory = getHistory(language);
-	const history = [text, ...originalHistory.filter((item) => item !== text)];
-	const limitedHistory = history.slice(0, maxHistory);
+	const historyItem = {
+		fromLanguageId,
+		toLanguageId,
+		text,
+		star: false,
+	}
+
+	let originalHistory = getHistory();
+	let foundDuplicate = originalHistory.findIndex((item) => item.text === text) !== -1;
+
+	if(foundDuplicate){
+		originalHistory.sort((a,b) => a.text === text ? -1 : b.text === text ? 1 : 0);
+	} else {
+		originalHistory.unshift(historyItem);
+	}
+
+	localStorage.setItem("translationHistory", JSON.stringify(originalHistory.slice(0, MAX_HISTORY_COUNT)));
+}
+
+export function removeItemFromHistory(index){
+	localStorage.removeItem(index);
+}
 
-	localStorage.setItem(`history-${language}`, JSON.stringify(limitedHistory));
+export function changeStarInHistory(value, star){
+	let originalHistory = getHistory();
+	originalHistory.find((item) => item.text === value.text && item.fromLanguageId === value.fromLanguageId && item.toLanguageId === value.toLanguageId).star = star;
+	localStorage.setItem("translationHistory", JSON.stringify(originalHistory));
 }