fix(client): ProgressBar,SponsoredBy js->t

fixing #109

client/src/components/ProgressBar.jsx → 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>
       ) : (
         <></>
       )}

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;

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;
+}