Add word status

package.json

@@ -20,11 +20,13 @@
     "start": "npm run dev",
     "storybook": "storybook dev -p 6006",
     "test:pw": "playwright test",
-    "test:unit": "jest --logHeapUsage --coverage --config jest-config.json"
+    "test:unit": "jest --logHeapUsage --coverage --config jest-config.json",
+    "test:dictionary": "cross-env NODE_ENV=production UPDATE_SNAPSHOT=false ts-node -r tsconfig-paths/register ./src/services/dictionary-test",
+    "test:dictionary-update-shanshot": "cross-env NODE_ENV=production UPDATE_SNAPSHOT=false ts-node -r tsconfig-paths/register ./src/services/dictionary-test"
   },
   "pre-commit": [
-    "lint",
-    "stylelint"
+    "lint:fix",
+    "stylelint:fix"
   ],
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "25.2.0",

src/colors.scss

@@ -30,8 +30,8 @@ body {
   --table-highlighted-cell: #81D4FA;
   --table-border-color: var(--gray-9);
   --overlay-color: #000;
-  --tips-font-color: #122f80;
   --main-background-color: #FAFAFA;
+  --tips-background-color: #1976D2;
   --status-badge-color: #fff;
   --dark: #212121;
   --light: #fff;
@@ -53,8 +53,8 @@ body {
   --table-highlighted-cell: #1976D2;
   --table-border-color: var(--gray-9);
   --overlay-color: #000;
-  --tips-font-color: #122f80;
   --main-background-color: #262626;
+  --tips-background-color: #81D4FA;
   --status-badge-color: #fff;
   --dark: #fff;
   --light: #212121;

src/components/Main/Main.tsx

@@ -25,13 +25,15 @@ export const Main =
         const theme = isDarkTheme ? 'dark' : 'light';
 
         useEffect(() => {
-            async function fetchAll() {
+            document.getElementById('app').className='color-theme--' + theme;
+
+            (async () => {
                 await fetchDictionary(dispatch, dictionaryLanguages);
-                await fetchCommunityLinks(dispatch, communityLinks);
-            }
 
-            fetchAll();
-            document.getElementById('app').className='color-theme--' + theme;
+                if (IS_COM) {
+                    await fetchCommunityLinks(dispatch, communityLinks);
+                }
+            })()
         }, [dispatch, dictionaryLanguages, theme]);
 
         return (

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';
@@ -65,15 +66,15 @@ export const TranslationsModal =
                 return [
                     [
                         `{${t('isvEtymologicLatinLang')}}[B]@ts;b;sw=130px;nowrap`,
-                        `${getLatin(translate, '2')}@ts`,
+                        `${getLatin(item.isv, '2')}@ts`,
                     ],
                     [
                         `{${t('isvLatinLang')}}[B]@ts;b`,
-                        `${getLatin(translate, '3')}@ts`,
+                        `${getLatin(item.isv, '3')}@ts`,
                     ],
                     [
                         `{${t('isvCyrillicLang')}}[B]@ts;b`,
-                        `${getCyrillic(translate, '3')}@ts`,
+                        `${getCyrillic(item.isv, '3')}@ts`,
                     ],
                     [
                         `@w=2;S`,
@@ -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/Pages/CommunityPage/CommunityPage.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { t } from 'translations';
@@ -71,32 +71,17 @@ export const CommunityPage = () => {
     const dispatch = useDispatch();
     const communityLinks = useCommunityLinks();
     const online = isOnline();
-    const [isFbAvailable, setFbAvailable] = useState(false);
 
     useEffect(() => {
-        try {
-            fetch('https://www.facebook.com', {
-                mode: 'no-cors',
-                cache: 'no-cache',
-            }).then((res) => {
-                if (res) {
-                    setFbAvailable(true);
-                }
-            });
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (err) {}
-    }, [setFbAvailable]);
-
-    useEffect(() => {
-        if (online && FB && isFbAvailable) {
+        if (online && FB) {
             FB.init({
                 xfbml: true,
                 version: 'v12.0'
             });
 
             dispatch(setBadges([]));
         }
-    }, [communityLinks, isFbAvailable, FB]);
+    }, [communityLinks, FB]);
 
     if (!online) {
         return <OfflinePlaceholder className="community-offline"/>
@@ -106,15 +91,12 @@ export const CommunityPage = () => {
         <div className="community">
             <h1 className="community__title">{t('communityPageTitle')}</h1>
             <p className="community__sub-title">{t('communityPageSubTitle')}</p>
-            {
-                communityLinks
-                    .filter(({ link }) => {
-                        const linkType = getLinkType(link);
-
-                        return linkType === 'facebook' ? isFbAvailable : true;
-                    })
-                    .map((linkData, i) => (<CommunityLink key={i} {...linkData} />))
-            }
+            {communityLinks.map((linkData, i) => (
+                <CommunityLink
+                    key={i}
+                    {...linkData}
+                />
+            ))}
         </div>
     );
 };

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,15 +11,13 @@ 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';
 
 import { Clipboard } from 'components/Clipboard';
 
-import { removeBrackets } from "../../utils/removeBrackets";
-
 import './ResultsCard.scss';
 
 import ErrorIcon from './images/error-icon.svg';
@@ -81,27 +79,41 @@ 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 = () => {
@@ -115,7 +127,7 @@ export const ResultsCard =
             dispatch(showModalDialog({
                 type: MODAL_DIALOG_TYPES.MODAL_DIALOG_WORD_ERROR,
                 data: {
-                    wordId,
+                    wordId: item.id,
                     isvWord: item.original,
                     translatedWord: item.translate,
                 },
@@ -126,7 +138,7 @@ export const ResultsCard =
             dispatch(showModalDialog({
                 type: MODAL_DIALOG_TYPES.MODAL_DIALOG_WORD_FORMS,
                 data: {
-                    word: removeBrackets(Dictionary.getField(item.raw, 'isv'), '[', ']'),
+                    word: item.isv,
                     add: Dictionary.getField(item.raw, 'addition'),
                     details: Dictionary.getField(item.raw, 'partOfSpeech'),
                 },
@@ -136,7 +148,7 @@ export const ResultsCard =
         const shareWord = () => {
             const { origin, pathname } = window.location;
             const query = toQueryString({
-                text: `id${wordId}`,
+                text: `id${item.id}`,
                 lang: `${lang.from}-${lang.to}`,
             });
 
@@ -167,14 +179,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/components/Tips/Tips.scss

@@ -6,7 +6,7 @@
         padding: 0.35rem;
         border-radius: 0.25rem;
         background-color: var(--tips-background-color);
-        color: var(--tips-font-color);
+        color: var(--light);
         white-space: nowrap;
     }
 

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-test/deepDiffMapper.ts

@@ -0,0 +1,74 @@
+export const deepDiffMapper = function () {
+    return {
+        VALUE_CREATED: 'created',
+        VALUE_UPDATED: 'updated',
+        VALUE_DELETED: 'deleted',
+        VALUE_UNCHANGED: 'unchanged',
+        map: function (obj1, obj2) {
+            if (this.isFunction(obj1) || this.isFunction(obj2)) {
+                throw 'Invalid argument. Function given, object expected.';
+            }
+            if (this.isValue(obj1) || this.isValue(obj2)) {
+                return {
+                    type: this.compareValues(obj1, obj2),
+                    data: obj1 === undefined ? obj2 : obj1
+                };
+            }
+
+            const diff = {};
+            for (const key in obj1) {
+                if (this.isFunction(obj1[key])) {
+                    continue;
+                }
+
+                let value2 = undefined;
+                if (obj2[key] !== undefined) {
+                    value2 = obj2[key];
+                }
+
+                diff[key] = this.map(obj1[key], value2);
+            }
+            for (const key in obj2) {
+                if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
+                    continue;
+                }
+
+                diff[key] = this.map(undefined, obj2[key]);
+            }
+
+            return diff;
+
+        },
+        compareValues: function (value1, value2) {
+            if (value1 === value2) {
+                return this.VALUE_UNCHANGED;
+            }
+            if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
+                return this.VALUE_UNCHANGED;
+            }
+            if (value1 === undefined) {
+                return this.VALUE_CREATED;
+            }
+            if (value2 === undefined) {
+                return this.VALUE_DELETED;
+            }
+
+            return this.VALUE_UPDATED;
+        },
+        isFunction: function (x) {
+            return Object.prototype.toString.call(x) === '[object Function]';
+        },
+        isArray: function (x) {
+            return Object.prototype.toString.call(x) === '[object Array]';
+        },
+        isDate: function (x) {
+            return Object.prototype.toString.call(x) === '[object Date]';
+        },
+        isObject: function (x) {
+            return Object.prototype.toString.call(x) === '[object Object]';
+        },
+        isValue: function (x) {
+            return !this.isObject(x) && !this.isArray(x);
+        }
+    }
+}();