#32

src/components/TranslationHistory.js

@@ -74,25 +74,28 @@ export function TranslationHistory({ getHistory, onSelect }) {
 							<ListSubheader component="div" id="nested-list-subheader" className={styles.headerTitle}>
 								History
 							</ListSubheader>
-							<Button
-								onClick={()=>{
-									if(!confirm("Are you sure to remove unstarred items from history?"))
-										return;
+							<Tooltip title="Wipe whole translation history">
+								<Button
+									onClick={()=>{
+										if(!confirm("Are you sure to remove unstarred items from history?"))
+											return;
 
-									let filteredHistory = getHistory().filter((item) => item.star);
+										let filteredHistory = getHistory().filter((item) => item.star);
 
-									localStorage.setItem("translationHistory", JSON.stringify(filteredHistory));
-									setHistory(getHistory());
-								}}
-								color="error">
-								<div>Remove everything</div>
-								<DeleteForeverIcon/>
-							</Button>
+										localStorage.setItem("translationHistory", JSON.stringify(filteredHistory));
+										setHistory(getHistory());
+									}}
+									color="error">
+									<div>Remove everything</div>
+									<DeleteForeverIcon/>
+								</Button>
+							</Tooltip>
 						</div>
 					}
 				>
 					{history.sort((a,b) => a.star ? -1 : b.star ? 1 : 0).map((value, index) => (
 						<div key={index} className={styles.historyItem}>
+							<Tooltip title={value.star ? "Mark as favorite" : "Unmark as favorite"}>
 							{ value.star ? 
 								<Button onClick={()=>{changeStarInHistory(value, false); setHistory(getHistory());}}>
 									<StarIcon/>
@@ -102,16 +105,19 @@ export function TranslationHistory({ getHistory, onSelect }) {
 									<StarBorderIcon/>
 								</Button>
 							}
+							</Tooltip>
 							<ListItemButton onClick={() => selectItem(value)} className={styles.listItemText}>
 								<div>{value.fromLanguageId}</div>
 								<ArrowRightAltIcon/>
 								<div>{value.toLanguageId}</div>
 								<ArrowRightIcon/>
 								<div className={styles.valueText}>{value.text}</div>
 							</ListItemButton>
-							<Button onClick={()=>{removeItemFromHistory(value); setHistory(getHistory());}}>
-								<DeleteIcon/>
-							</Button>
+							<Tooltip title="Remove this from history">
+								<Button onClick={()=>{removeItemFromHistory(value); setHistory(getHistory());}}>
+									<DeleteIcon/>
+								</Button>	
+							</Tooltip>
 						</div>
 					))}
 				</List>

src/components/TranslationHistory.module.scss

@@ -29,4 +29,5 @@
 	font-weight: bold;
     overflow: hidden;
     white-space: nowrap;
+	text-overflow: ellipsis;
 }

src/components/form.js

@@ -30,7 +30,7 @@ import styles from "./form.module.scss"
 
 
 const debouncedTranslate = debounce(translate, 500);
-const debouncedSave = debounce(saveHistory, 5000);
+const debouncedSave = debounce(saveHistory, 3000);
 
 const languageUk = {
 	id: "uk",

src/history.js

@@ -28,10 +28,13 @@ export function saveHistory(fromLanguageId, toLanguageId, text) {
 	}
 
 	let originalHistory = getHistory();
-	let foundDuplicate = originalHistory.findIndex((item) => item.text === text) !== -1;
+	let foundDuplicate = originalHistory.findIndex(
+		(item) => text.length >= item.text.length && text.substr(0,item.text.length) === item.text
+	);
 
-	if(foundDuplicate){
+	if(foundDuplicate !== -1){
 		originalHistory.sort((a,b) => a.text === text ? -1 : b.text === text ? 1 : 0);
+		originalHistory[0].text = text;
 	} else {
 		originalHistory.unshift(historyItem);
 	}