app/top/graph/page.tsx

'use client';

import { getSession } from '@/app/lib/actions';
import { fetchWeightsForGraph } from '@/app/lib/weight';
import { UserSession } from '@/app/types/UserSession';
import { GraphTabs } from '@/app/ui/graph/GraphTabs';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import annotationPlugin from 'chartjs-plugin-annotation';
import { getUser } from '@/app/lib/user';
import { redirect } from 'next/navigation';
import { User } from '@/app/types/User';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  annotationPlugin
);

type GraphWeight = {
  date: string;
  weight: number | null;
};

const dateFormatOption: Intl.DateTimeFormatOptions = { // 日付表示フォーマット（yyyy-mm-dd）
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
};

export default function Page() {
  const [dayRange, setDayRange] = useState<number>(7);
  const [goal, setGoal] = useState<number>(0.0);
  const [graphWeights, setGraphWeights] = useState<GraphWeight[]>([]);

  useEffect(() => {
    const data = async (labelDateArray: string[]) => {
      // TODO: セッションからユーザー情報取得し、email, 目標をセット
      setEmail("xxx@gmail.com");
      setGoal(64.0);

      const weightList = await fetchWeightsForGraph("xxx@gmail.com", dayRange);
      const graphList: GraphWeight[] = [];
      labelDateArray.forEach((labelDate, index) => {
        weightList.forEach((weight) => {
          const compareDate = new Date(weight.date)
            .toLocaleDateString('ja-JP', dateFormatOption)
            .split('/')
            .join('-');
          if (labelDate === compareDate) {
            graphList.push({
              date: labelDate,
              weight: weight.weight,
            });
          }
        });
        if (graphList[index] === undefined) {
          graphList.push({
            date: labelDate,
            weight: null,
          });
        }
      });

      // DB から取得したデータをソートする
      graphList.sort((a, b) => {
        const x = new Date(a.date);
        const y = new Date(b.date);
        return x.getTime() - y.getTime();
      });
      setGraphWeights(graphList);
    };

    // グラフの横軸（label）を作成
    const currentDate = new Date(
      Date.now() + (new Date().getTimezoneOffset() + 9 * 60) * 60 * 1000
    );
    const startDate = new Date(Date.now() + (new Date().getTimezoneOffset() + 9 * 60) * 60 * 1000);
    startDate.setDate(currentDate.getDate() - dayRange + 1);
    let labelDateArray: string[] = [];
    while (startDate <= currentDate) {
      labelDateArray.push(
        startDate.toLocaleDateString('ja-JP', dateFormatOption).split('/').join('-')
      );
      startDate.setDate(startDate.getDate() + 1);
    }

    // グラフの縦軸（dataset）を取得
    data(labelDateArray);
  }, [dayRange]);

  const data = {
    labels: graphWeights.map((weight) => weight['date']),
    datasets: [
      {
        label: '体重 kg',
        data: graphWeights.map((weight) => weight['weight']),
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  };

  // グラフのオプション
  const graphOptions = {
    maintainAspectRatio: false,             // 縦横比率を開発者が設定できるように
    responsive: true,                       // レスポンシブ対応
    spanGaps: true,                         // データにnullがあったとしても線を保管表示する
    scales: {
      y: {
        min: goal !== 0 ? goal - 1 : 0,     // 目標体重の -1 kg までグラフを表示
      },
    },
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: '体重グラフ',
      },
      annotation: {
        annotations: {
          goalLine: {                       // 目標体重の線
            yMin: goal !== 0 ? goal : 0,
            yMax: goal !== 0 ? goal : 0,
            borderColor: 'red',
            borderWidth: 2,
            borderDash: [2, 2],
            label: {
              display: true,
              content: '目標',
              backgroundColor: 'lightpink',
            },
          },
        },
      },
    },
  };

  return (
    <div>
      <GraphTabs setDayRange={setDayRange} />
      <div className="h-screen-60 md:h-screen-3/4 w-auto">
        <Line options={graphOptions} data={data} />
      </div>
    </div>
  );
}

app/ui/graph/GraphTabs.tsx

import React from 'react';

export const GraphTabs = ({ setDayRange }: { setDayRange: (range: number) => void }) => {
  const [openTab, setOpenTab] = React.useState(1);
  return (
    <>
      <div className="flex flex-wrap">
        <div className="w-full">
          <ul className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row" role="tablist">
            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
              <button
                className={
                  'text-xs w-full font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal ' +
                  (openTab === 1 ? 'text-white bg-green-600' : 'text-green-600 bg-white')
                }
                onClick={(e) => {
                  e.preventDefault();
                  setOpenTab(1);
                  setDayRange(7);
                }}
                data-toggle="tab"
                role="tablist"
              >
                1週間
              </button>
            </li>
            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
              <button
                className={
                  'text-xs w-full font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal ' +
                  (openTab === 2 ? 'text-white bg-green-600' : 'text-green-600 bg-white')
                }
                onClick={(e) => {
                  e.preventDefault();
                  setOpenTab(2);
                  setDayRange(31);
                }}
                data-toggle="tab"
                role="tablist"
              >
                1ヶ月
              </button>
            </li>
            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
              <button
                className={
                  'text-xs w-full font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal ' +
                  (openTab === 3 ? 'text-white bg-green-600' : 'text-green-600 bg-white')
                }
                onClick={(e) => {
                  e.preventDefault();
                  setOpenTab(3);
                  setDayRange(92);
                }}
                data-toggle="tab"
                role="tablist"
              >
                3ヶ月
              </button>
            </li>
            <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
              <button
                className={
                  'text-xs w-full font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal ' +
                  (openTab === 4 ? 'text-white bg-green-600' : 'text-green-600 bg-white')
                }
                onClick={(e) => {
                  e.preventDefault();
                  setOpenTab(4);
                  setDayRange(365);
                }}
                data-toggle="tab"
                role="tablist"
              >
                1年
              </button>
            </li>
          </ul>
        </div>
      </div>
    </>
  );
};

app/lib/weight.ts

'use server';
import { sql } from '@vercel/postgres';
import { unstable_noStore as noStore } from 'next/cache';
import { Weight } from '@/app/types/Weight';

export async function fetchWeightsForGraph(email: string, range: number) {
  noStore();
  try {
    const day = new Date();
    day.setDate(day.getDate() - range);
    const weight = await sql<Weight>`SELECT *
      FROM wm_weights
      WHERE user_id=(SELECT id FROM wm_users WHERE email=${email}) AND date > ${
      day.toISOString().split('T')[0]
    };`;
    return weight.rows;
  } catch (error) {
    throw new Error('Database Error: Failed to fetch Weight list for graph.');
  }
}  

app/top/chat/page.tsx

'use client';

import { AnimatePresence } from 'framer-motion';
import { useState } from 'react';
import { Message } from '@/app/types/Message';
import { Chat } from '@/app/ui/chat/Chat';
import InputForm from '@/app/ui/chat/InputForm';
import { chat } from '@/app/lib/chat';
import { Flex } from '@chakra-ui/react';

export default function Page() {
  const [chats, setChats] = useState<Message[]>([
    {
      role: 'system',
      content: '',
    },
  ]);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (message: Message) => {
    try {
      setIsSubmitting(true);
      setChats((prev) => [...prev, message]);

      const res = await chat(chats, message);

      setChats((prev) => [...prev, res]);
    } catch (error) {
      console.log(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="w-auto bg-white md:rounded-lg md:shadow-md p-4 md:p-10 my-10">
      <div className="mb-10">
        <AnimatePresence>
          {chats.slice(1, chats.length).map((chat, index) => {
            return <Chat role={chat.role} content={chat.content} key={index} />;
          })}
        </AnimatePresence>
        {isSubmitting && (
          <Flex alignSelf="flex-start" px="2rem" py="0.5rem">
            ・・・
          </Flex>
        )}
      </div>
      <InputForm onSubmit={handleSubmit} />
    </div>
  );
}

app/ui/chat/Chat.tsx

import { Message } from '@/app/types/Message';
import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Flex } from '@chakra-ui/react';
import { GoPerson } from "react-icons/go";
import { MdOutlineEngineering } from "react-icons/md";
import { IconContext } from 'react-icons'

export const Chat = ({ content, role }: Message) => {
  const [chatMessage, setChatMessage] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (currentIndex < content.length) {
      const timeoutId = setTimeout(() => {
        setChatMessage((prevText) => prevText + content[currentIndex]);
        setCurrentIndex((prevIndex) => prevIndex + 1);
      }, 80);

      return () => {
        clearTimeout(timeoutId);
      };
    }
  }, [content, currentIndex]);

  return (
    <motion.div
      style={{
        alignSelf: role === 'assistant' ? 'flex-start' : 'flex-end',
        width: 'auto',
      }}
      initial={{
        opacity: 0,
        translateY: '100%',
      }}
      animate={{ opacity: 1, translateY: 0, transition: { duration: 0.3 } }}
      exit={{ opacity: 0, translateY: 0 }}
    >
      <Flex gap="5px" w="full" flexDir={role === 'assistant' ? 'row' : 'row-reverse'} mt="10">
        <IconContext.Provider value={{ size: '50px' }}>
          {role === 'user' ? (<GoPerson />) : (<MdOutlineEngineering />)}
        </IconContext.Provider>
        <Flex
          borderWidth={1}
          borderColor="lightgreen"
          bg="main-bg"
          p="0.5rem 1rem"
          w="auto"
          mt="16"
          rounded={role === 'assistant' ? '0 20px 20px 20px' : '20px 0 20px 20px'}
          flexDir="column"
        >
          {role === 'assistant' && (
            <Flex alignSelf="flex-end" opacity={0.5} fontSize="15px">
              体重管理マン
            </Flex>
          )}
          {role === 'user' && (
            <Flex alignSelf="flex-start" opacity={0.5} fontSize="15px"
            >
              あなた
            </Flex>
          )}
          {role === 'assistant' ? chatMessage || '' : content || ''}
        </Flex>
      </Flex>
    </motion.div>
  );
};  

app/ui/chat/InputForm.tsx

import React, { useRef } from 'react';
import { Message } from '@/app/types/Message';

type InputFormProps = {
  onSubmit: (message: Message) => Promise<void>;
};

const InputForm = ({ onSubmit }: InputFormProps) => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const inputValue = inputRef.current?.value;

    if (inputValue) {
      onSubmit({
        role: 'user',
        content: inputValue,
      });
      inputRef.current.value = '';
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex items-center p-4 border-t border-gray-200">
      <input
        type="text"
        ref={inputRef}
        className="flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring"
        placeholder="メッセージを入力..."
      />
      <button
        type="submit"
        className="ml-4 px-4 py-2 bg-green-500 text-white rounded-lg focus:outline-none"
      >
        送信
      </button>
    </form>
  );
};

export default InputForm;  

app/lib/chat.ts

import { Message } from '@/app/types/Message';
import axios from 'axios';

export const chat = async (chats: Message[], message: Message): Promise<Message> => {
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-3.5-turbo',
      messages: [...chats, message].map((d) => ({
        role: d.role,
        content: d.content,
      })),
    },
    {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
      },
    }
  );

  const data = await response.data;
  if (response.status !== 200) {
    throw data.error || new Error(`Request failed with status ${response.status}`);
  }
  return data.choices[0].message as Message;
};  

app/ui/signin/SignInForm.tsx

'use client';

import { lusitana } from '@/app/ui/fonts';
import {
  ArrowRightIcon,
  AtSymbolIcon,
  ExclamationCircleIcon,
  KeyIcon,
} from '@heroicons/react/24/outline';
import { Button } from '../common/Button';
import { useFormState, useFormStatus } from 'react-dom';
import { authenticate } from '@/app/lib/actions';
import Link from 'next/link';

export default function SignInForm() {
  const [code, action] = useFormState(authenticate, undefined);
  return (
    <form action={action} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-10 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-5 text-1xl`}>
          以下のフォームからサインインしてください。
        </h1>
        <div className="w-full">
          <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">
            Email
          </label>
          <div className="relative">
            <input
              className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
              id="email"
              type="email"
              name="email"
              placeholder="Enter your email address"
              required
            />
            <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
          </div>
        </div>
        <div className="mt-4">
          <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">
            Password
          </label>
          <div className="relative">
            <input
              className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
              id="password"
              type="password"
              name="password"
              placeholder="Enter password"
              required
              minLength={6}
            />
            <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
          </div>
          <SignInButton />
          <div className="flex h-8 items-end space-x-1">
            {code === 'CredentialSignin' && (
              <>
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <p aria-live="polite" className="text-sm text-red-500">
                  EmailかPasswordが不正です。
                </p>
              </>
            )}
          </div>
          <br />
          <div className="text-right">
            アカウントを作成する場合は<Link href={'/signup'}>こちら</Link>
          </div>
        </div>
      </div>
    </form>
  );
}

function SignInButton() {
  const { pending } = useFormStatus();

  return (
    <Button className="mt-4 w-[130px]" aria-disabled={pending}>
      サインイン <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
    </Button>
  );
}  

app/ui/signup/SignUpForm.tsx

'use client';

import { lusitana } from '@/app/ui/fonts';
import {
  ArrowRightIcon,
  AtSymbolIcon,
  ExclamationCircleIcon,
  KeyIcon,
  UserIcon,
} from '@heroicons/react/24/outline';
import { Button } from '../common/Button';
import { useFormState, useFormStatus } from 'react-dom';
import { createAccount } from '@/app/lib/actions';
import Link from 'next/link';
import { MdOutlineHeight, MdOutlineMonitorWeight } from 'react-icons/md';

export default function SignInForm() {
  const [code, action] = useFormState(createAccount, undefined);
  return (
    <form action={action} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-10 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-5 text-1xl`}>
          以下のフォームからサインアップしてください。
        </h1>
        <div className="w-full">
          <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">
            Email
          </label>
          <div className="relative">
            <input
              className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
              id="email"
              type="email"
              name="email"
              placeholder="Enter your email address"
              required
            />
            <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
          </div>
        </div>
        <div className="w-full">
          <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="name">
            User名
          </label>
          <div className="relative">
            <input
              className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
              id="name"
              name="name"
              type="string"
              placeholder="Enter your user name"
              required
            />
            <UserIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
          </div>
        </div>
        <div className="mt-4">
          <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">
            Password
          </label>
          <div className="relative">
            <input
              className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
              id="password"
              type="password"
              name="password"
              placeholder="Enter password"
              required
              minLength={6}
            />
            <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
          </div>
          <div className="w-full">
            <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="height">
              身長
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="height"
                name="height"
                type="number"
                placeholder="Enter your user height"
                required
              />
              <MdOutlineHeight className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <div className="w-full">
            <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="goal">
              目標体重 (kg)
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="goal"
                name="goal"
                type="number"
                placeholder="Enter your user goal weights"
                required
              />
              <MdOutlineMonitorWeight className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <SignInButton />
          <div className="flex h-8 items-end space-x-1">
            {code === 'FailedSignIn' && (
              <>
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <p aria-live="polite" className="text-sm text-red-500">
                  サインアップに失敗しました。
                </p>
              </>
            )}
          </div>
          <br />
          <div className="text-right">
            <Link href={'/signin'}>サインインに戻る</Link>
          </div>
        </div>
      </div>
    </form>
  );
}

function SignInButton() {
  const { pending } = useFormStatus();

  return (
    <Button className="mt-4 w-[150px]" aria-disabled={pending}>
      サインアップ <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
    </Button>
  );
}  

app/lib/actions.ts

'use server';

import { auth, signIn, signOut } from '@/auth';
import { sql } from '@vercel/postgres';
import bcrypt from 'bcrypt';
import { redirect } from 'next/navigation';
import { v4 as uuidv4 } from 'uuid';
import { z } from 'zod';
import { UserSession } from '@/app/types/UserSession';

const CreateUser = z.object({
  name: z.string(),
  email: z.string(),
  password: z.string(),
  height: z.string(),
  goal: z.string(),
});

export async function authenticate(prevState: string | undefined, formData: FormData) {
  try {
    await signIn('credentials', Object.fromEntries(formData));
  } catch (error) {
    if ((error as Error).message.includes('CredentialsSignin')) {
      return 'CredentialSignin';
    }
    throw error;
  }
}

export async function createAccount(prevState: string | undefined, formData: FormData) {
  const validatedFields = CreateUser.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    password: formData.get('password'),
    height: formData.get('height'),
    goal: formData.get('goal'),
  });

  if (!validatedFields.success) {
    console.error(validatedFields.error);
    return 'FailedSignIn';
  }

  const id = uuidv4();
  const { name, email, password, height, goal } = validatedFields.data;
  const hashedPassword = await bcrypt.hash(password, 10);
  const heightNum = Number(height);
  const goalNum = Number(goal);
  try {
    await sql`
        INSERT INTO wm_users (id, name, email, password, height, goal)
        VALUES (${id}, ${name}, ${email}, ${hashedPassword}, ${heightNum}, ${goalNum})`;
  } catch (error) {
    console.log(error);
    return 'FailedSignIn';
  }

  redirect('/top');
}  

app/lib/actions.ts

'use server';

import { auth, signIn, signOut } from '@/auth';
import { UserSession } from '@/app/types/UserSession';

export const getSession = async (): Promise<UserSession> => {
  const session = await auth();
  let userSession: UserSession = {
    expired: '',
    userName: '',
    email: '',
  };

  if (session && session.user) {
    userSession.expired = session.expires;
    if (session.user.name) userSession.userName = session.user.name;
    if (session.user.email) userSession.email = session.user.email;

    return userSession;
  } else {
    await signOut();
  }
  return userSession;
};