Add word status

src/components/Modals/TranslationsModal/TranslationsModal.tsx

@@ -15,6 +15,7 @@ import { useModalDialog } from 'hooks/useModalDialog';
 import { useResults } from 'hooks/useResults';
 import { getCyrillic } from 'utils/getCyrillic';
 import { getLatin } from 'utils/getLatin';
+import { getWordStatus } from "utils/getWordStatus";
 import { findIntelligibilityIssues } from "utils/intelligibilityIssues";
 
 import { Table } from 'components/Table';
@@ -98,6 +99,7 @@ export const TranslationsModal =
         }, []);
 
         const hasMarks = new Set(Object.values(marks).filter(Boolean)).size > 0;
+        const wordStatus = getWordStatus(item)
         const extraLegend = hasMarks && (<>
             <br/>
                 ⚠️ – {t('translationsLegendIntelligibilityWarning')}.<br/>
@@ -119,6 +121,11 @@ export const TranslationsModal =
                     </button>
                 </div>
                 <div className="modal-dialog__body">
+                    {wordStatus && (
+                        <div>
+                            {wordStatus.icon}&nbsp;{t(wordStatus.text)}
+                        </div>
+                    )}
                     <Table data={tableData}/>
                 </div>
                 <footer className="modal-dialog__footer">

src/components/ResultsCard/ResultCard.stories.ts

@@ -23,6 +23,7 @@ const enIsvItemMock = {
     "caseInfo": "",
     "details": "m.anim.",
     "ipa": "kɔt",
+    "id": "1093",
     "checked": true,
     "raw": ["1093", "kot", "", "m.anim.", "cat, tom-cat", "кот", "кот", "кіт", "kot, kocur", "kocour, kot", "kocúr, kot", "!Mačka", "mačak, mačor", "мачак, мачор", "мачор", "котарак", "!"],
     "from": "en",
@@ -40,6 +41,7 @@ const isvEnItemMock = {
     "caseInfo": "",
     "details": "m.anim.",
     "ipa": "kɔt",
+    "id": "1093",
     "checked": true,
     "raw": ["1093", "kot", "", "m.anim.", "cat, tom-cat", "кот", "кот", "кіт", "kot, kocur", "kocour, kot", "kocúr, kot", "!Mačka", "mačak, mačor", "мачак, мачор", "мачор", "котарак", "!"],
     "from": "isv",

src/components/ResultsCard/ResultsCard.tsx

@@ -11,7 +11,7 @@ import { Dictionary, ITranslateResult } from 'services/dictionary';
 import { useAlphabets } from 'hooks/useAlphabets';
 import { useCaseQuestions } from 'hooks/useCaseQuestions';
 import { useLang } from 'hooks/useLang';
-import { estimateIntelligibility, hasIntelligibilityIssues } from "utils/intelligibilityIssues";
+import { getWordStatus } from "utils/getWordStatus";
 import { toQueryString } from 'utils/toQueryString';
 import { getPartOfSpeech } from 'utils/wordDetails';
 import { wordHasForms } from 'utils/wordHasForms';
@@ -81,27 +81,42 @@ function renderOriginal(item, alphabets, caseQuestions) {
                 return (
                     <span className="word" key={i}>
                         <Clipboard str={str} />
-                        {caseInfo && <> <span className="caseInfo">({caseInfo})</span></>}
+                        {caseInfo && <span className="caseInfo">({caseInfo})</span>}
                     </span>
                 );
             })} 
             {!caseQuestions && item.caseInfo &&
-                 <> <span className="caseInfo">(+{t(`case${item.caseInfo.slice(1)}`)})</span></>
+                <span className="caseInfo">(+{t(`case${item.caseInfo.slice(1)}`)})</span>
             }
-            {item.ipa && <> <span className="ipa">[{item.ipa}]</span></>}
+            {item.ipa && <span className="ipa">[{item.ipa}]</span>}
         </>
     );
 }
 
+const WordStatus = ({ item, onClick }: { item: ITranslateResult, onClick: () => void }) => {
+    const wordStatus = getWordStatus(item)
+
+    if (wordStatus) {
+        return (
+            <button
+                key="wordStatus"
+                onClick={onClick}
+                className="results-card__status"
+                title={t(wordStatus.text)}
+            >
+                {wordStatus.icon}
+            </button>
+        );
+    }
+}
+
 export const ResultsCard =
     ({ item, short, index }: IResultsCardProps) => {
         const alphabets = useAlphabets();
         const caseQuestions = useCaseQuestions();
         const wordId = Dictionary.getField(item.raw, 'id')?.toString();
         const pos = getPartOfSpeech(item.details);
         const dispatch = useDispatch();
-        const intelligibility = Dictionary.getField(item.raw, 'intelligibility');
-        const intelligibilityVector = estimateIntelligibility(intelligibility);
         const lang = useLang();
 
         const showTranslations = () => {
@@ -167,14 +182,7 @@ export const ResultsCard =
                         <Clipboard str={item.translate} />
                     ) : renderOriginal(item, alphabets, caseQuestions)}
                     {'\u00A0'}
-                    { hasIntelligibilityIssues(intelligibilityVector)
-                        ? <button
-                            key="intelligibilityIssues"
-                            onClick={showTranslations}
-                            className={classNames({ 'results-card__status': true })}
-                            title={t('intelligibilityIssues')}>⚠️</button>
-                        : undefined
-                    }
+                    <WordStatus item={item} onClick={showTranslations}/>
                     {item.to === 'isv' && short && (
                         <>
                             &nbsp;

src/index.tsx

@@ -19,11 +19,10 @@ declare global {
 
 setInitialPage();
 
-if ('serviceWorker' in navigator) {
+if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     navigator.serviceWorker.register(`sw.js`, { scope: '.' });
 }
 
-
 const root = createRoot(document.getElementById('app'));
 
 root.render(

src/services/dictionary.ts

@@ -142,6 +142,10 @@ export interface ITranslateResult {
     to: string;
     checked: boolean;
     raw: string[];
+    id: string;
+    new?: boolean;
+    intelligibility?: string;
+    remove?: boolean;
 }
 
 class DictionaryClass {
@@ -507,13 +511,15 @@ class DictionaryClass {
     ): ITranslateResult[] {
         return results.map((item) => {
             const isv = this.getField(item, 'isv');
+            const id = this.getField(item, 'id');
             const addArray = this.getField(item, 'addition').match(/\(.+?\)/) || [];
             const add = addArray.find((elem) => !elem.startsWith('(+')) || '';
             let caseInfo = convertCases(addArray.find((elem) => elem.startsWith('(+'))?.slice(1,-1) || '');
             if(caseInfo && caseQuestions) {
                 caseInfo = getCaseTips(caseInfo.slice(1),'nounShort');
             }
             const translate = this.getField(item, (from === 'isv' ? to : from));
+            const remove = isv.startsWith('!');
             const formattedItem: ITranslateResult = {
                 translate: removeExclamationMark(translate),
                 original: getLatin(isv, flavorisationType),
@@ -523,9 +529,13 @@ class DictionaryClass {
                 ipa: latinToIpa(getLatin(removeBrackets(isv, '[', ']'), flavorisationType)),
                 checked: translate[0] !== '!',
                 raw: item,
+                new: id.startsWith('-'),
+                intelligibility: this.getField(item, 'intelligibility'),
+                remove,
                 from,
                 to,
-                isv,
+                isv: remove ? isv.substring(1) : isv,
+                id,
             };
             if (alphabets?.cyrillic) {
                 formattedItem.originalCyr = getCyrillic(isv, flavorisationType);

src/translations/data.json

@@ -3243,7 +3243,7 @@
   },
   "intelligibilityIssues": {
     "en": "The word is not universally intelligible across Slavic languages",
-    "isv": "Slovo ne je universalno razumljivo vo vsih slovjanskyh jezykah",
+    "isv": "Slovo ne je universalno razumlivo vo vsih slovjanskyh jezykah",
     "ru": "Слово не является универсально понятным во всех славянских языках",
     "uk": "Слово не є універсально зрозумілим у всіх слов'янських мовах",
     "be": "Слова не з’яўляецца ўніверсальна зразумелым ва ўсіх славянскіх мовах",
@@ -3255,5 +3255,35 @@
     "sr": "Реч није универзално разумљива у свим словенским језицима",
     "mk": "Зборот не е универзално разбирлив во сите словенски јазици",
     "bg": "Думата не е универсално разбираема във всички слаавянски езици"
+  },
+  "suggestedNewWord": {
+    "en": "The word was recently added and has not yet been approved",
+    "isv": "Slovo bylo dodano nedavno i ješče ne jest odobrjeno",
+    "ru": "Слово добавлено недавно и ещё не утверждено",
+    "uk": "Слово було нещодавно додано та ще не затверджено",
+    "be": "Слова было нядаўна дададзена і яшчэ не зацверджана",
+    "pl": "Słowo zostało dodane niedawno i jeszcze nie zostało zatwierdzone",
+    "cs": "Slovo bylo nedávno přidáno a ještě nebylo schváleno",
+    "sk": "Slovo bolo nedávno pridané a ešte nebolo schválené",
+    "sl": "Beseda je bila nedavno dodana in še ni bila odobrena",
+    "hr": "Riječ je nedavno dodana i još nije odobrena",
+    "sr": "Реч је недавно додата и још увек није одобрена",
+    "mk": "Зборот неодамна беше додаден и сè уште не е одобрен",
+    "bg": "Думата беше добавена наскоро и все още не е одобрена"
+  },
+  "suggestedForRemoval": {
+    "en": "Suggested for removal from the dictionary",
+    "isv": "Prědloženo do udaljeńja iz slovnika",
+    "ru": "Предложено для удаления из словаря",
+    "uk": "Пропонується до видалення зі словника",
+    "be": "Прапануецца выдаліць са слоўніка",
+    "pl": "Sugerowane usunięcie ze słownika",
+    "cs": "Doporučeno k odstranění ze slovníku",
+    "sk": "Navrhnuté na odstránenie zo slovníka",
+    "sl": "Predlagano za odstranitev iz slovarja",
+    "hr": "Predloženo za uklanjanje iz rječnika",
+    "sr": "Предложено за уклањање из речника",
+    "mk": "Предложено за отстранување од речникот",
+    "bg": "Предлага се за премахване от речника"
   }
 }

src/utils/getWordStatus/getWordStatus.ts

@@ -0,0 +1,33 @@
+import { ITranslateResult } from "services/dictionary";
+
+import { estimateIntelligibility, hasIntelligibilityIssues } from "utils/intelligibilityIssues";
+
+interface IWordStatus {
+    icon: string;
+    text: string;
+}
+
+export const getWordStatus = (item: ITranslateResult): IWordStatus | undefined => {
+    const intelligibilityVector = estimateIntelligibility(item.intelligibility);
+
+    if (hasIntelligibilityIssues(intelligibilityVector)) {
+        return {
+            icon: '⚠️',
+            text: 'intelligibilityIssues',
+        }
+    }
+
+    if (item.new) {
+        return {
+            icon: '🌱',
+            text: 'suggestedNewWord',
+        }
+    }
+
+    if (item.remove) {
+        return {
+            icon: '⛔️',
+            text: 'suggestedForRemoval',
+        }
+    }
+}

src/utils/getWordStatus/index.ts

@@ -0,0 +1 @@
+export { getWordStatus } from './getWordStatus';