From 52f6a1f3b28d1c48ff7fa89dd3a734d9494b713d Mon Sep 17 00:00:00 2001
From: Roman-Ojha <razzroman98@gmail.com>
Date: Wed, 29 Jun 2022 19:43:21 +0545
Subject: [PATCH] fix(client): ProgressBar,SponsoredBy js->t

fixing #109
---
 .../{ProgressBar.jsx => ProgressBar.tsx}      | 56 +++++++++-------
 client/src/components/SponsoredBy.jsx         | 66 -------------------
 client/src/components/SponsoredBy.tsx         | 64 ++++++++++++++++++
 client/src/types/custom.d.ts                  |  5 ++
 4 files changed, 103 insertions(+), 88 deletions(-)
 rename client/src/components/{ProgressBar.jsx => ProgressBar.tsx} (59%)
 delete mode 100644 client/src/components/SponsoredBy.jsx
 create mode 100644 client/src/components/SponsoredBy.tsx

diff --git a/client/src/components/ProgressBar.jsx b/client/src/components/ProgressBar.tsx
similarity index 59%
rename from client/src/components/ProgressBar.jsx
rename to client/src/components/ProgressBar.tsx
index 2a19931e..7c1c5339 100644
--- a/client/src/components/ProgressBar.jsx
+++ b/client/src/components/ProgressBar.tsx
@@ -1,30 +1,29 @@
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { hideProgressBar } from "../services/redux-actions";
+// import { hideProgressBar } from "../services/redux-actions";
+import { AppState, actionCreators } from "../services/redux";
+import { bindActionCreators } from "redux";
 
-const ProgressBar = () => {
+const ProgressBar = (): JSX.Element => {
   const updateIntervalIn = 100;
-  const ProgressBarStyle = {
-    width: "0%",
-    height: "3px",
-    position: "fixed",
-    backgroundColor: "var(--primary-color)",
-    top: "0px",
-    zIndex: "10",
-    transitionDuration: `1s`,
-  };
-  const progressBarState = useSelector((state) => state.progressBarReducer);
   const dispatch = useDispatch();
+  const progressBarState = useSelector(
+    (state: AppState) => state.progressBarReducer
+  );
+  const { hideProgressBar } = bindActionCreators(actionCreators, dispatch);
 
   useEffect(() => {
     if (progressBarState.showProgressBar) {
-      const progressBar = document.getElementsByClassName("ProgressBar")[0];
-      if (
-        progressBarState.isCompleted === true &&
-        progressBarState.showProgressBar === false
-      ) {
-        dispatch(progressBarState(hideProgressBar()));
-      }
+      const progressBar = document.getElementsByClassName(
+        "ProgressBar"
+      )[0] as HTMLDivElement;
+      // if (
+      //   progressBarState.isCompleted === true &&
+      //   progressBarState.showProgressBar === false
+      // ) {
+      //   console.log("hello");
+      //   // hideProgressBar();
+      // }
       if (!progressBarState.isCompleted) {
         let previousWidth = 15;
         let incrementInterval = 30;
@@ -51,11 +50,13 @@ const ProgressBar = () => {
       }
 
       if (progressBarState.isCompleted) {
-        const progressBar = document.getElementsByClassName("ProgressBar")[0];
+        const progressBar = document.getElementsByClassName(
+          "ProgressBar"
+        )[0] as HTMLDivElement;
         progressBar.style.width = "100%";
         progressBar.style.transitionDuration = "500ms";
         const progressCompleteTimeOut = setTimeout(() => {
-          dispatch(hideProgressBar());
+          hideProgressBar();
         }, 500);
         return () => {
           clearTimeout(progressCompleteTimeOut);
@@ -72,7 +73,18 @@ const ProgressBar = () => {
   return (
     <>
       {progressBarState.showProgressBar ? (
-        <div className="ProgressBar" style={ProgressBarStyle}></div>
+        <div
+          className="ProgressBar"
+          style={{
+            width: "0%",
+            height: "3px",
+            position: "fixed",
+            backgroundColor: "var(--primary-color)",
+            top: "0px",
+            zIndex: "10",
+            transitionDuration: `1s`,
+          }}
+        ></div>
       ) : (
         <></>
       )}
diff --git a/client/src/components/SponsoredBy.jsx b/client/src/components/SponsoredBy.jsx
deleted file mode 100644
index 97b1fc43..00000000
--- a/client/src/components/SponsoredBy.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import "../styles/components/userSuggestionFollowdBySponsoredBy.css";
-import GoogleImage from "../assets/Images/google_image.jpg";
-
-const SponsoredBy = () => {
-  const mainPageMessageOnOffState = useSelector(
-    (state) => state.changeMainPageMessageView
-  );
-  const notificationBoxState = useSelector((state) => state.notificationBox);
-  const moreProfileBoxState = useSelector(
-    (state) => state.moreProfileBoxReducer
-  );
-  const ReturnSponsoredBy = () => {
-    if (
-      !mainPageMessageOnOffState &&
-      !notificationBoxState.open &&
-      !moreProfileBoxState
-    ) {
-      return (
-        <>
-          <div className="MainPage_SponsoredBy_Container">
-            <h4 className="MainPage_SponsoredBy_Title">Sponsored By</h4>
-            <div className="MainPage_SponsoredBy_Inner_Container">
-              <img
-                className="MainPage_Sponsored_Image"
-                src={GoogleImage}
-                alt="img"
-                onClick={() => {
-                  window.open("https://www.google.com/", "_blank");
-                }}
-              />
-              <div className="MainPage_Sponsored_Name_Container">
-                <a
-                  href="https://www.google.com/"
-                  className="MainPage_Sponsored_Name"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Google
-                </a>
-                <p className="MainPage_Sponsored_Info">
-                  Best Place To Search Anything
-                </p>
-                <p className="MainPage_Sponsored_genre">Services</p>
-              </div>
-            </div>
-          </div>
-        </>
-      );
-    } else if (
-      mainPageMessageOnOffState ||
-      notificationBoxState.open ||
-      moreProfileBoxState
-    ) {
-      return <></>;
-    }
-  };
-  return (
-    <>
-      <ReturnSponsoredBy />
-    </>
-  );
-};
-
-export default SponsoredBy;
diff --git a/client/src/components/SponsoredBy.tsx b/client/src/components/SponsoredBy.tsx
new file mode 100644
index 00000000..69d4b933
--- /dev/null
+++ b/client/src/components/SponsoredBy.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import "../styles/components/userSuggestionFollowdBySponsoredBy.css";
+import GoogleImage from "../assets/Images/google_image.jpg";
+import { AppState } from "../services/redux";
+
+const SponsoredBy = (): JSX.Element => {
+  const mainPageMessageOnOffState = useSelector(
+    (state: AppState) => state.changeMainPageMessageView
+  );
+  const notificationBoxState = useSelector(
+    (state: AppState) => state.notificationBox
+  );
+  const moreProfileBoxState = useSelector(
+    (state: AppState) => state.moreProfileBoxReducer
+  );
+  if (
+    !mainPageMessageOnOffState &&
+    !notificationBoxState.open &&
+    !moreProfileBoxState
+  ) {
+    return (
+      <>
+        <div className="MainPage_SponsoredBy_Container">
+          <h4 className="MainPage_SponsoredBy_Title">Sponsored By</h4>
+          <div className="MainPage_SponsoredBy_Inner_Container">
+            <img
+              className="MainPage_Sponsored_Image"
+              src={GoogleImage}
+              alt="img"
+              onClick={() => {
+                window.open("https://www.google.com/", "_blank");
+              }}
+            />
+            <div className="MainPage_Sponsored_Name_Container">
+              <a
+                href="https://www.google.com/"
+                className="MainPage_Sponsored_Name"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Google
+              </a>
+              <p className="MainPage_Sponsored_Info">
+                Best Place To Search Anything
+              </p>
+              <p className="MainPage_Sponsored_genre">Services</p>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  } else if (
+    mainPageMessageOnOffState ||
+    notificationBoxState.open ||
+    moreProfileBoxState
+  ) {
+    return <></>;
+  } else {
+    return <></>;
+  }
+};
+
+export default SponsoredBy;
diff --git a/client/src/types/custom.d.ts b/client/src/types/custom.d.ts
index e38f6e2d..899becab 100644
--- a/client/src/types/custom.d.ts
+++ b/client/src/types/custom.d.ts
@@ -12,3 +12,8 @@ declare module "*.ico" {
   const content: any;
   export default content;
 }
+
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}