components/layout/Layout.js

import React, { useEffect } from "react";
import Head from "next/head";
import Header from "./Header";
import Footer from "./Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch, useSelector } from "react-redux";

const Layout = ({ children, title = "Zango", description = "Zango" }) => {
  const dispatch = useDispatch();
//   const { loadedUser } = useSelector(state => state.loadedUser);
// console.log(">>>", loadedUser);
  useEffect(() => {
    dispatch(loadUser());
  }, []);
  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8"></meta>
        {/* <meta name="viewport" content="initial-scale=1.0,width=device-width" /> */}
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
      </Head>

      <Header></Header>
      <ToastContainer position="bottom-right" />
      {children}
      <Footer></Footer>
    </div>
  );
};

export default Layout;