denvudd / react-dbmovies.github.io Goto Github PK

{
  "name": "react-tbmovies",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.1.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "ahooks": "^3.7.7",
    "antd": "^5.4.7",
    "classnames": "^2.3.2",
    "clipboard": "^2.0.11",
    "dayjs": "^1.11.7",
    "lodash.debounce": "^4.0.8",
    "next": "13.4.2",
    "next-redux-wrapper": "^8.1.0",
    "numeral": "^2.0.6",
    "react": "18.2.0",
    "react-content-loader": "^6.2.1",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "react-youtube": "^10.1.0",
    "sass": "^1.62.1",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@types/lodash.debounce": "^4.0.7",
    "@types/numeral": "^2.0.2"
  }
}

import React from "react";
import DetailLayout from "@/layouts/DetailsLayout";
import MovieDetailsBlock from "@/components/MovieDetailsBlock/MovieDetailsBlock";
import {
  getMovieDetails,
  getRunningQueriesThunk,
} from "@/redux/api/movies/slice";
import { wrapper } from "@/redux/store";

interface MovieDetails {
  id: number;
}

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    const { id } = context.query;

    if (typeof id === "string") {
      await store.dispatch(
        getMovieDetails.initiate({ id, params: "language=uk-UA&page=1" })
      );
    }

    await Promise.all(store.dispatch(getRunningQueriesThunk()));

    return {
      props: { id: id },
    };
  }
);

const MovideDetails: React.FC<MovieDetails> = ({ id }) => {
  const { data } = getMovieDetails.useQuery({
    id,
    params: "language=uk-UA&page=1",
  });

  return (
    <>
      <DetailLayout>
        {data && <MovieDetailsBlock id={id} data={data} />}
      </DetailLayout>
    </>
  );
};

export default MovideDetails;