Reimplement translation logic

src/models/subs/index.ts

@@ -42,8 +42,6 @@ export const updatePrevCurrentSubsFx = createEffect<TSub[], TSub[]>((subs) => su
 export const updateCustomSubsFx = createEffect<Captions, Captions>((subs) => subs);
 
 export const $subsDelay = createStore<number>(0);
-export const $activePhrasalVerb = createStore<TPhrasalVerb>(null);
-export const activePhrasalVerbChanged = createEvent<TPhrasalVerb>();
 export const subsDelayButtonPressed = createEvent<number>();
 export const subsDelayChangeFx = createEffect<number, number>((value) => value);
 export const subsResyncFx = createEffect<

src/models/subs/init.ts

@@ -4,8 +4,6 @@ import {
   $rawSubs,
   $subs,
   $subsDelay,
-  $activePhrasalVerb,
-  activePhrasalVerbChanged,
   esSubsChanged,
   fetchSubsFx,
   resetSubs,
@@ -86,7 +84,6 @@ $currentSubs.on([updateCurrentSubsFx.doneData, autoPauseFx.doneData], (oldSubs,
 );
 
 $subsDelay.on(subsDelayChangeFx.doneData, (_, newSubsDelay) => newSubsDelay);
-$activePhrasalVerb.on(activePhrasalVerbChanged, (_, phrasalVerb) => phrasalVerb);
 $subsLanguage.on(subsLanguageDetectFx.doneData, (_, lang) => lang);
 
-debug($rawSubs, $subs, $subsDelay, subsResyncFx, fetchSubsFx, $activePhrasalVerb, autoPauseFx.doneData, $currentSubs);
+debug($rawSubs, $subs, $subsDelay, subsResyncFx, fetchSubsFx, autoPauseFx.doneData, $currentSubs);

src/models/translations/index.ts

@@ -1,16 +1,44 @@
 import { createEffect, createEvent, createStore, sample, split } from "effector";
 import { debug } from "patronum";
 
-import { TPartOfSpeach, TTranslateAlternative, TWordTranslation, TWordTranslationItem } from "../types";
+import {
+  TPartOfSpeach,
+  TPhrasalVerb,
+  TSub,
+  TTranslateAlternative,
+  TWordTranslation,
+  TWordTranslationItem,
+} from "../types";
 import { $translateLanguage } from "../settings";
 import { googleNumberToPartOfSpeach } from "@src/utils/googleNumberToPartOfSpeach";
+import { createGate } from "effector-react";
+import { findPhrasalVerbs } from "@src/utils/findPhrasalVerbs";
+import { $currentSubs, $subsLanguage } from "../subs";
 
 export const $wordTranslations = createStore<TWordTranslation[]>([]);
+export const $wordTranslationsPendings = createStore<Record<string, boolean>>({});
+export const WordTranslationsGate = createGate<string>("WordTranslationsGate");
 export const $currentWordTranslation = createStore<TWordTranslation>(null);
 export const requestWordTranslation = createEvent<string>();
-export const cleanWordTranslation = createEvent();
+
+export const $currentPhrasalVerbs = createStore<TPhrasalVerb[]>([]);
+export const $currentPhrasalVerb = createStore<TPhrasalVerb>(null);
+export const $findPhrasalVerbsPendings = createStore<Record<string, boolean>>({});
+export const $findCurrentPhrasalVerbPendings = createStore<Record<string, boolean>>({});
+export const SubItemGate = createGate<{ text: string }>("SubItemGate");
+export const findPhrasalVerbsFx = createEffect<{ subs: TSub[] }, TPhrasalVerb[]>(({ subs }) =>
+  subs.flatMap((sub) => findPhrasalVerbs(sub.cleanedText))
+);
+export const subItemMouseEntered = createEvent<string>();
+export const subItemMouseLeft = createEvent();
+export const findCurrentPhrasalVerbFx = createEffect<
+  { phrasalVerbs: TPhrasalVerb[]; text: string },
+  TPhrasalVerb | null
+>(({ phrasalVerbs, text }) => phrasalVerbs.find((phrasalVerb) => phrasalVerb.text.includes(text)));
 
 export const $currentSubTranslation = createStore<string>(null);
+export const $subTranslationPendings = createStore<Record<string, boolean>>({});
+export const SubTranslationGate = createGate<string>("SubTranslationGate");
 export const requestSubTranslation = createEvent<string>();
 export const cleanSubTranslation = createEvent();
 export const fetchSubTranslationFx = createEffect<{ source: string; language: string }, string>(
@@ -110,11 +138,24 @@ $currentWordTranslation.on(
   [fetchWordTranslationFx.doneData, updateCurrentWordTranslationFx.doneData],
   (_, translation) => translation
 );
-$currentWordTranslation.reset(cleanWordTranslation);
+$currentWordTranslation.reset(WordTranslationsGate.close);
 $wordTranslations.on(fetchWordTranslationFx.doneData, (allTranslation, translation) => [
   ...allTranslation,
   translation,
 ]);
+$wordTranslationsPendings.on(fetchWordTranslationFx, (pendings, { source }) => ({
+  ...pendings,
+  [source]: true,
+}));
+$wordTranslationsPendings.on(fetchWordTranslationFx.finally, (pendings, { params: { source } }) => {
+  const copy = { ...pendings };
+  delete copy[source];
+  return copy;
+});
+sample({
+  clock: WordTranslationsGate.open,
+  target: requestWordTranslation,
+});
 
 sample({
   clock: requestSubTranslation,
@@ -124,16 +165,68 @@ sample({
 });
 
 $currentSubTranslation.on(fetchSubTranslationFx.doneData, (_, translation) => translation);
-$currentSubTranslation.reset(cleanSubTranslation);
+$currentSubTranslation.reset(SubTranslationGate.close);
+$subTranslationPendings.on(fetchSubTranslationFx, (pendings, { source }) => ({
+  ...pendings,
+  [source]: true,
+}));
+$subTranslationPendings.on(fetchSubTranslationFx.finally, (pendings, { params: { source } }) => {
+  const copy = { ...pendings };
+  delete copy[source];
+  return copy;
+});
+sample({
+  clock: SubTranslationGate.open,
+  target: requestSubTranslation,
+});
+
+$currentPhrasalVerbs.on(findPhrasalVerbsFx.doneData, (_, phrasalVerbs) => phrasalVerbs);
+$findPhrasalVerbsPendings.on(findPhrasalVerbsFx, (pendings, { subs }) => ({
+  ...pendings,
+  [subs[0].cleanedText]: true,
+}));
+$findPhrasalVerbsPendings.on(findPhrasalVerbsFx.finally, (pendings, { params: { subs } }) => {
+  const copy = { ...pendings };
+  delete copy[subs[0].cleanedText];
+  return copy;
+});
+sample({
+  clock: $currentSubs,
+  source: { translateLanguage: $translateLanguage, subsLanguage: $subsLanguage },
+  filter: ({ translateLanguage, subsLanguage }, subs) =>
+    translateLanguage === "ru" && subsLanguage === "en" && subs.length > 0,
+  fn: (_, subs) => ({ subs }),
+  target: findPhrasalVerbsFx,
+});
+
+$findCurrentPhrasalVerbPendings.on(findCurrentPhrasalVerbFx, (pendings, { text }) => ({
+  ...pendings,
+  [text]: true,
+}));
+$findCurrentPhrasalVerbPendings.on(findCurrentPhrasalVerbFx.finally, (pendings, { params: { text } }) => {
+  const copy = { ...pendings };
+  delete copy[text];
+  return copy;
+});
+$currentPhrasalVerb.on(findCurrentPhrasalVerbFx.doneData, (_, phrasalVerb) => phrasalVerb);
+$currentPhrasalVerb.reset(subItemMouseLeft);
+sample({
+  clock: subItemMouseEntered,
+  source: { phrasalVerbs: $currentPhrasalVerbs },
+  fn: ({ phrasalVerbs }, text) => ({ phrasalVerbs, text }),
+  target: findCurrentPhrasalVerbFx,
+});
 
 debug(
   $wordTranslations,
   $currentWordTranslation,
   requestWordTranslation,
-  cleanWordTranslation,
   fetchWordTranslationFx.doneData,
   $currentSubTranslation,
   requestSubTranslation,
   cleanSubTranslation,
-  fetchSubTranslationFx.doneData
+  fetchSubTranslationFx.doneData,
+  findCurrentPhrasalVerbFx,
+  $currentPhrasalVerb,
+  $currentPhrasalVerbs
 );

src/pages/content/components/Subs/PhrasalVerbTranslation.tsx

@@ -2,16 +2,14 @@ import { FC, useEffect, useState } from "react";
 import { useUnit } from "effector-react";
 
 import { TPhrasalVerb } from "@src/models/types";
-import { cleanWordTranslation, requestWordTranslation } from "@src/models/translations";
 import { $learningService } from "@src/models/settings";
-import { $subsLanguage } from "@src/models/subs";
 import ILearningService from "@src/learning-service/learningService";
 import { getLearningService } from "@src/utils/getLearningService";
 import toast from "react-hot-toast";
 import { PlusIcon } from "./assets/PlusIcon";
 
 export const PhrasalVerbTranslation: FC<{ phrasalVerb: TPhrasalVerb }> = ({ phrasalVerb }) => {
-  const [learningService] = useUnit([$learningService, requestWordTranslation, cleanWordTranslation, $subsLanguage]);
+  const [learningService] = useUnit([$learningService]);
 
   const [service, setService] = useState<ILearningService>(null);
 

src/pages/content/components/Subs/SubFullTranslation.tsx

@@ -1,23 +1,13 @@
-import { FC, useEffect } from "react";
-import { useUnit } from "effector-react";
+import { FC } from "react";
+import { useGate, useUnit } from "effector-react";
 
-import { $currentSubTranslation, cleanSubTranslation, requestSubTranslation } from "@src/models/translations";
+import { $currentSubTranslation, $subTranslationPendings, SubTranslationGate } from "@src/models/translations";
 
 export const SubFullTranslation: FC<{ text: string }> = ({ text }) => {
-  const [currentSubTranslation, handleRequestSubTranslation, handleCleanSubTranslation] = useUnit([
-    $currentSubTranslation,
-    requestSubTranslation,
-    cleanSubTranslation,
-  ]);
+  useGate(SubTranslationGate, text);
+  const [currentSubTranslation, subTranslationPendings] = useUnit([$currentSubTranslation, $subTranslationPendings]);
 
-  useEffect(() => {
-    handleRequestSubTranslation(text);
-    return () => {
-      handleCleanSubTranslation();
-    };
-  }, []);
-
-  if (!currentSubTranslation) {
+  if (!currentSubTranslation || subTranslationPendings[text]) {
     return null;
   }
 

src/pages/content/components/Subs/SubItemTranslation.tsx

@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from "react";
-import { useUnit } from "effector-react";
+import { useGate, useUnit } from "effector-react";
 
 import { $learningService } from "@src/models/settings";
-import { $currentWordTranslation, cleanWordTranslation, requestWordTranslation } from "@src/models/translations";
+import { $currentWordTranslation, $wordTranslationsPendings, WordTranslationsGate } from "@src/models/translations";
 import toast from "react-hot-toast";
 import { SoundIcon } from "./assets/SoundIcon";
 import { PlusIcon } from "./assets/PlusIcon";
@@ -18,28 +18,21 @@ import { $subsLanguage } from "@src/models/subs";
 import { getLearningService } from "@src/utils/getLearningService";
 
 export const SubItemTranslation: FC<{ text: string }> = ({ text }) => {
-  const [
-    currentWordTranslation,
-    learningService,
-    handleRequestWordTranslation,
-    handleCleanWordTranslation,
-    subsLanguage,
-  ] = useUnit([$currentWordTranslation, $learningService, requestWordTranslation, cleanWordTranslation, $subsLanguage]);
+  useGate(WordTranslationsGate, text);
+  const [currentWordTranslation, learningService, subsLanguage, wordTranslationsPendings] = useUnit([
+    $currentWordTranslation,
+    $learningService,
+    $subsLanguage,
+    $wordTranslationsPendings,
+  ]);
 
   const [service, setService] = useState<ILearningService>(null);
 
   useEffect(() => {
     setService(getLearningService(learningService));
   }, [learningService]);
 
-  useEffect(() => {
-    handleRequestWordTranslation(text);
-    return () => {
-      handleCleanWordTranslation();
-    };
-  }, []);
-
-  if (!currentWordTranslation) {
+  if (!currentWordTranslation || wordTranslationsPendings[text]) {
     return null;
   }