fix(blog): update blog to multi step form

controllers/article.js

@@ -77,6 +77,8 @@ async function createArticle(req, res) {
       linkedin,
       linkedinContent,
       linkedinAccessToken,
+      tweet,
+      tweetConent,
     } = req.body;
 
     switch (req.body) {
@@ -191,6 +193,8 @@ async function createArticle(req, res) {
       }
     }
     if (tweet) {
+      console.log({ tweet });
+      console.log({ "yo": "no" });
       try {
         const response = await axios.get("https://api.twitter.com/2/tweets", {
           headers: {

src/Components/Form/MultiStep/MultiStepForm.css

@@ -0,0 +1,20 @@
+fieldset {   
+border: 1px groove #ddd !important;
+padding: 0 1.4em 1.4em 1.4em !important;
+margin: 0 0 1.5em 0 !important;
+-webkit-box-shadow:  0px 0px 0px 0px #000;
+box-shadow:  0px 0px 0px 0px #000;
+}
+
+legend {
+font-size: 1.2em !important;
+font-weight: bold !important;
+text-align: left !important;
+width:auto;
+padding:0 10px;
+border-bottom:none;
+}   
+
+.progress-bar {
+  transition: width 0.5s ease-in-out;
+}

src/Components/Form/MultiStep/MultiStepForm.jsx

@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+import moment from "moment";
+import Step1 from "./Step1";
+import Step2 from "./Step2";
+import Step3 from "./Step3";
+import Step4 from "./Step4";
+import Step5 from "./Step5";
+import marked from "marked";
+
+const MultiStepForm = ({
+  article,
+  articleTempltes,
+  allBlogCategory,
+  history,
+  images,
+  onEdit,
+  linkedinAccessToken,
+  selectedCategory,
+  setAllBlogCategory,
+  setArticle,
+  setImages,
+  setLinkedinAccessToken,
+  setMarkdown,
+  setOnEdit,
+  setselectedCategory,
+  token,
+}) => {
+  const [step, setStep] = useState(1);
+  const tomorrowsDate = moment().add(1, "days").format("YYYY-MM-DD");
+  const threeMonthsFromToday = moment().add(3, "months").format("YYYY-MM-DD");
+  const [loading, setLoading] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [show, setShow] = useState(false);
+  const [keywords, setKeywords] = useState([]);
+  const [keywords2, setKeywords2] = useState([
+    { word: "", count: 0, percentage: "" },
+  ]);
+
+  const handleChangeInput = (e) => {
+    const { name, value } = e.target;
+    if (name === "tags") {
+      setArticle({ ...article, [name]: [value] });
+    } else {
+      setArticle({ ...article, [name]: value });
+    }
+  };
+
+  const nextStep = () => {
+    setStep(step + 1);
+  };
+
+  const prevStep = () => {
+    setStep(step - 1);
+  };
+
+  const progressPercentage = () => {
+    switch (step) {
+      case 1:
+        return 20;
+      case 2:
+        return 40;
+      case 3:
+        return 60;
+      case 4:
+        return 80;
+      case 5:
+        return 100;
+      default:
+        return 0;
+    }
+  };
+  const handleStep = () => {
+    switch (step) {
+      case 1:
+        return (
+          <Step1
+            article={article}
+            setArticle={setArticle}
+            nextStep={nextStep}
+            onEdit={onEdit}
+            setOnEdit={setOnEdit}
+            handleChangeInput={handleChangeInput}
+          />
+        );
+      case 2:
+        return (
+          <Step2
+            article={article}
+            linkedinAccessToken={linkedinAccessToken}
+            nextStep={nextStep}
+            prevStep={prevStep}
+            setArticle={setArticle}
+            setLinkedinAccessToken={setLinkedinAccessToken}
+            tomorrowsDate={tomorrowsDate}
+            threeMonthsFromToday={threeMonthsFromToday}
+          />
+        );
+      case 3:
+        return (
+          <Step3
+            article={article}
+            setArticle={setArticle}
+            prevStep={prevStep}
+            nextStep={nextStep}
+            loading={loading}
+            setLoading={setLoading}
+            images={images}
+            setImages={setImages}
+            history={history}
+            token={token}
+            onEdit={onEdit}
+            handleChangeInput={handleChangeInput}
+          />
+        );
+      case 4:
+        return (
+          <Step4
+            article={article}
+            setArticle={setArticle}
+            prevStep={prevStep}
+            nextStep={nextStep}
+            loading={loading}
+            handleChangeInput={handleChangeInput}
+            isMobileView={isMobileView}
+            onEdit={onEdit}
+            setMarkdown={setMarkdown}
+            articleTempltes={articleTempltes}
+            setselectedCategory={setselectedCategory}
+            selectedCategory={selectedCategory}
+            allBlogCategory={allBlogCategory}
+            setAllBlogCategory={setAllBlogCategory}
+            marked={marked}
+          />
+        );
+      case 5:
+        return (
+          <Step5
+            article={article}
+            setArticle={setArticle}
+            prevStep={prevStep}
+            loading={loading}
+            setShow={setShow}
+            marked={marked}
+            setKeywords={setKeywords}
+            setKeywords2={setKeywords2}
+            setLoading={setLoading}
+            keywords={keywords}
+            keywords2={keywords2}
+          />
+        );
+      default:
+        return <div>Error: Invalid step</div>;
+    }
+  };
+  return (
+    <div className="container mt-5">
+      <div class="page-header text-center">
+        <div class="well">
+          <h2>Add Article</h2>
+        </div>
+        <div className="progress mb-4">
+          <div
+            className="progress-bar"
+            role="progressbar"
+            style={{ width: `${progressPercentage()}%` }}
+            aria-valuenow={progressPercentage()}
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            {progressPercentage()}%
+          </div>
+        </div>
+      </div>
+      {handleStep()}
+    </div>
+  );
+};
+
+export default MultiStepForm;

src/Components/Form/MultiStep/Step1.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import "./MultiStepForm.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const Step1 = ({
+  article,
+  nextStep,
+  onEdit,
+  handleChangeInput,
+}) => {
+  return (
+    <fieldset>
+      <legend>Blog Info</legend>
+      <div className="container mt-5">
+        <div className="col-md-6">
+          <div>
+            <label className="control-label requiredField">
+              Title<span className="asteriskField">*</span>
+            </label>
+            <input
+              className="input-md emailinput form-control"
+              placeholder="Enter Article Title Name"
+              type="text"
+              name="title"
+              required
+              value={article.title}
+              onChange={handleChangeInput}
+              disabled={onEdit}
+            />
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div>
+            <label className="control-label requiredField">
+              Subtitle<span className="asteriskField">*</span>{" "}
+            </label>
+            <div className="controls">
+              <input
+                className="input-md emailinput form-control"
+                placeholder="Enter Article Subtitle Name"
+                type="text"
+                name="subtitle"
+                required
+                value={article.subtitle}
+                onChange={handleChangeInput}
+                disabled={onEdit}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div>
+            <label className="control-label requiredField">
+              Article Id<span className="asteriskField">*</span>{" "}
+            </label>
+            <div className="controls">
+              <input
+                className="input-md emailinput form-control mb"
+                name="article_id"
+                value={article.article_id}
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6 mb-0">
+          <div>
+            <label for="tags" className="control-label" requiredField>
+              {" "}
+              Article Language Tag
+              <span className="asteriskField">*</span>
+            </label>
+            <select
+              name="tags"
+              type="text"
+              className="form-control mb"
+              style={{ height: "auto" }}
+            >
+              <option value="">--Select One--</option>
+              <option value="java">Java</option>
+              <option value="python">Python</option>
+              <option value="javascript">JavaScript</option>
+              <option value="softwareengineering">Software Engineer</option>
+            </select>
+          </div>
+        </div>
+        <button type="button" className="btn btn-primary" onClick={nextStep}>
+          Next
+        </button>
+      </div>
+    </fieldset>
+  );
+};
+
+export default Step1;