< project> done

package.json

@@ -6,10 +6,12 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "ace-builds": "^1.4.12",
     "base-64": "^1.0.0",
     "base64-arraybuffer": "^1.0.1",
     "codemirror": "^5.62.3",
     "react": "^17.0.2",
+    "react-ace": "^9.4.4",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.2",
@@ -44,5 +46,8 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://snippet.asmer.fs.a-level.com.ua/"
+  "proxy": "http://snippet.asmer.fs.a-level.com.ua/",
+  "devDependencies": {
+    "webpack": "^4.44.2"
+  }
 }

src/App.js

@@ -9,13 +9,27 @@ import { FormDate } from './components/FormDate';
 import { Main } from './pages/Main';
 import store from './reducers';
 
-const ConnectLoginForm = connect(null, {onLogin:actionFullLogin}) (LoginForm) 
+const ConnectLoginForm = connect(null, {onLogin:actionFullLogin}) (LoginForm);
 
-const ConnectFormReg = connect(null, {FormReg:actionFullRegister}) (FormReg)
+const ConnectFormReg = connect(null, {FormReg:actionFullRegister}) (FormReg);
 
-const ConnectFormUpload = connect(null, {onUpload:actionUploadFile}) (FormDate)
+const ConnectFormUpload = connect(null, {onUpload:actionUploadFile}) (FormDate);
 
 
+// const Preloadig = ({promiseName, promiseState, children}) => {
+//     //если данные есть - проверить promiseState на предмет наличия ключа из promiseName
+//     //и статуса RESOLVED 
+//     //то нарисовать children
+//     //byfxt dthyenm null/нарисовать прелоадер
+// }
+
+// const CPreloading = connect(state => ({promiseState: state.promise}))(Preloadig)
+
+
+{/* <CPreloading promiseName="category">
+    <CCategory />
+</ CPreloading> */}
+
 function App() {
     return (
         <Provider store = {store}>

src/actions/index.js

@@ -88,7 +88,7 @@ let result = await dispatch(actionLogin(login, password))
     if (result !== null){
         dispatch(actionAuthLogin(result))
     } else {
-        alert ('Такой пользователь не существует')
+        alert ('Такой пользователь не существует!')
     }
 }
 
@@ -102,13 +102,13 @@ export const actionFullRegister = (login, password) => async(dispatch) => {
 }
 
 let up = async(file) => {
-    let formData = new FormData();
+    let formData = new FormData()
     formData.append('photo', file)
-    fetch('/upload', {
-        method: "POST",
-        headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
-        body: formData
-    })
-}
+    return fetch('/upload', {
+            method: "POST",
+            headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+            body: formData
+        }).then(res => res.json())
+    }
 
 export const actionUploadFile = (file) => actionPromise("upload", up(file))

src/components/Editor.js

@@ -1,40 +1,66 @@
-import { useState } from 'react';
-import { Controlled as ControlledEditor } from 'react-codemirror2';
+import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/theme-kuroir";
+import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/theme-xcode";
+import "ace-builds/src-noconflict/theme-textmate";
+import "ace-builds/src-noconflict/theme-terminal";
+import "ace-builds/src-noconflict/theme-solarized_dark";
+import "ace-builds/src-noconflict/theme-solarized_light"; 
+import "ace-builds/src-noconflict/ext-language_tools";
+import { Select } from "../helpers/Select";
 
-export function Editor(props) {
-    const {
-      language,
-      displayName,
-      value,
-      onChange
-    } = props
-    const [open, setOpen] = useState(true)
-  
-    function handleChange(editor, data, value) {
-      onChange(value)
-    }
-  
+export const Editor = ({ data={type:"", name:"", text:""}, onChange }) => {
     return (
-      <div className={`editor-container ${open ? '' : 'collapsed'}`}>
-        <div className="editor-title">
-          {displayName}
-          <button
-            type="button"
-            className="expand-collapse-btn"
-            onClick={() => setOpen(prevOpen => !prevOpen)}
-          >
-          </button>
-        </div>
-        <ControlledEditor
-          onBeforeChange={handleChange}
-          value={value}
-          className="code-mirror-wrapper"
-          options={{
-            lineWrapping: true,
-            lint: true,
-            mode: language,
-            theme: 'material',
-            lineNumbers: true
+      <div
+        style={{
+          display: "inline-block",
+          width: "calc(100% / 3)",
+          marginBottom: "10px",
+        }}
+      >
+        {"Mode: "}
+        <Select
+          onChange={(type) =>
+            onChange({ type, text: data.text, name: data.name })
+          }
+          value={data.type}
+        />
+        <br />
+        <input
+          style={{ marginBottom: "10px", marginLeft: "5px" }}
+          type="text"
+          value={data.name}
+          onChange={(e) =>
+            onChange({ type: data.type, text: data.text, name: e.target.value })
+          }
+        />
+        <AceEditor
+          className="editor"
+          value={data.text}
+          onChange={(text) =>
+            onChange({ type:data.type, text, name:data.name })
+          }
+          placeholder="Your Code"
+          mode={data.type}
+          theme="monokai"
+          name="blah2"
+          fontSize={14}
+          showPrintMargin={true}
+          showGutter={true}
+          highlightActiveLine={true}
+          setOptions={{
+            enableBasicAutocompletion: true,
+            enableLiveAutocompletion: true,
+            enableSnippets: false,
+            showLineNumbers: true,
+            tabSize: 2,
           }}
         />
       </div>

src/helpers/Select.js

@@ -0,0 +1,27 @@
+const types = {
+    xml: "xml",
+    html: "html",
+    css: "css",
+    js: "javascript",
+    java: "java",
+    python: "python",
+    ruby: "ruby",
+    sass: "sass",
+    json: "json",
+    typescript: "typescript",
+    markdown: "markdown",
+    mysql: "mysql",
+    handlebars: "handlebars",
+    golang: "golang",
+    csharp: "csharp",
+    elixir: "elixir"
+}
+
+export const Select = ({listObj=types, onChange}) => 
+    {
+        return <select onChange={e => onChange(e.target.value)}>
+            {Object.entries(listObj).map(([value, text]) => <option value={value} key={value}>
+                {text}
+            </option>)}
+        </select>
+    }

src/pages/Main.js

@@ -1,27 +1,22 @@
 import { useState } from 'react';
+// import { split } from 'react-ace';
 import { Editor } from '../components/Editor';
 
+const datas = [{type: "html", name:"", text:""}, {type: "css", name:"", text:""},{type: "js", name:"", text:""}];
+
 export const Main = () => {
-    const [html, setHtml] = useState('html', '')
-    const [css, setCss] = useState('css', '')
-    const [js, setJs] = useState('js', '')
+    const [editors, setEditors] = useState(datas);
+    console.log(editors);
     return (
-        <>
-        <Editor   
-            language="xml"
-            displayName="HTML"
-            value={html}
-            onChange={setHtml} /> 
-        <Editor   
-            language="css"
-            displayName="CSS"
-            value={css}
-            onChange={setCss} />
-        <Editor   
-            language="javascript"
-            displayName="JS"
-            value={js}
-            onChange={setJs} />
-        </>
-    )     
-}
+        editors.map((data, index) => {
+            return <Editor data={data}
+            onChange={newData => { let editors1 = [...editors]
+                editors1[index] = newData;
+                setEditors(editors1);
+            } 
+            
+            } />
+        })    
+    )}
+
+// сделать кнопку при нажатии на которую мы сможем динамически добавлять Editors

src/reducers/auth.js

@@ -1,8 +1,8 @@
-import { decode as atob } from 'base-64'
+import { decode as atob } from 'base-64';
 
 // функция authReducer
 
-let signatureToken = (token) => JSON.parse(atob(token.split(".")[1]))
+let signatureToken = (token) => JSON.parse(atob(token.split(".")[1]));
 
 function authReducer(state, { type, token }) {
 

src/reducers/index.js

@@ -8,6 +8,7 @@ let reducers = combineReducers({
     a: authReducer
 })
 
-const store = createStore(reducers, applyMiddleware(thunk))
+const store = createStore(reducers, applyMiddleware(thunk));
+store.subscribe(() => console.log(store.getState()));
 
 export default store;