Modularize paste UI and extract services/utilities

src/components/App/App.jsx

@@ -1,84 +1,52 @@
-import React, { useState } from "react";
-import Header from "../Header/Header";
-
-import Typing from "../Typing/Typing";
-import axios from "axios";
+import React, { useCallback, useState } from "react";
 import { Route, Switch, useHistory, withRouter } from "react-router-dom";
+import { toast } from "react-toastify";
+import useDarkMode from "use-dark-mode";
+import Header from "../Header/Header";
+import HomePage from "../HomePage/HomePage";
 import SharePage from "../SharePage/SharePage";
-import style from "./App.module.css";
 import ToggleDarkMode from "../ToggleDarkMode/ToggleDarkMode";
-import { ToastContainer, toast } from 'react-toastify';
-
-// Dark mode custom
-import useDarkMode from 'use-dark-mode';
+import { createPaste } from "../../services/pasteService";
+import { hasPasteContent } from "../../utils/sanitizePasteContent";
+import style from "./App.module.css";
 
 const App = () => {
   const history = useHistory();
   const [shareText, setShareText] = useState("");
-  const [created, setCreated] = useState(false);
-
   const darkMode = useDarkMode(false);
 
-  //   const [routeNav, setRouteNav] = useState(false);
-
-  const handleInputChange = (inputValue) => {
+  const handleInputChange = useCallback((inputValue) => {
     setShareText(inputValue);
-  };
+  }, []);
 
-  const onSubmit = (inputValue) => {
-    setCreated(true);
-    console.log("pressed dude");
-    // console.log(shareText);
-    //http://localhost:4000
-    console.log("Text:"+shareText);
-    if(shareText === "<p><br></p>" || !shareText ) {
-      console.log("Empty Text");
+  const onSubmit = async () => {
+    if (!hasPasteContent(shareText)) {
       toast.error("Error : Empty Text");
-
-    } else {
-      axios
-        .post("https://justpasteitapi.herokuapp.com/add", { content: shareText })
-        .then((response) => {
-          let id = response.data["_id"];
-          history.push("/" + id);
+      return;
+    }
 
-          console.log(id);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    try {
+      const paste = await createPaste(shareText);
+      history.push(`/${paste._id}`);
+    } catch (error) {
+      toast.error("Error : Unable to save text");
+      console.error(error);
     }
-  }
+  };
 
   return (
     <div>
-      <Header headTitle="Just Pasteit"/>
-      <ToggleDarkMode darkMode={darkMode}/>
+      <Header headTitle="Just Pasteit" />
+      <ToggleDarkMode darkMode={darkMode} />
       <Switch>
         <Route exact path="/">
-          <Typing handleInputChange={handleInputChange} onSubmit={onSubmit} />
-          <ToastContainer 
-          toastStyle={{
-
-            paddingLeft:'5rem'
-          }}
-          position="bottom-center"
-          autoClose={1000}
-          hideProgressBar={true}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          />
+          <HomePage handleInputChange={handleInputChange} onSubmit={onSubmit} />
         </Route>
         <Route exact path="/:id">
           <SharePage />
         </Route>
       </Switch>
-      <div className={style.container}>
-      </div>
+      <div className={style.container} />
     </div>
   );
 };

src/components/HomePage/HomePage.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import Typing from "../Typing/Typing";
+import { defaultToastConfig } from "../../config/toastConfig";
+
+const HomePage = ({ handleInputChange, onSubmit }) => (
+  <>
+    <Typing handleInputChange={handleInputChange} onSubmit={onSubmit} />
+    <ToastContainer
+      {...defaultToastConfig}
+      toastStyle={{
+        paddingLeft: "5rem",
+      }}
+    />
+  </>
+);
+
+export default HomePage;

src/components/Modal/Modal.jsx

@@ -3,11 +3,12 @@ import "./Modal.css";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import Button from '../Button/Button';
+import Button from "../Button/Button";
+import { defaultToastConfig, toastStyle } from "../../config/toastConfig";
+import { getShareUrl } from "../../utils/shareUrl";
+
 const MODAL_STYLES = {
   position: "fixed",
-  // display: 'flex',
-  // flexFlow: 'column',
   width: "50%",
   top: "50%",
   left: "50%",
@@ -28,31 +29,18 @@ const OVERLAY_STYLES = {
   zIndex: 1000,
 };
 
-const getUrl = (id) => {
-  return `${window.location.protocol}//${window.location.host}/${id}`;
-
-}
-
-export default function Modal({ id, open, children, onClose }) {
+const Modal = ({ id, open, onClose }) => {
   if (!open) return null;
-  console.log(id);
-  var url = getUrl(id);
+
+  const url = getShareUrl(id);
   const notify = () => toast("Link Copied📋");
+
   return (
     <>
       <ToastContainer
-      toastStyle={{
-        color: 'black',
-        paddingLeft:'6rem'
-      }}
-        position="bottom-center"
-        autoClose={1000}
-        hideProgressBar={true}
-        newestOnTop={true}
-        closeOnClick
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
+        {...defaultToastConfig}
+        toastStyle={toastStyle("6rem")}
+        newestOnTop
       />
       <div style={OVERLAY_STYLES} />
       <div style={MODAL_STYLES}>
@@ -64,39 +52,15 @@ export default function Modal({ id, open, children, onClose }) {
         </div>
 
         <div className="modalbutton">
-          <Button 
-            name="Close"
-            onClick={onClose}
-            color="red"
-            />
+          <Button name="Close" onClick={onClose} color="red" />
 
           <CopyToClipboard text={url}>
-            <Button
-              name="Copy"
-              onClick={notify}
-              />
+            <Button name="Copy" onClick={notify} />
           </CopyToClipboard>
-
-          {/* <button onClick={()=>{
-                  window.open("https://www.facebook.com/sharer/sharer.php?u=","facebook-share-dialog","width=800,height=600")
-
-              }} 
-              className="end-buttons share-btn">
-                  Share
-              </button>
-
-              <button onClick={()=>{
-                  window.open( "https://twitter.com/intent/tweet?text=Check%20this%20out%20" ,
-              "Twitter",
-              "width=800,height=600")
-
-              }} 
-              className="end-buttons tweet-btn">
-                  Tweet
-              </button> */}
         </div>
       </div>
     </>
   );
-  // document.getElementById('portal')
-}
+};
+
+export default Modal;

src/components/ShareActions/ShareActions.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import Button from "../Button/Button";
+import style from "../SharePage/SharePage.module.css";
+import { defaultToastConfig, toastStyle } from "../../config/toastConfig";
+
+const ShareActions = ({ onCopy, onShare }) => (
+  <div className={style.actions}>
+    <Button name="Share" onClick={onShare} />
+    <Button name="Copy" onClick={onCopy} />
+    <ToastContainer
+      {...defaultToastConfig}
+      toastStyle={toastStyle("3rem")}
+    />
+  </div>
+);
+
+export default ShareActions;

src/components/ShareContent/ShareContent.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import style from "../SharePage/SharePage.module.css";
+
+const ShareContent = ({ content }) => (
+  <div className={style.textarea_exp}>
+    <p dangerouslySetInnerHTML={{ __html: content }} />
+  </div>
+);
+
+export default ShareContent;

src/components/SharePage/SharePage.jsx

@@ -1,87 +1,45 @@
-import React, { useState,useEffect}from "react";
-import {useParams} from 'react-router-dom';
-import Button from "../Button/Button";
-import Modal from '../Modal/Modal'
-import axios from "axios";
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import copy from "copy-to-clipboard";
-import style from "./SharePage.module.css";
-import { ToastContainer, toast } from 'react-toastify';
-import xss from 'xss';
-import 'react-toastify/dist/ReactToastify.css';
-import 'highlight.js/styles/atom-one-light.css';
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import "highlight.js/styles/atom-one-light.css";
+import Modal from "../Modal/Modal";
+import ShareActions from "../ShareActions/ShareActions";
+import ShareContent from "../ShareContent/ShareContent";
+import { getPaste } from "../../services/pasteService";
+import { sanitizePasteContent } from "../../utils/sanitizePasteContent";
 
 const SharePage = () => {
-  const {id} = useParams();
-  const [isOpen, setIsOpen] = useState(false)
-  const [data, setData] = useState('');
-
-  const options = {
-    whiteList: {
-      pre: ["class"],
-      span: ["class"],
-      p: [],
-      br: [],
-      strong: [],
-      em: [],
-      u: [],
-      ul: [],
-      li: [],
-      ol: [],
-      a: ["href", "rel", "target"]
-    }
-  };
+  const { id } = useParams();
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
-      const result = await axios(
-        `https://justpasteitapi.herokuapp.com/add/${id}`
-      );
-
-      let text = xss(result.data['content'], options);
-      setData(text);
-      console.log(result.data['content']); // Debug log
+      try {
+        const paste = await getPaste(id);
+        setData(sanitizePasteContent(paste.content));
+      } catch (error) {
+        toast.error("Error : Unable to load text");
+        console.error(error);
+      }
     };
- 
+
     fetchData();
-  }, [data, id]);
+  }, [id]);
 
-
-  const notify = () =>{
+  const notify = useCallback(() => {
     copy(data);
     toast("Text Copied Successfully 📋");
-  }
-
+  }, [data]);
 
   return (
     <div>
-    <div className={style.textarea_exp}>
-      <p dangerouslySetInnerHTML={{__html: data}}></p> {/*Data was sanitized with the XSS library*/}
-    </div>
-
-    <div className={style.actions}>
-    <Button name="Share" onClick={() => setIsOpen(true)} />
-    <Button name="Copy" onClick={notify} />
-
-
-<ToastContainer
-toastStyle={{
-  color: 'black',
-  paddingLeft:'3rem'
-}}
-position="bottom-center"
-autoClose={1000}
-hideProgressBar={true}
-newestOnTop={false}
-closeOnClick
-rtl={false}
-pauseOnFocusLoss
-draggable
-pauseOnHover
-/>
-    </div>
-    <Modal id={id} open={isOpen} onClose={() => setIsOpen(false)}/> 
+      <ShareContent content={data} />
+      <ShareActions onCopy={notify} onShare={() => setIsOpen(true)} />
+      <Modal id={id} open={isOpen} onClose={() => setIsOpen(false)} />
     </div>
-
   );
 };