Half working version switcher

Author: davepagurek

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

@@ -257,6 +257,9 @@ class Editor extends React.Component {
       if (!prevProps.unsavedChanges) {
         setTimeout(() => this.props.setUnsavedChanges(false), 400);
       }
+    } else if (this.getContent().content !== this.props.file.content) {
+      // TODO: make this not break regular edits!
+      this._cm.setValue(this.props.file.content);
     }
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style[

client/modules/IDE/components/VersionPicker.jsx

@@ -1,10 +1,35 @@
-import React from 'react';
-import { useP5Version } from '../hooks/useP5Version';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { useP5Version, p5Versions } from '../hooks/useP5Version';
+import MenuItem from '../../../components/Dropdown/MenuItem';
+import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
+import { updateFileContent } from '../actions/files';
 
 const VersionPicker = () => {
-  const versionInfo = useP5Version();
+  const { indexID, versionInfo } = useP5Version();
+  const dispatch = useDispatch();
+  const dispatchReplaceVersion = useCallback(
+    (version) => {
+      if (!indexID || !versionInfo) return;
+      dispatch(updateFileContent(indexID, versionInfo.replaceVersion(version)));
+    },
+    [indexID, versionInfo]
+  );
+
+  if (!versionInfo) {
+    return <p>Custom</p>;
+  }
 
-  return <p>{versionInfo?.version || 'custom'}</p>;
+  return (
+    <DropdownMenu anchor={<span>Version</span>} align="left">
+      {p5Versions.map((version) => (
+        <MenuItem key={version} onClick={() => dispatchReplaceVersion(version)}>
+          {version}
+        </MenuItem>
+      ))}
+    </DropdownMenu>
+  );
 };
 
 VersionPicker.popTypes = {};

client/modules/IDE/hooks/useP5Version.js

@@ -8,7 +8,6 @@ import { useSelector } from 'react-redux';
 export const p5Versions = [
   '1.11.3',
   '2.0.0-beta.2',
-  '1.11.3',
   '1.11.2',
   '1.11.1',
   '1.11.0',
@@ -135,12 +134,14 @@ export const p5Versions = [
 
 export function useP5Version() {
   const files = useSelector((state) => state.files);
-  const indexSrc = files.find(
+  const indexFile = files.find(
     (file) =>
       file.fileType === 'file' &&
       file.name === 'index.html' &&
       file.filePath === ''
-  )?.content;
+  );
+  const indexSrc = indexFile?.content;
+  const indexID = indexFile?.id;
 
   // { version: string, minified: boolean, replaceVersion: (version: string) => string } | null
   const versionInfo = useMemo(() => {
@@ -180,5 +181,5 @@ export function useP5Version() {
     return null;
   }, [indexSrc]);
 
-  return versionInfo;
+  return { indexID, versionInfo };
 }