Update : README.md modal now has two modes #105

- generate on your own feature implemented Signed-off-by: bentshrimp <bent_shrimp@kookmin.ac.kr>
AgainIoT · Oct 10, 2023 · 145407f · 145407f
1 parent 2283068
commit 145407f
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "env-cmd": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",

diff --git a/src/components/common/StepInfo.js b/src/components/common/StepInfo.js
@@ -3,40 +3,61 @@ import { Box, Typography } from "@mui/material";
 import StepData from "../../data/StepData.json";
 import Button from "@mui/material/Button";
 import { activeState } from "../../recoil/commonState";
+import { modalVer } from "../../recoil/templateState";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { eachStepState, modalState } from "../../recoil/commonState";
 
 //StepInfo: Component for description of each step (located on the left side of the screen)
 const StepInfo = () => {
   //using recoil for matching step information and step
   const activeStep = useRecoilValue(activeState);
+  const [reorderable, setReorderable] = useRecoilState(modalVer);
 
   return (
     <div>
       {StepData.StepData.filter((eachStep) => eachStep.id === activeStep).map(
         (it) => {
-          const [modalValue, setModalValue] = useRecoilState(modalState(it.type));
-          const handleOpen = () => setModalValue(true);
+          const [modalValue, setModalValue] = useRecoilState(
+            modalState(it.type),
+          );
+          const handleOpen = (toggle) => {
+            setModalValue(true);
+            setReorderable(toggle);
+          };
           return (
             <div key={it.step}>
-              <Box_><StStepInfo>
-                <TitleH1>
-                  Step{it.step}. {it.title}
-                </TitleH1>
-                <ContentP>{it.content}</ContentP>
-                {activeStep > 1 ? (
-                  <ButtonWrapper
-                    size="large"
-                    variant="text"
-                    disableElevation
-                    onClick={handleOpen}
-                  >
-                    Find Template
-                  </ButtonWrapper>
-                ) : (
-                  <div></div>
-                )}
-              </StStepInfo></Box_>
+              <Box_>
+                <StStepInfo>
+                  <TitleH1>
+                    STEP{it.step}. {it.title}
+                  </TitleH1>
+                  <ContentP>{it.content}</ContentP>
+                  {activeStep > 1 ? (
+                    <ButtonWrapper
+                      size="large"
+                      variant="text"
+                      disableElevation
+                      onClick={() => handleOpen(false)}
+                    >
+                      Find Template
+                    </ButtonWrapper>
+                  ) : (
+                    <div></div>
+                  )}
+                  {activeStep > 2 ? (
+                    <ButtonWrapper
+                      size="large"
+                      variant="text"
+                      disableElevation
+                      onClick={() => handleOpen(true)}
+                    >
+                      Generate on your own
+                    </ButtonWrapper>
+                  ) : (
+                    <div></div>
+                  )}
+                </StStepInfo>
+              </Box_>
             </div>
           );
         },
@@ -49,26 +70,29 @@ const StStepInfo = styled.div`
   display: flex;
   margin-top: 10%;
   flex-direction: column;
+  justify-content: space-evenly;
   align-items: center;
   gap: 2rem;
 `;
 
 const TitleH1 = styled(Typography)`
-  font-size: 2.2rem;
+  font-size: 2.3rem;
+  font-weight: bolder;
   text-align: center;
 `;
 
 const ContentP = styled.p`
   margin: 0rem 2rem 0rem 2rem;
   text-align: justify;
-  font-size: 1.3rem;
+  word-wrap: break-word;
+  font-size: 1.7rem;
   line-height: 2.2rem;
 `;
 
 const ButtonWrapper = styled(Button)`
   padding: 0.8rem 1.6rem 0.8rem 1.6rem;
   height: 100%;
-  margin-top: 50%;
+  margin: 1rem;
   font-size: 2rem;
 `;
 

diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
@@ -10,22 +10,27 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import axios from "axios";
 import {
   templateContent,
   templatePreviewState,
   templateSelectState,
+  modalVer,
 } from "../../../recoil/templateState";
 
 // props -> type(pr, readme, contributing)
 export function TemplateList(props) {
+  // React state to track order of items
+  const [selectedData, setSelectedData] = useState([]);
   const [data, setData] = useState([]);
   const url = process.env.REACT_APP_SERVER_URL + "/file/" + props.type;
 
   const selectValue = useRecoilValue(templateSelectState(props.type));
   const [showValue, setShowValue] = useRecoilState(
     templatePreviewState(props.type),
   );
+  const reorderable = useRecoilValue(modalVer);
 
   const handleSelect = (value) => {
     setShowValue({
@@ -35,6 +40,22 @@ export function TemplateList(props) {
       repoUrl: value.repoUrl,
       content: value.content,
     });
+    let tmp = selectedData;
+    tmp.push(value.title);
+    setSelectedData(tmp);
+    console.log(selectedData);
+  };
+
+  const handleDrop = (droppedItem) => {
+    // Ignore drop outside droppable container
+    if (!droppedItem.destination) return;
+    let updatedList = [...selectedData];
+    // Remove dragged item
+    const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
+    // Add dropped item
+    updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
+    // Update State
+    setSelectedData(updatedList);
   };
 
   useEffect(() => {
@@ -62,6 +83,10 @@ export function TemplateList(props) {
     };
   }, []);
 
+  useEffect(() => {
+    console.log(selectedData);
+  }, [selectedData]);
+
   return (
     <Item>
       <Typography
@@ -102,6 +127,45 @@ export function TemplateList(props) {
             overscanCount: 5,
           }}
         >
+          {reorderable ? (
+            <DragDropContext onDragEnd={handleDrop}>
+              <Droppable droppableId="list-container">
+                {(provided) => (
+                  <div
+                    className="list-container"
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                  >
+                    {selectedData.map((item, index) => (
+                      <Draggable key={item} draggableId={item} index={index}>
+                        {(provided) => (
+                          <div
+                            className="item-container"
+                            ref={provided.innerRef}
+                            {...provided.dragHandleProps}
+                            {...provided.draggableProps}
+                          >
+                            <div className="left-item">{item}</div>
+                            <button
+                              className="right-item"
+                              onClick={() => {
+                                console.log(item);
+                              }}
+                            >
+                              remove
+                            </button>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          ) : (
+            <div></div>
+          )}
           <div>
             {data.map((it) => (
               <div key={it._id}>
@@ -114,15 +178,19 @@ export function TemplateList(props) {
                 >
                   <ListItemButton>
                     <ListItemText
-                      primary={props.type === "contributing" ? it.type : it.title}
+                      primary={
+                        props.type === "contributing" ? it.type : it.title
+                      }
                       id="PR-desc"
                       variant="h6"
                       gutterBottom
                       color="textSecondary"
                       m={2}
                     />
                     <ListItemText
-                      primary={props.type === "contributing" ? it.title : it.repoName}
+                      primary={
+                        props.type === "contributing" ? it.title : it.repoName
+                      }
                       id="PR-desc"
                       variant="h6"
                       gutterBottom

diff --git a/src/index.js b/src/index.js
@@ -9,11 +9,11 @@ RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <RecoilRoot>
-      <App />
-    </RecoilRoot>
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>,
+  // </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/src/pages/ReadmeTemplatePage.js b/src/pages/ReadmeTemplatePage.js
@@ -11,15 +11,15 @@ import MDEditor from "@uiw/react-md-editor";
 
 
 function ReadmeTemplatePage() {
-  const [modalValue, setModalValue] = useRecoilState(modalState("readme"));
-  const [content, setContent] = useRecoilState(templateContent("readme"));
+  // const [modalValue, setModalValue] = useRecoilState(modalState("readme"));
+  // const [content, setContent] = useRecoilState(templateContent("readme"));
   const [stepComplete, setStepComplted] = useRecoilState(eachStepState("5"));
 
   useEffect(() => {
     setStepComplted(true);
   }, []);
 
-  const handleOpen = () => setModalValue(true);
+  // const handleOpen = () => setModalValue(true);
 
   return (
     <StReadmeTemplatePage>

diff --git a/src/recoil/templateState.js b/src/recoil/templateState.js
@@ -17,3 +17,8 @@ export const templateContent = atomFamily({
   key: "templateContent",
   default: "",
 });
+
+export const modalVer = atom({
+  key: "reorderable",
+  default: false,
+});
diff --git a/src/routes/router.js b/src/routes/router.js
@@ -1,7 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainPage from "../pages/MainPage";
 import LoginPage from "../pages/Login";
-import SelectTypePage from "../pages/SelectTypePage";
+// import SelectTypePage from "../pages/SelectTypePage";
 import PRTemplatePage from "../pages/PRTemplatePage";
 import { Layout } from "../layout/Layout";
 import CreateRepo from "../pages/CreateRepoPage";
@@ -15,7 +15,7 @@ const Router = () => {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/login" element={<LoginPage />} />
-        <Route path="/select" element={<SelectTypePage />} />
+        {/* <Route path="/select" element={<SelectTypePage />} /> */}
         <Route element={<Layout />}>
           <Route path="/step1" element={<CreateRepo />} />
           <Route path="/step2" element={<LicensePage />} />