diff --git a/src/Redux/slice/useCaseSlice.js b/src/Redux/slice/useCaseSlice.js new file mode 100644 index 0000000..da95448 --- /dev/null +++ b/src/Redux/slice/useCaseSlice.js @@ -0,0 +1,13 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; + +export const useCaseApi = createApi({ + reducerPath: 'UseCases/:title_slug', + baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }), + endpoints: (builder) => ({ + getUseCase: builder.query({ + query: () => 'tech/active', + }), + }), +}); + +export const { useGetUseCaseQuery } = useCaseApi; \ No newline at end of file diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js index 46a4633..aebae9d 100644 --- a/src/Redux/store/store.js +++ b/src/Redux/store/store.js @@ -9,6 +9,7 @@ import { buildPage } from '../slice/bannerSlice'; import { learnPageApi } from '../slice/learPageSlice'; import { homePageApi } from '../slice/homeSlice'; import { eventsViewApi } from '../slice/eventsViewSlice'; +import { useCaseApi } from '../slice/useCaseSlice'; const store = configureStore({ reducer: { @@ -22,6 +23,7 @@ const store = configureStore({ [learnPageApi.reducerPath]: learnPageApi.reducer, [homePageApi.reducerPath]: homePageApi.reducer, [eventsViewApi.reducerPath]: eventsViewApi.reducer, + [useCaseApi.reducerPath]: useCaseApi.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat( @@ -34,7 +36,8 @@ const store = configureStore({ buildPage.middleware, learnPageApi.middleware, homePageApi.middleware, - eventsViewApi.middleware + eventsViewApi.middleware, + useCaseApi.middleware ), // Add blogApi.middleware here }); diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index 76c331b..062921e 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -12,6 +12,7 @@ import { PopoverCloseButton, PopoverAnchor, Button, + Text, } from "@chakra-ui/react"; import { Outlet, Link, useLocation } from "react-router-dom"; import { useEffect, useState } from "react"; @@ -32,6 +33,7 @@ import marTech from "../../assets/images/Navicons/marTech.png"; import healthTech from "../../assets/images/Navicons/healthTech.png"; import security from "../../assets/images/Navicons/security.png"; import telecom from "../../assets/images/Navicons/telecom.png"; +import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice"; const NavBar = () => { const [isScrolled, setIsScrolled] = useState(false); @@ -40,6 +42,9 @@ const NavBar = () => { const [isHoveredCases, setIsHoveredCases] = useState(false); const [isHoveredCommunity, setIsHoveredCommunity] = useState(false); const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const { data } = useGetUseCaseQuery(); + console.log(data); + const useCase = data?.data?.rows; const location = useLocation(); const linkStyle = { @@ -509,135 +514,29 @@ const NavBar = () => { justifyContent={"space-between"} > - - ( + - - FinTech - - - - - - - - - AdTech - - - - - - - - - MarTech - - - - - - - - - HealthTech - - - - - - - - - Identity and Security - - - - - - - - - Telecom - - + + + {`${slug.title}`} + + + ))} @@ -779,13 +678,11 @@ const NavBar = () => { { marginBottom={"1rem"} > - HealthTech + Events diff --git a/src/components/UseCase/UseCase.jsx b/src/components/UseCase/UseCase.jsx index 3ef0ac6..9e81868 100644 --- a/src/components/UseCase/UseCase.jsx +++ b/src/components/UseCase/UseCase.jsx @@ -7,94 +7,116 @@ import { Box, Button, Image, Text } from "@chakra-ui/react"; import pdf from "../../assets/pdf/Rubix.pdf"; import cardimg from "../../assets/images/CardImg.png"; import img from "../../assets/images/pdfscreen.png"; +import { useParams } from "react-router-dom"; +import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice"; +import Loader from "../Loader/Loader"; +import NotFound from "../../pages/NotFound"; // eslint-disable-next-line react/prop-types const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => { + const { title_slug } = useParams(); + const { data, error, isLoading } = useGetUseCaseQuery(); + const useCases = data?.data?.rows; + console.log(data?.data?.rows); useEffect(() => { window.scrollTo(0, 0); }, []); + + if (isLoading) { + return ( +
+ +
+ ); + } + + const matchingUseCase = useCases + ? useCases.find((item) => item.title_slug === title_slug) + : null; + + console.log(matchingUseCase); return ( -
- - + <> + {matchingUseCase ? ( +
- - {bannerHeading} - - - {bannerSubHeading} - + + + {matchingUseCase.title} + + + {matchingUseCase.meta_description} + + + - - - - {useCase.map( - ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => ( + { }, }} > - {useCaseHeading} + {matchingUseCase.problem} { }, }} > - {useCaseSubHeading} + {matchingUseCase.solution} - {useCaseDetails?.map(({ title, description }) => ( - - - {title} - - - {description} - - - ))} - - ) - )} - - - {useCase.map((item) => ( - <> - {item.documents ? ( + - Use Cases + {matchingUseCase.problem} - ) : ( - "" - )} - - ))} - {useCase.map(({ documents }) => ( - - {documents?.map((item) => ( - - - - - - {item.title} - + + {matchingUseCase.solution} + + + + + {/* + {useCase.map((item) => ( + <> + {item.documents ? ( + + Use Cases + + ) : ( + "" + )} + + ))} + {useCase.map(({ documents }) => ( + + {documents?.map((item) => ( + - - { - - - - } + > + { + + + + } + + - + ))} ))} - - ))} - - -
+ */} + +
+ ) : ( + + )} + ); }; diff --git a/src/pages/NewsPage.jsx b/src/pages/NewsPage.jsx index 776c7dd..a98bba4 100644 --- a/src/pages/NewsPage.jsx +++ b/src/pages/NewsPage.jsx @@ -1,7 +1,11 @@ +import { useEffect } from "react"; import NewsContent from "../components/NewsPage/NewsContent"; import NewsHeader from "../components/NewsPage/NewsHeader"; const NewsPage = () => { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return ( <> diff --git a/src/pages/UseCases.jsx b/src/pages/UseCases.jsx index c25498a..8e8de10 100644 --- a/src/pages/UseCases.jsx +++ b/src/pages/UseCases.jsx @@ -14,12 +14,13 @@ const UseCases = ({ }, []); return ( <> - + {/* + /> */} ); }; diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx index 7bc3b7e..24a2aff 100644 --- a/src/routes/_routes.jsx +++ b/src/routes/_routes.jsx @@ -25,7 +25,6 @@ import security from "../assets/images/i&security-bg.png"; import tele from "../assets/images/Telecom-bg.png"; import healthTech from "../assets/images/health-tech.png"; import Form from "../components/Contact/Form"; -import UseCase from "../components/UseCase/UseCase"; import ResourcesPage from "../pages/ResourcesPage"; import VideoInternal from "../components/VideoInternal/VideoInternal"; import Ecosystem from "../pages/Ecosystem"; @@ -116,84 +115,88 @@ export const route = [ path: "*", element: , }, - { - path: "fin-tech", - element: ( - - ), + path: "UseCases/:title_slug", + element: , }, - { - path: "ad-tech", - element: ( - - ), - }, - { - path: "mar-tech", - element: ( - - ), - }, - { - path: "health-tech", - element: ( - - ), - }, - { - path: "identity-security", - element: ( - - ), - }, - { - path: "telecom", - element: ( - - ), - }, + // { + // path: "fin-tech", + // element: ( + // + // ), + // }, + + // { + // path: "ad-tech", + // element: ( + // + // ), + // }, + // { + // path: "mar-tech", + // element: ( + // + // ), + // }, + // { + // path: "health-tech", + // element: ( + // + // ), + // }, + // { + // path: "identity-security", + // element: ( + // + // ), + // }, + // { + // path: "telecom", + // element: ( + // + // ), + // }, ];