refactor: 💄 Added note title on note upload

AceTheCreator · AceTheCreator · commit 9bd173f78eed · 2021-03-24T13:24:04.000+01:00
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from "prop-types";
 import { CgSoftwareDownload, CgMathPlus } from "react-icons/cg";
@@ -12,11 +12,19 @@ import {
 } from "./header.style";
 
 export default function Header({ download, load }) {
+  const [noteName, setNoteName] = useState("untitled.ipynb");
+  const onNoteTitleChange = (e) => {
+    setNoteName(e);
+  };
   return (
     <HeaderContainer>
       <div></div>
       <NoteEditContainer>
-        <NoteTitle type="text" value="untitled.ipynb" />
+        <NoteTitle
+          onChange={(e) => onNoteTitleChange(e.target.value)}
+          type="text"
+          value={noteName}
+        />
         <div>
           <AddNoteLabel htmlFor="import-notebook-file">
             {" "}
@@ -29,7 +37,11 @@ export default function Header({ download, load }) {
           <AddNoteInput
             type="file"
             id="import-notebook-file"
-            onChange={() => load()}
+            onChange={() => {
+              const fileName = load();
+              const name = `${fileName.split(".")[0]}.ipynb`;
+              onNoteTitleChange(name);
+            }}
           />
         </div>
       </NoteEditContainer>
diff --git a/src/index.css b/src/index.css
@@ -30,3 +30,7 @@ a{
   color: #36c5ce;
   text-decoration: none;
 }
+
+input:focus{
+  outline: none !important;
+}
diff --git a/src/reducer.js b/src/reducer.js
@@ -2,7 +2,6 @@
 // eslint-disable-next-line consistent-return
 export const reducer = (state, action) => {
   if (action.type === "CHANGE_CELL") {
-    console.log(state);
     const stateCells = state.cells.map((cell) => {
       if (cell.id === action.payload.id) {
         return action.payload;
@@ -36,6 +35,7 @@ export const reducer = (state, action) => {
   }
 
   if (action.type === "LOAD_NOTE") {
+    // console.log(action.payload);
     return { ...state, cells: action.payload };
   }
 };
diff --git a/src/utils.js b/src/utils.js
@@ -196,6 +196,7 @@ const load_package = async (array, callback) => {
 };
 
 export const load_notebook = (dispatch) => {
+  let fileName = null;
   const { files } = document.getElementById("import-notebook-file");
   let json_content = null;
   if (files.length > 0) {
@@ -207,7 +208,9 @@ export const load_notebook = (dispatch) => {
       dispatch({ type: "LOAD_NOTE", payload: json });
     };
     reader.readAsText(content);
+    fileName = content.name;
   }
+  return fileName;
 };
 /**
  * Returns the id of the current cell's output div

Original file line number	Diff line number	Diff line change
`@@ -30,3 +30,7 @@ a{`
`30`	`30`	`color: #36c5ce;`
`31`	`31`	`text-decoration: none;`
`32`	`32`	`}`
	`33`	`+`
	`34`	`+input:focus{`
	`35`	`+ outline: none !important;`
	`36`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`	`// eslint-disable-next-line consistent-return`
`3`	`3`	`export const reducer = (state, action) => {`
`4`	`4`	`if (action.type === "CHANGE_CELL") {`
`5`		`- console.log(state);`
`6`	`5`	`const stateCells = state.cells.map((cell) => {`
`7`	`6`	`if (cell.id === action.payload.id) {`
`8`	`7`	`return action.payload;`
`@@ -36,6 +35,7 @@ export const reducer = (state, action) => {`
`36`	`35`	`}`
`37`	`36`
`38`	`37`	`if (action.type === "LOAD_NOTE") {`
	`38`	`+ // console.log(action.payload);`
`39`	`39`	`return { ...state, cells: action.payload };`
`40`	`40`	`}`
`41`	`41`	`};`