pages/index.tsx

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import React, { useLayoutEffect, useEffect, useState } from "react";
import styled from "styled-components";
import Block from "../components/Block";
import Link from "next/link";
import { instance } from "../utils/instance";
import { Props } from "../types/type";
import { useRouter } from "next/router";

function Home() {
  const [posts, setPosts] = useState<Props[]>([]);
  const router = useRouter();

  useLayoutEffect(() => {
    const checkLogin = () => {
      if (localStorage.getItem("token") === null) {
        router.push("/Signup");
        //location.href = "/Signup";
      }
    };
    checkLogin();
  }, []);

  useLayoutEffect(() => {
    const jwt = localStorage.getItem("token");
    instance
      .get("/users/@me", {
        headers: {
          Authorization: `Bearer ${jwt}`,
        },
      })
      .then((res) => {
        localStorage.setItem("user_id", res.data.id);
        instance
          .get("/posts", {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
          })
          .then((res) => setPosts(res.data));
      });
  }, []);

  const LogOut = () => {
    localStorage.removeItem("token");
    location.href = "/Signup";
  };

  const GoMyPage = () => {
    const user_id = localStorage.getItem("user_id");
    location.href = `/User/${user_id}`;
  };

  return (
    <div>
      <Head>
        <title>OnakaSNS</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header>
        <HeaderButton>
          <PostIco>
            <Link href="/Edit">
              <SvgDiv>
                <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
                  <path d="M9 39h2.2l22.15-22.15-2.2-2.2L9 36.8Zm30.7-24.3-6.4-6.4 2.1-2.1q.85-.85 2.1-.85t2.1.85l2.2 2.2q.85.85.85 2.1t-.85 2.1Zm-2.1 2.1L12.4 42H6v-6.4l25.2-25.2Zm-5.35-1.05-1.1-1.1 2.2 2.2Z" />
                </svg>
              </SvgDiv>
            </Link>
          </PostIco>
          <LogOutButton onClick={LogOut}>Sign Out</LogOutButton>
          <LogOutButton onClick={GoMyPage}>My Page</LogOutButton>
        </HeaderButton>
        <LogoImg src="/logo.png" height="60px" />
      </Header>
      <BG>
        <Entire>
          <CenterSection>
            {posts.map((e) => {
              return (
                <BlockLine key={e.id}>
                  <Block props={e} />
                </BlockLine>
              );
            })}
          </CenterSection>
        </Entire>
      </BG>
    </div>
  );
}
export default Home;

const Header = styled.div`
  height: 70px;
  width: 100%;
  /* top:0px;
  left:0px */
  background-color: #ffc501;
  border-bottom: 2px solid #77477e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
`;

const HeaderButton = styled.div`
  display: flex;
  align-items: center;
`;

const LogoImg = styled.img`
  margin-right: 20px;
`;

const BG = styled.div`
  background-color: #fe9600;
  background-size: cover;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  height: 100%;
  padding-top: 70px;
`;

const Entire = styled.div`
  display: flex;
  justify-content: center;
`;

const CenterSection = styled.div`
  width: 800px;
  min-height: 100vh;
  background-color: #ffee4a;
`;

const BlockLine = styled.div`
  text-align: center;
  display: flex;
  justify-content: center;
`;

const PostIco = styled.div`
  background-color: #ffee4a;
  height: 60px;
  width: 120px;
  padding: 7px;
  border-radius: 25px;
  margin: 0 5px;
  display: flex;
  align-content: center;
  justify-content: center;
  border: #77477e solid 2px;
`;

const SvgDiv = styled.div`
  fill: #77477e;
`;

const LogOutButton = styled.button`
  background-color: #ffee4a;
  height: 60px;
  width: 120px;
  padding: 7px;
  margin: 0 5px;
  border-radius: 25px;
  border: #77477e solid 2px;
  color: #77477e;
  font-size: 16px;
  font-weight: bold;
`;

// .color-0 { color: #fe9600; }
// .color-1 { color: #ffc501; }
// .color-2 { color: #ffee4a; }
// .color-3 { color: #77477e; }
// .color-4 { color: #03001c; }