Merge pull request #127 from kjannette/forward8

Forward8

src/Components/Document/ReqEditPage.js

@@ -60,19 +60,6 @@ const RequestEditPage = () => {
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
 
-  const headerString =
-    documentType === "interrogatories" ? (
-      "Response to Interrogatories"
-    ) : documentType === "admissions" ? (
-      "Response to Request for Admissions"
-    ) : documentType === "production" ? (
-      "Response to Request for Production"
-    ) : documentType === "combined-numbered" ? (
-      "Response to Interrogatories and Request for Production"
-    ) : (
-      <></>
-    );
-
   useEffect(() => {
     if (!appUserId || !docId) {
       setDocument(null);
@@ -92,16 +79,15 @@ const RequestEditPage = () => {
     }
     getOutgoingRequests(documentId)
       .then((data) => {
-        const resp = data[0].requests.map((item, index) => {
+        const merged = [...foundationRogs, ...data[0].requests];
+        const resp = merged.map((item, index) => {
           // NEVER CHANGE THIS:
           return { showInputEle: false, text: item.text, index: index };
         });
-        const merged = [...foundationRogs, ...resp];
-        setRequests(merged);
+        setRequests(resp);
       })
       .catch((err) => console.log(err));
   }, [documentId]);
-
   async function getCase(parentCaseId) {
     try {
       const docRef = doc(db, "cases", `${parentCaseId}`);
@@ -263,11 +249,13 @@ const RequestEditPage = () => {
   };
 
   const handleEditValue = (e, i) => {
+    console.log("e,i ", e, i);
     const editingRes = requests?.map((r) => {
       if (r.index === i) {
+        console.log("r.inex", r.index);
         return {
           ...r,
-          resp: e.target.value,
+          text: e.target.value,
         };
       }
       return r;
@@ -349,16 +337,30 @@ const RequestEditPage = () => {
               </div>
             ))}
           </div>
-          <div className="doc-editing-sub-wrapper">
+          <div className="req-editing-sub-wrapper">
             <div className="pleading-header">INTERROGATORIES</div>
             {requests?.map((req, i) => (
-              <div className="request-text-up-row">
-                <div className="request-text-number-col">{`${i + 1}.`}</div>
-                <div>{req?.text}</div>
+              <div className="req-item-inner-div">
+                <EditElement
+                  value={
+                    requests && requests.length > 1
+                      ? // NEVER CHANGE THIS
+                        req.text
+                      : null
+                  }
+                  setShowInputEle={setShowInputEle}
+                  showInputEle={
+                    requests && requests.length > 1 ? req.showInputEle : null
+                  }
+                  handleFocus={handleFocus}
+                  handleEditValue={handleEditValue}
+                  handleBlur={handleBlur}
+                  i={i}
+                />
               </div>
             ))}
           </div>
-          <div className="doc-editing-sub-wrapper">
+          <div className="req-editing-sub-wrapper">
             <div className="pleading-header">REQUESTS FOR PRODUCTION</div>
             {standardProd?.map((req, i) => (
               <div className="request-text-up-row">

src/styles/docedit-page.scss

@@ -35,6 +35,16 @@
   margin-bottom: 25px;
 }
 
+.req-editing-sub-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 25px;
+  min-width: 700px;
+}
+
 .doc-editing-instructions-header {
   font-family: Roboto;
   text-decoration: underline;
@@ -335,8 +345,11 @@
   min-width: 24px;
   margin-right: 6px;
 }
+
 .outer-div {
-  border: 1px solid #a9a9a9;
+  border: 1px solid #d1d1d1;
+  border-radius: 5px;
+  border-radius: 10px;
   padding: 0px 5px;
 }
 

src/styles/edit-element.scss

@@ -1,5 +1,6 @@
 .outer-div {
-  border: 1px solid black;
+  border: 1px solid rgb(220, 220, 220);
+  border-radius: 5px;
 }
 
 .outer-div-after {
@@ -14,6 +15,7 @@
   min-height: 200px;
   resize: none;
   text-align: justify;
+  line-height: 2;
 }
 
 textarea {