Add remote message for Chrome CPH-Submit

src/config.ts

@@ -4,6 +4,9 @@
  */
 
 export default {
+    remoteMessageUrl: new URL(
+        'https://raw.githubusercontent.com/agrawal-d/cph/main/static/remote-message.txt',
+    ),
     telemetryKey: '',
     port: 27121, // companion listener server
     timeout: 10000, // for a testcase run

src/extension.ts

@@ -73,6 +73,8 @@ export function activate(context: vscode.ExtensionContext) {
     console.log('cph: activate() execution started');
     globalThis.context = context;
 
+    downloadRemoteMessage();
+
     const statusBarItem = vscode.window.createStatusBarItem(
         vscode.StatusBarAlignment.Left,
         1000,
@@ -106,3 +108,19 @@ export function activate(context: vscode.ExtensionContext) {
 
     return;
 }
+
+async function downloadRemoteMessage() {
+    try {
+        console.log('Fetching remote message');
+        globalThis.remoteMessage = await (
+            await fetch(config.remoteMessageUrl)
+        ).text();
+        getJudgeViewProvider().extensionToJudgeViewMessage({
+            command: 'remote-message',
+            message: globalThis.remoteMessage,
+        });
+        console.log('Remote message fetched', globalThis.remoteMessage);
+    } catch (e) {
+        console.error('Error fetching remote message', e);
+    }
+}

src/types.ts

@@ -202,6 +202,11 @@ export type NewProblemCommand = {
     problem: Problem | undefined;
 };
 
+export type RemoteMessageCommand = {
+    command: 'remote-message';
+    message: string;
+};
+
 export type VSToWebViewMessage =
     | ResultCommand
     | RunningCommand
@@ -211,6 +216,7 @@ export type VSToWebViewMessage =
     | WaitingForSubmitCommand
     | SubmitFinishedCommand
     | NotRunningCommand
+    | RemoteMessageCommand
     | NewProblemCommand;
 
 export type CphEmptyResponse = {
@@ -232,4 +238,5 @@ export type WebViewpersistenceState = {
 declare global {
     var reporter: TelemetryReporter;
     var context: vscode.ExtensionContext;
+    var remoteMessage: string | undefined;
 }

src/webview/JudgeView.ts

@@ -228,6 +228,7 @@ class JudgeViewProvider implements vscode.WebviewViewProvider {
                         // Since the react script takes time to load, the problem is sent to the webview before it has even loaded.
                         // So, for the initial request, ask for it again.
                         window.vscodeApi = acquireVsCodeApi();
+                        window.remoteMessage = ${globalThis.remoteMessage};
                         document.addEventListener(
                             'DOMContentLoaded',
                             (event) => {

src/webview/frontend/App.tsx

@@ -37,7 +37,6 @@ function Judge(props: {
     const [notification, setNotification] = useState<string | null>(null);
     const [waitingForSubmit, setWaitingForSubmit] = useState<boolean>(false);
     const [onlineJudgeEnv, setOnlineJudgeEnv] = useState<boolean>(false);
-    const [remoteMessage, setRemoteMessage] = useState<string>('');
     const [webviewState, setWebviewState] = useState<WebViewpersistenceState>(
         () => {
             const vscodeState = vscodeApi.getState();
@@ -75,21 +74,6 @@ function Judge(props: {
         vscodeApi.postMessage(message);
     };
 
-    useEffect(() => {
-        console.log('Fetching remote text message');
-        const url =
-            'https://github.com/agrawal-d/cph/raw/main/static/remote-message.txt';
-        try {
-            fetch(url, { mode: 'no-cors' }).then((response) => {
-                response.text().then((text) => {
-                    setRemoteMessage(text);
-                });
-            });
-        } catch (err) {
-            console.error('Error fetching remote-message.txt: ', err);
-        }
-    }, []);
-
     useEffect(() => {
         const fn = (event: any) => {
             const data: VSToWebViewMessage = event.data;
@@ -99,6 +83,11 @@ function Judge(props: {
                     break;
                 }
 
+                case 'remote-message': {
+                    window.remoteMessage = data.message;
+                    break;
+                }
+
                 case 'running': {
                     handleRunning(data);
                     break;
@@ -488,7 +477,11 @@ function Judge(props: {
                     </small>
                 </div>
                 <div className="remote-message">
-                    <p>{remoteMessage}</p>
+                    <p
+                        dangerouslySetInnerHTML={{
+                            __html: window.remoteMessage || '',
+                        }}
+                    />
                 </div>
             </div>
             <div className="actions">

src/webview/frontend/app.css

@@ -88,6 +88,11 @@ body {
     border-radius: 4px;
 }
 
+.remote-message a {
+    text-decoration: underline;
+    color: var(--vscode-textLink-foreground);
+}
+
 a.btn {
     display: inline-block;
 }