sortable Hoc (done)

React/CodePen/src/components/editor.js

@@ -30,7 +30,7 @@ import"ace-builds/src-noconflict/worker-css";
 const Editor = ({data = {type: "html", text: "", name: ""}, onChange, onDelete}) => {
     return (
         <div style={{display: "inline-block", width: "calc(95%/3)", marginBottom: "10px", marginTop: "40px", backgroundColor: "#FFE8DB", marginLeft:"1%", border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"}}>
-            <button type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>
+            <button type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>  
                 <span className="text-danger" aria-hidden="true">
                     &times;
                 </span>

React/CodePen/src/components/snippet.js

@@ -176,17 +176,21 @@ bluek.onclick = () => {
         return () => clearTimeout(timeout);
     }, [html, css, js]);
 
-    const SortableItem = sortableElement(({value, index}) => (
-		<div>
-			<div>{value.name}</div>
-		</div>
-	))
+    const [click, setClick] = useState(false)
+
+    const SortableItem = sortableElement(({value, index}) => {
+    	return (
+
+    			<span><ins>{value.name || "new edit "}</ins> &nbsp; </span> 
+    		)
+    	
+		
+	})
 
 	const SortableList = sortableContainer(({items})=>{
 		return(
 			<div>
-				{items
-					.map((value, index) => (
+				{items?.map((value, index) => (
 						<SortableItem value={value} index={index} />
 					))
 				}
@@ -202,17 +206,23 @@ bluek.onclick = () => {
 
   return (
     <div>
-      <SortableList items={files} onSortEnd={onSortEnd} axis='xy' />
+
+     
 
 
         <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
                 height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
 
-
+        <br/>
+        <div style={{marginTop:"20px", textAlign:'center'}}>
+        	<p><b>Click here </b><span>to reverse the snippets</span></p>
+        	<SortableList items={files} onSortEnd={onSortEnd} />
+        </div>
+ 		
         {files.map((data, index) => (
             <>
                 <Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
-                    onChange={({type, name, text}) => setFiles([...files.slice(0, index),{type, name, text},...files.slice(index + 1),])}
+                    onChange={({type, name, text}) => setFiles([...files.slice(0, index),{type, name, text},...files.slice(index + 1),] )}
                 />
             </>
         ))}
@@ -220,7 +230,7 @@ bluek.onclick = () => {
         <br />
         <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
           <div>
-              <button className="btn btn-primary" style={{}} onClick={()=> setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}}>
+              <button className="btn btn-primary" style={{}} onClick={()=>setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}} >
                 Add editor
               </button>       
           </div>

React/CodePen/src/pages/project.js

@@ -6,6 +6,7 @@ import Editor 				      from "../components/editor";
 import {actionSnippetAdd} 	from "../actions/actionSnippetAdd";
 import {Link} 				      from "react-router-dom";
 import {Redirect} 			    from "react-router";
+import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
 
 
 const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, descriptionText, filesArr, nameText,}) => {
@@ -38,7 +39,7 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
         return el?.type === "javascript";
     })[0]?.text;
 
-    console.log(js);
+    console.log(files);
 
   
   useEffect(() => {
@@ -55,6 +56,33 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
   }, [html, css, js]);
 
 
+  const SortableItem = sortableElement(({value, index}) => {
+    console.log(value);
+      return (
+          <span>{value.name || "new edit "}&nbsp; </span> 
+      )
+  })
+
+  const SortableList = sortableContainer(({items})=>{
+
+    console.log(items)
+  
+    return(
+      <div>
+        {items?.map((value, index) => (
+            <SortableItem value={value} index={index} />
+          ))
+        }
+      </div>
+    )
+  })
+
+  const onSortEnd = ({oldIndex, newIndex}) => {
+    let arr = arrayMove(filesArr, oldIndex, newIndex);
+    setFiles(arr)
+  }
+
+
   return (
     <div>
         <Link to="/">
@@ -74,6 +102,12 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
         	<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
                 style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>
 
+
+          <div style={{marginTop:"20px", textAlign:'center'}}>
+              <p onClick={()=>console.log(files)}><b>Click here </b><span>to reverse the snippets</span></p>
+              <SortableList items={files} onSortEnd={onSortEnd} />
+          </div>
+
 	        {files?.map((data, index) => (
 	            <>
 	                <Editor onDelete={() => setFiles(files?.filter((item) => item !== data))} data={data}