From 1741826d96d43d46592703cae25afd9ba92c2a13 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 5 Oct 2020 20:47:49 +0530
Subject: [PATCH] refactor(misc): Move source and completion mappings to parent
 using context

Also change most consumers to use the context value
---
 src/components/SourceViewer/SourceViewer.tsx | 13 ++++++++++---
 src/logic/completionMapping.ts               | 16 ++++++++++++++--
 src/logic/sourceMapping.tsx                  | 10 ++++++++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/SourceViewer/SourceViewer.tsx b/src/components/SourceViewer/SourceViewer.tsx
index 5be1d70..ef36e1d 100644
--- a/src/components/SourceViewer/SourceViewer.tsx
+++ b/src/components/SourceViewer/SourceViewer.tsx
@@ -10,12 +10,14 @@ import {
 
 import { sourceMapping } from "../../logic/sourceMapping";
 import {
-  completionMapping,
+  useCompletionMapping,
   ICompletionDetail,
+  ICompletionMapping,
 } from "../../logic/completionMapping";
 
 function getCompletionFromSourceToken(
-  matcheeToken: Token
+  matcheeToken: Token,
+  completionMapping: ICompletionMapping
 ): ICompletionDetail | null {
   const matchingSourceDetails = sourceMapping.mappingArray.find(
     ({ token: tmpToken }) => matcheeToken === tmpToken
@@ -120,13 +122,18 @@ function TokenRenderer({
   isLastTokenInLine,
   getTokenProps,
 }: ITokenRendererProps) {
+  const completionMapping = useCompletionMapping();
+
   const refFn = sourceMapping.registerToken(token);
   if (isLastTokenInLine) {
     sourceMapping.registerLineEnd();
   }
 
   const onClickToken = (tmpToken: Token) => {
-    const matchingCompletion = getCompletionFromSourceToken(tmpToken);
+    const matchingCompletion = getCompletionFromSourceToken(
+      tmpToken,
+      completionMapping
+    );
     if (matchingCompletion !== null) {
       console.log(
         `Clicked: ${tmpToken.content} => Completion (${matchingCompletion.completionType},${matchingCompletion.completionValueString})`
diff --git a/src/logic/completionMapping.ts b/src/logic/completionMapping.ts
index 8ddf4df..911f8e3 100644
--- a/src/logic/completionMapping.ts
+++ b/src/logic/completionMapping.ts
@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import { Node } from "acorn";
 import { inspect } from "../engine262/dist/engine262";
 
@@ -12,11 +13,13 @@ export interface ICompletionDetail {
   completionValue: any;
 }
 
-export const completionMapping: {
+export interface ICompletionMapping {
   completionDetails: ICompletionDetail[];
   addCompletion(_: { node: Node; result: CompletionRecord }): void;
   reset(): void;
-} = {
+}
+
+export const completionMapping: ICompletionMapping = {
   completionDetails: [],
   addCompletion({ node, result }) {
     const { start, end } = node;
@@ -48,3 +51,12 @@ export const completionMapping: {
     this.completionDetails = [];
   },
 };
+
+export const CompletionMappingContext = createContext(completionMapping);
+
+// Context consumer
+export const useCompletionMapping = () => {
+  const value = useContext(CompletionMappingContext);
+
+  return value;
+};
diff --git a/src/logic/sourceMapping.tsx b/src/logic/sourceMapping.tsx
index f4b5240..c6fd67a 100644
--- a/src/logic/sourceMapping.tsx
+++ b/src/logic/sourceMapping.tsx
@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import { Token } from "../types/prism-types";
 
 export interface TMappingELement {
@@ -47,3 +48,12 @@ export const sourceMapping: TSourceMapping = {
     return [];
   },
 };
+
+export const SourceMappingContext = createContext(sourceMapping);
+
+// Context consumer
+export const useSourceMapping = () => {
+  const value = useContext(SourceMappingContext);
+
+  return value;
+};