chore: move challenge-editor to use vite (#51775)

Co-authored-by: Sboonny <MuhammedElruby@gmail.com>
This commit is contained in:
Moshe
2023-10-06 09:45:18 +03:00
committed by GitHub
parent 02ad7d25a5
commit 7f09c3ac97
20 changed files with 684 additions and 2896 deletions
+589 -2826
View File
File diff suppressed because it is too large Load Diff
@@ -13,5 +13,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
+8 -24
View File
@@ -6,41 +6,25 @@
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "12.1.5",
"@testing-library/user-event": "13.5.0",
"@vitejs/plugin-react": "4.1.0",
"codemirror": "5.65.15",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-router-dom": "6.16.0",
"react-scripts": "5.0.1",
"typescript": "4.9.5"
"typescript": "4.9.5",
"vite": "4.4.9",
"vite-tsconfig-paths": "4.2.1"
},
"scripts": {
"start": "cross-env PORT=3300 react-scripts start",
"start": "cross-env PORT=3300 vite",
"lint": "eslint src",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build": "tsc && vite build",
"test": "echo \"no tests here yet\"",
"postinstall": "shx cp ./sample.env ./.env"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"devDependencies": {
"@types/codemirror": "5.60.10",
"@types/prettier": "^2.7.3",
"@types/react": "16.14.48",
"@types/react-dom": "^16.9.17",
"@uiw/react-codemirror": "3.2.10",
+1 -1
View File
@@ -1 +1 @@
REACT_APP_CHALLENGE_EDITOR_API_LOCATION=http://localhost:3200
VITE_CHALLENGE_EDITOR_API_LOCATION=http://localhost:3200
@@ -6,13 +6,18 @@ const CreateEmptySteps = ({ superblock, block }: BlockRequiredProps) => {
const [num, setNum] = useState(0);
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/_tools/create-empty-steps`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
})
fetch(
`${API_LOCATION}/${superblock || ''}/${
block || ''
}/_tools/create-empty-steps`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
}
)
);
const changeNum = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -4,9 +4,14 @@ import { API_LOCATION, handleRequest } from '../../utils/handle-request';
const CreateNextStep = ({ superblock, block }: BlockRequiredProps) => {
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/_tools/create-next-step`, {
method: 'POST'
})
fetch(
`${API_LOCATION}/${superblock || ''}/${
block || ''
}/_tools/create-next-step`,
{
method: 'POST'
}
)
);
return <button onClick={click}>Create Next Step</button>;
@@ -6,13 +6,16 @@ const DeleteStep = ({ superblock, block }: BlockRequiredProps) => {
const [num, setNum] = useState(0);
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/_tools/delete-step`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
})
fetch(
`${API_LOCATION}/${superblock || ''}/${block || ''}/_tools/delete-step`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
}
)
);
const changeNum = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -6,13 +6,16 @@ const InsertStep = ({ superblock, block }: BlockRequiredProps) => {
const [num, setNum] = useState(0);
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/_tools/insert-step`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
})
fetch(
`${API_LOCATION}/${superblock || ''}/${block || ''}/_tools/insert-step`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ num })
}
)
);
const changeNum = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -9,13 +9,16 @@ const SaveChallenge = ({
content
}: ChallengeContentRequiredProps) => {
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/${challenge}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content })
})
fetch(
`${API_LOCATION}/${superblock || ''}/${block || ''}/${challenge || ''}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content })
}
)
);
return <button onClick={click}>Save Changes</button>;
@@ -4,9 +4,14 @@ import { API_LOCATION, handleRequest } from '../../utils/handle-request';
const UpdateStepTitles = ({ superblock, block }: BlockRequiredProps) => {
const click = handleRequest(() =>
fetch(`${API_LOCATION}/${superblock}/${block}/_tools/update-step-titles`, {
method: 'POST'
})
fetch(
`${API_LOCATION}/${superblock || ''}/${
block || ''
}/_tools/update-step-titles`,
{
method: 'POST'
}
)
);
return <button onClick={click}>Reorder Steps</button>;
@@ -31,7 +31,9 @@ const Editor = () => {
const fetchData = () => {
setLoading(true);
fetch(`${API_LOCATION}/${superblock}/${block}/${challenge}`)
fetch(
`${API_LOCATION}/${superblock || ''}/${block || ''}/${challenge || ''}`
)
.then(res => res.json() as Promise<ChallengeContent>)
.then(
content => {
@@ -61,7 +63,7 @@ const Editor = () => {
<div>
<h1>{items.name}</h1>
<span className='breadcrumb'>
{superblock} / {block}
{superblock || ''} / {block || ''}
</span>
<CodeMirror
value={stepContent}
@@ -77,13 +79,13 @@ const Editor = () => {
}}
/>
<SaveChallenge
superblock={superblock}
block={block}
superblock={superblock || ''}
block={block || ''}
challenge={challenge}
content={stepContent}
/>
<p>
<Link to={`/${superblock}/${block}`}>Return to Block</Link>
<Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
</p>
</div>
);
+1 -1
View File
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Lato';
src: url('../public/Lato-Regular.woff');
src: url('./fonts/Lato-Regular.woff');
}
body {
+2 -1
View File
@@ -2,7 +2,8 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
// TODO: Renable this when we upgrade React to version 18
// eslint-disable-next-line react/no-deprecated
ReactDOM.render(
<React.StrictMode>
<App />
-1
View File
@@ -1 +0,0 @@
/// <reference types="react-scripts" />
@@ -5,5 +5,5 @@ export const handleRequest = (makeRequest: () => Promise<Response>) => () => {
.catch(err => console.error(err));
};
export const API_LOCATION = process.env
.REACT_APP_CHALLENGE_EDITOR_API_LOCATION as string;
export const API_LOCATION = import.meta.env
.VITE_CHALLENGE_EDITOR_API_LOCATION as string;
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+2 -1
View File
@@ -14,7 +14,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"types": ["node"]
},
"include": ["src"]
}
@@ -0,0 +1,11 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
base: '/',
plugins: [react()],
server: {
port: 3300
}
});
@@ -2,6 +2,7 @@ import { existsSync } from 'fs';
import fs from 'fs/promises';
import path from 'path';
import { prompt } from 'inquirer';
import { format } from 'prettier';
import ObjectID from 'bson-objectid';