gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: files{} -> challengeFiles[], and key -> fileKey (#43023)

Browse Source 
* fix(client): fix client

* fix propType and add comment

* revert user.json prettification

* slight type refactor and payload correction

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* update ChallengeFile type imports

* add cypress test for code-storage

* update test and storage epic

* fix Shaun's tired brain's logic

* refactor with suggestions

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* update codeReset

* increate cypress timeout because firefox is slow

* remove unused import to make linter happy

* use focus on editor

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* use more specific seletor for cypress editor test

* account for silly null challengeFiles

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-08-12 19:48:28 +01:00
committed by GitHub
parent 1f62dfe2b3
commit 59f17f237b
41 changed files with 916 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/templates/Challenges/classic/editor.tsx
View File

@@ -20,12 +20,12 @@ import store from 'store';
import { Loader } from '../../../components/helpers';
import { userSelector, isDonationModalOpenSelector } from '../../../redux';
import {
ChallengeFileType,
ChallengeFiles,
DimensionsType,
ExtTypes,
FileKeyTypes,
ResizePropsType,
TestType
Test
} from '../../../redux/prop-types';
import {
@@ -45,7 +45,7 @@ const MonacoEditor = Loadable(() => import('react-monaco-editor'));
interface EditorProps {
canFocus: boolean;
challengeFiles: ChallengeFileType;
challengeFiles: ChallengeFiles;
containerRef: RefObject<HTMLElement>;
contents: string;
description: string;
@@ -61,11 +61,11 @@ interface EditorProps {
saveEditorContent: () => void;
setEditorFocusability: (isFocusable: boolean) => void;
submitChallenge: () => void;
tests: TestType[];
tests: Test[];
theme: string;
title: string;
updateFile: (objest: {
key: FileKeyTypes;
updateFile: (object: {
fileKey: FileKeyTypes;
editorValue: string;
editableRegionBoundaries: number[] | null;
}) => void;
@@ -242,7 +242,9 @@ const Editor = (props: EditorProps): JSX.Element => {
const getEditableRegion = () => {
const { challengeFiles, fileKey } = props;
const edRegBounds = challengeFiles[fileKey]?.editableRegionBoundaries;
const edRegBounds = challengeFiles?.find(
challengeFile => challengeFile.fileKey === fileKey
)?.editableRegionBoundaries;
return edRegBounds ? [...edRegBounds] : [];
};
@@ -256,11 +258,14 @@ const Editor = (props: EditorProps): JSX.Element => {
// swap and reuse models, we have to create our own models to prevent
// disposal.
const challengeFile = challengeFiles?.find(
challengeFile => challengeFile.fileKey === fileKey
);
const model =
data.model ||
monaco.editor.createModel(
challengeFiles[fileKey]?.contents ?? '',
modeMap[challengeFiles[fileKey]?.ext ?? 'html']
challengeFile?.contents ?? '',
modeMap[challengeFile?.ext ?? 'html']
);
data.model = model;
const editableRegion = getEditableRegion();
@@ -277,7 +282,9 @@ const Editor = (props: EditorProps): JSX.Element => {
const { challengeFiles, fileKey } = props;
const { model } = dataRef.current[fileKey];
const newContents = challengeFiles[fileKey]?.contents;
const newContents = challengeFiles?.find(
challengeFile => challengeFile.fileKey === fileKey
)?.contents;
if (model?.getValue() !== newContents) {
model?.setValue(newContents ?? '');
}
@@ -576,9 +583,7 @@ const Editor = (props: EditorProps): JSX.Element => {
}
const onChange = (editorValue: string) => {
const { updateFile } = props;
// TODO: use fileKey everywhere?
const { fileKey: key } = props;
const { updateFile, fileKey } = props;
// TODO: now that we have getCurrentEditableRegion, should the overlays
// follow that directly? We could subscribe to changes to that and redraw if
// those imply that the positions have changed (i.e. if the content height
@@ -589,7 +594,7 @@ const Editor = (props: EditorProps): JSX.Element => {
editableRegion.startLineNumber - 1,
editableRegion.endLineNumber + 1
];
updateFile({ key, editorValue, editableRegionBoundaries });
updateFile({ fileKey, editorValue, editableRegionBoundaries });
};
function showEditableRegion(editableBoundaries: number[]) {