how to render coordinates

client/modules/IDE/actions/preferences.js

@@ -2,6 +2,8 @@ import i18next from 'i18next';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
+// here, you'll need to import dispatchMessage from the dispatcher (look at actions/ide.js#startSkech() as reference)
+// that function should dispatch the value of the coordinate preference that's set in the UI
 function updatePreferences(formParams, dispatch) {
   apiClient
     .put('/preferences', formParams)

client/modules/IDE/components/Preferences/index.jsx

@@ -19,6 +19,8 @@ import {
   setLinewrap
 } from '../../actions/preferences';
 
+// add the coordinatesVisible UI in here
+
 export default function Preferences() {
   const { t } = useTranslation();
 

client/modules/IDE/reducers/preferences.js

@@ -13,6 +13,8 @@ export const initialState = {
   language: 'en-US',
   autocloseBracketsQuotes: true,
   autocompleteHinter: false
+  // add the coordinatesVisible state here, which you can reference in Preferences.jsx,
+  // and then import the action that dispatches the message in Preferences.jsx
 };
 
 const preferences = (state = initialState, action) => {

client/modules/Preview/previewIndex.jsx

@@ -24,6 +24,7 @@ const App = () => {
   const [basePath, setBasePath] = useState('');
   const [textOutput, setTextOutput] = useState(false);
   const [gridOutput, setGridOutput] = useState(false);
+  const [coordinatesVisible, setCoordinatesVisible] = useState(false);
   registerFrame(window.parent, getConfig('EDITOR_URL'));
 
   function handleMessageEvent(message) {
@@ -47,6 +48,10 @@ const App = () => {
       case MessageTypes.EXECUTE:
         dispatchMessage(payload);
         break;
+      case MessageTypes.COORDINATES:
+        // could probably just set payload to be t or f
+        setCoordinatesVisible(payload);
+        break;
       default:
         break;
     }
@@ -85,4 +90,6 @@ const App = () => {
   );
 };
 
+// <!-- insert component that reders coordinates here, put in same folder -->
+
 render(<App />, document.getElementById('root'));

client/utils/dispatcher.js

@@ -13,6 +13,7 @@ export const MessageTypes = {
   REGISTER: 'REGISTER',
   EXECUTE: 'EXECUTE'
 };
+// Add a new message type (COORDIATES)
 
 export function registerFrame(newFrame, newOrigin) {
   const frameId = frameIndex;