added code editor

package.json

@@ -10,9 +10,11 @@
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.0.1",
+    "codemirror": "^5.61.1",
     "firebase": "^8.6.2",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

src/App.css

@@ -0,0 +1 @@
+

src/components/Dashboard/FileComponent/FileComponent.css

@@ -0,0 +1,12 @@
+.CodeMirror {
+  text-align: left !important;
+  width: 100vh !important;
+  height: 100% !important;
+  max-height: 100vh !important;
+}
+.CodeMirror-wrap pre {
+  word-break: break-word;
+}
+.cm-wrap {
+  height: 100vh !important;
+}

src/components/Dashboard/FileComponent/Header.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import { faArrowLeft, faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Col, Row } from "react-bootstrap";
+import { useHistory } from "react-router-dom";
+import { userFileDataUpdate } from "../../../redux/actionCreators/filefoldersActionCreators";
+import { useDispatch } from "react-redux";
+
+const Header = ({ data, prevData, currentFile }) => {
+  const history = useHistory();
+  const [update, setUPdate] = useState(data.trim() !== prevData.trim());
+
+  useEffect(() => {
+    setUPdate(data.trim() !== prevData.trim());
+  }, [prevData]);
+
+  const dispatch = useDispatch();
+  const pushItBack = () => {
+    if (data.trim() !== prevData.trim()) {
+      if (window.confirm("are your sure to leave without saving data?")) {
+        history.push(
+          currentFile.data.parent === ""
+            ? "/dashboard"
+            : `dashboard/folder/${currentFile.data.parent}`
+        );
+      } else {
+        return;
+      }
+    }
+  };
+  const saveFile = () => {
+    dispatch(userFileDataUpdate(data.trim(), currentFile.docId));
+  };
+
+  return (
+    <Row className="px-5 d-flex align-items-center border-bottom mb-3 justify-content-between border-2 py-2 pt-3">
+      <Col md={5} className="d-flex align-items-center justify-content-between">
+        <h5 className="font-weight-bold">
+          {currentFile.data.name}
+          {update && " [* . Modified]"}
+        </h5>
+      </Col>
+      <Col md={5} className="d-flex align-items-center justify-content-end">
+        <Button variant="success" disabled={!update}>
+          <FontAwesomeIcon icon={faSave} onClick={() => saveFile()} />
+          &nbsp; Save
+        </Button>
+        &nbsp;
+        <Button variant="dark" onClick={() => pushItBack()}>
+          <FontAwesomeIcon icon={faArrowLeft} />
+          &nbsp; Go Back
+        </Button>
+      </Col>
+    </Row>
+  );
+};
+
+export default Header;

src/components/Dashboard/FileComponent/index.js

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+import { Col, Row } from "react-bootstrap";
+import { shallowEqual, useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import {
+  getAdminFiles,
+  getAdminFolders,
+  getUserFiles,
+  getUserFolders,
+} from "../../../redux/actionCreators/filefoldersActionCreators";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/eclipse.css";
+import "codemirror/mode/xml/xml";
+import "codemirror/mode/php/php";
+import "codemirror/mode/javascript/javascript";
+import "codemirror/mode/textile/textile";
+import "codemirror/mode/jsx/jsx";
+import "codemirror/mode/css/css";
+import "codemirror/mode/python/python";
+import "codemirror/mode/clike/clike";
+import { Controlled as CodeMirror } from "react-codemirror2";
+
+import "./FileComponent.css";
+import Header from "./Header";
+
+const FileComponent = () => {
+  const { fileId } = useParams();
+
+  const { isLoading, userId, currentFile, folders } = useSelector(
+    (state) => ({
+      userId: state.auth.userId,
+      isLoading: state.filefolders.isLoading,
+      folders: state.filefolders.UserFolders,
+      currentFile: state.filefolders.userFiles?.find(
+        (file) => file.docId === fileId
+      ),
+    }),
+    shallowEqual
+  );
+  const [prevData, setPrevData] = useState("");
+  const [data, setData] = useState("");
+
+  const codes = {
+    html: "xml",
+    php: "php",
+    js: "javascript",
+    jsx: "jsx",
+    txt: "textile",
+    xml: "xml",
+    css: "css",
+    c: "clike",
+    cpp: "clike",
+    java: "textile",
+    cs: "clike",
+    py: "python",
+    json: "javascript",
+  };
+
+  const dispatch = useDispatch();
+
+  const extension =
+    currentFile &&
+    currentFile.data.name.split(".")[
+      currentFile.data.name.split(".").length - 1
+    ];
+  useEffect(() => {
+    if (isLoading && !folders && !currentFile) {
+      dispatch(getAdminFolders());
+      dispatch(getAdminFiles());
+      dispatch(getUserFolders(userId));
+      dispatch(getUserFiles(userId));
+    }
+
+    if (
+      currentFile &&
+      (currentFile.data.url === "" ||
+        !currentFile.data.name.includes(".jpg") ||
+        !currentFile.data.name.includes(".png") ||
+        !currentFile.data.name.includes(".jpeg") ||
+        !currentFile.data.name.includes(".doc") ||
+        !currentFile.data.name.includes(".ppt") ||
+        !currentFile.data.name.includes(".pptx") ||
+        !currentFile.data.name.includes(".xls") ||
+        !currentFile.data.name.includes(".rar"))
+    ) {
+      setData(currentFile.data.data);
+      setPrevData(currentFile.data.data);
+    }
+  }, [dispatch, isLoading, currentFile.data.data]);
+
+  if (isLoading) {
+    return (
+      <Row className="m-0 w-100 h-100">
+        <Col md={12} className="bg-white m-0">
+          <h1 className="text-center my-5">Fetching file...</h1>
+        </Col>
+      </Row>
+    );
+  }
+  return (
+    <>
+      {currentFile ? (
+        currentFile.data.url === "" ||
+        !currentFile.data.name.includes(".jpg") ||
+        !currentFile.data.name.includes(".png") ||
+        !currentFile.data.name.includes(".jpeg") ||
+        !currentFile.data.name.includes(".doc") ||
+        !currentFile.data.name.includes(".ppt") ||
+        !currentFile.data.name.includes(".pptx") ||
+        !currentFile.data.name.includes(".xls") ||
+        !currentFile.data.name.includes(".rar") ? (
+          <>
+            <Header
+              currentFile={currentFile}
+              data={data}
+              prevData={prevData}
+              userId={userId}
+            />
+            <Row
+              className="m-0 w-100 "
+              style={{ overflowX: "hidden", overflowY: "auto" }}
+            >
+              <Col md={12} className="bg-white">
+                <CodeMirror
+                  value={data}
+                  options={{
+                    mode: {
+                      name: codes[extension],
+                      json: extension === "json",
+                    },
+                    theme: "eclipse",
+                    lineNumbers: true,
+                    inputStyle: "textarea",
+                    autofocus: true,
+                    lineWrapping: true,
+                  }}
+                  onBeforeChange={(editor, data, value) => {
+                    setData(value);
+                  }}
+                  style={{ textAlign: "left !important" }}
+                />
+              </Col>
+            </Row>
+          </>
+        ) : (
+          <Row className="position-fixed top-0 left-0 m-0 w-100 h-100">
+            <Col md={12}>Show File</Col>
+          </Row>
+        )
+      ) : (
+        <Row className="m-0 w-100 h-100">
+          <Col md={12}>File Not Present</Col>
+        </Row>
+      )}
+    </>
+  );
+};
+
+export default FileComponent;

src/components/Dashboard/index.js

@@ -7,6 +7,7 @@ import NavDashboard from "./NavDashboard";
 import Home from "./Home";
 import FolderAdminComponent from "./FolderAdminComponent";
 import FolderComponent from "./FolderComponent";
+import FileComponent from "./FileComponent";
 
 const Dashboard = () => {
   const history = useHistory();
@@ -42,6 +43,7 @@ const Dashboard = () => {
           path={`${path}/folder/:folderId`}
           component={FolderComponent}
         />
+        <Route exact path={`${path}/file/:fileId`} component={FileComponent} />
       </Switch>
     </Container>
   );

src/redux/actionCreators/filefoldersActionCreators.js

@@ -10,6 +10,7 @@ import {
   ADD_USER_FOLDER,
   SET_USER_FILES,
   ADD_USER_FILE,
+  UPDATE_USER_FILE_DATA,
 } from "../actions/filefoldersActions";
 
 const setLoading = (data) => ({
@@ -147,3 +148,27 @@ export const addFileUser =
         toast.error("Something went wrong!");
       });
   };
+
+const updateUserFileData = (data) => ({
+  type: UPDATE_USER_FILE_DATA,
+  payload: data,
+});
+
+export const userFileDataUpdate = (data, docId) => (dispatch) => {
+  database.files
+    .doc(docId)
+    .update({
+      updatedAt: new Date(),
+      data: data,
+    })
+    .then(() => {
+      dispatch(updateUserFileData({ data, docId }));
+      toast.success("Saved Successfully!!");
+
+      document.querySelector(".CodeMirror").focus();
+    })
+    .catch((err) => {
+      console.log(err);
+      toast.error("Something went wrong!");
+    });
+};

src/redux/actions/filefoldersActions.js

@@ -6,3 +6,4 @@ export const ADD_USER_FOLDER = "ADD_USER_FOLDER";
 export const RESET_FOLDERS_FILES = "RESET_FOLDERS_FILES";
 export const SET_USER_FILES = "SET_USER_FILES";
 export const ADD_USER_FILE = "ADD_USER_FILE";
+export const UPDATE_USER_FILE_DATA = "UPDATE_USER_FILE_DATA";

src/redux/reducers/filefolderReducer.js

@@ -7,6 +7,7 @@ import {
   SET_LOADING,
   SET_USER_FILES,
   SET_USER_FOLDERS,
+  UPDATE_USER_FILE_DATA,
 } from "../actions/filefoldersActions";
 
 const initialState = {
@@ -44,6 +45,18 @@ const filefolderReducer = (state = initialState, { type, payload }) => {
     case ADD_USER_FILE:
       state = { ...state, userFiles: [...state.userFiles, payload] };
       return state;
+    case UPDATE_USER_FILE_DATA:
+      const currentUserFile = state.userFiles.find(
+        (file) => file.docId === payload.docId
+      );
+      currentUserFile.data.data = payload.data;
+      state = {
+        ...state,
+        userFiles: state.userFiles.map((file) =>
+          file.docId === payload.docId ? currentUserFile : file
+        ),
+      };
+      return state;
     default:
       return state;
   }