refactor: import exported modules rather files (#394)

* refactor: not import files directly but import exported modules

* fix: unique key lost in React component

Author: tyn1998

src/pages/ContentScripts/DeveloperActiInflTrend.tsx

@@ -8,7 +8,6 @@ import {
   getMessageByLocale,
 } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import Settings, { loadSettings } from '../../utils/settings';
 import { getDeveloperActiInfl } from '../../api/developer';
 import Bars from '../../components/Bars/index';
@@ -136,4 +135,4 @@ class DeveloperActiInflTrend extends PerceptorBase {
   }
 }
 
-inject2Perceptor(DeveloperActiInflTrend);
+export default DeveloperActiInflTrend;

src/pages/ContentScripts/DeveloperNetwork.tsx

@@ -16,7 +16,6 @@ import {
 } from '../../api/developer';
 import { runsWhen, getMessageByLocale } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import Settings, { loadSettings } from '../../utils/settings';
 import Graph from '../../components/Graph/Graph';
 import TeachingBubbleWrapper from './TeachingBubbleWrapper';
@@ -386,4 +385,4 @@ class DeveloperNetwork extends PerceptorBase {
   }
 }
 
-inject2Perceptor(DeveloperNetwork);
+export default DeveloperNetwork;

src/pages/ContentScripts/Hypertrons.tsx

@@ -22,7 +22,6 @@ import {
 } from '../../services/hypertrons';
 import { getMessageByLocale, runsWhen } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import logger from '../../utils/logger';
 import Settings, { loadSettings } from '../../utils/settings';
 import { getConfigFromGithub } from '../../api/github';
@@ -206,6 +205,7 @@ const HypertronsTabView: React.FC<HypertronsTabViewProps> = ({
               const styleIndex = index % (LabelStyles.length - 1);
               return (
                 <div
+                  key={`command_${index}`}
                   // @ts-ignore
                   style={Label2Style(LabelStyles[styleIndex])}
                   className="IssueLabel hx_IssueLabel"
@@ -260,4 +260,4 @@ class Hypertrons extends PerceptorBase {
   }
 }
 
-inject2Perceptor(Hypertrons);
+export default Hypertrons;

src/pages/ContentScripts/PerceptorLayout.tsx

@@ -3,7 +3,6 @@ import { render } from 'react-dom';
 import $ from 'jquery';
 import { isPerceptor, runsWhen } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 
 const PerceptorLayoutView: React.FC = () => {
   return <div />;
@@ -26,4 +25,4 @@ class PerceptorLayout extends PerceptorBase {
   }
 }
 
-inject2Perceptor(PerceptorLayout);
+export default PerceptorLayout;

src/pages/ContentScripts/PerceptorTab.tsx

@@ -3,7 +3,6 @@ import * as pageDetect from 'github-url-detection';
 import { utils } from 'github-url-detection';
 import { isPerceptor, runsWhen, isPublicRepo } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import { render } from 'react-dom';
 import React from 'react';
 import TeachingBubbleWrapper from './TeachingBubbleWrapper';
@@ -97,4 +96,4 @@ class PerceptorTab extends PerceptorBase {
   }
 }
 
-inject2Perceptor(PerceptorTab);
+export default PerceptorTab;

src/pages/ContentScripts/ProjectNetwork.tsx

@@ -14,7 +14,6 @@ import { isPerceptor, runsWhen } from '../../utils/utils';
 import { getRepoCorrelation, getDevelopersByRepo } from '../../api/repo';
 import { getMessageByLocale } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import Settings, { loadSettings } from '../../utils/settings';
 import ErrorPage from '../../components/ExceptionPage/ErrorPage';
 
@@ -282,4 +281,4 @@ class ProjectNetwork extends PerceptorBase {
   }
 }
 
-inject2Perceptor(ProjectNetwork);
+export default ProjectNetwork;

src/pages/ContentScripts/RepoActiInflTrend.tsx

@@ -8,7 +8,6 @@ import {
   getMessageByLocale,
 } from '../../utils/utils';
 import PerceptorBase from './PerceptorBase';
-import { inject2Perceptor } from './Perceptor';
 import Settings, { loadSettings } from '../../utils/settings';
 import { utils } from 'github-url-detection';
 import { getRepoActiInfl } from '../../api/repo';
@@ -156,4 +155,4 @@ class RepoActiInflTrend extends PerceptorBase {
   }
 }
 
-inject2Perceptor(RepoActiInflTrend);
+export default RepoActiInflTrend;

src/pages/ContentScripts/index.ts

@@ -2,16 +2,26 @@
 import { initializeIcons } from '@fluentui/react/lib/Icons';
 initializeIcons();
 
-import './DeveloperActiInflTrend';
-import './RepoActiInflTrend';
-import './PerceptorTab';
-import './PerceptorLayout';
-import './DeveloperNetwork';
-import './ProjectNetwork';
-import './Hypertrons';
-import './content.styles.css';
-import { Perceptor } from './Perceptor';
 import { loadSettings } from '../../utils/settings';
+import { inject2Perceptor, Perceptor } from './Perceptor';
+
+import DeveloperActiInflTrend from './DeveloperActiInflTrend';
+import RepoActiInflTrend from './RepoActiInflTrend';
+import PerceptorTab from './PerceptorTab';
+import PerceptorLayout from './PerceptorLayout';
+import DeveloperNetwork from './DeveloperNetwork';
+import ProjectNetwork from './ProjectNetwork';
+import Hypertrons from './Hypertrons';
+
+import './content.styles.css';
+
+inject2Perceptor(DeveloperActiInflTrend);
+inject2Perceptor(RepoActiInflTrend);
+inject2Perceptor(PerceptorTab);
+inject2Perceptor(PerceptorLayout);
+inject2Perceptor(DeveloperNetwork);
+inject2Perceptor(ProjectNetwork);
+inject2Perceptor(Hypertrons);
 
 async function mainInject() {
   const settings = await loadSettings();