video-distribution-service (学習メモ)

npm i react
npm i drizzle-orm
npm i -D drizzle-kit

npm i dotenv

npm install postgres

import {pgTable, serial, text} from "drizzle-orm/pg-core";

export const user=pgTable('user',{
    id:serial('id').primaryKey(),
    userName:text('user_name').notNull(),
    email:text('email').notNull(),
    password:text('password').notNull()
})

drizzle-kit push

const supabase=createClient()
const {data}=await supabase.auth.getUser();

const connection=process.env.DATABASE_URL as string

import as * schema from "./schema"


const db=drizzle(client,{schema});

const supabase=createClient();
const {data,error}=await supabase.auth.getUser();
if(error||!data.user){
redirect('/login)
}

no overloads matches call...

if(error||!data.user?.id||!data.user?.email||!data.user)

await db.insert(user).values({
userId:data.user.id,
email:formUser.email,
password:formUser.password
})

  const {data,error}=await supabase.auth.signInWithPassword(formUserData)

export default defineConfig({
out:'./supabase/migrations',
})

npx drizzle-kit generate

import {cache} from "react";
export const getAccounts=cache(async()=>{

})

npm install @supabase/auth-helpers-nextjs

...
 const {
        data: { user },
    } = await supabase.auth.getUser()

    if (!user&&!request.nextUrl.pathname.startsWith('/error') && !request.nextUrl.pathname.startsWith('/login')&&!request.nextUrl.pathname.startsWith('/auth')) {
        // no user, potentially respond by redirecting the user to the login page
        const url = request.nextUrl.clone()
        url.pathname = '/login'
        return NextResponse.redirect(url)
    }

    return supabaseResponse

 const fileExt=file.name.split('.').pop()
            const filePath=`${userId}-${Math.random()}.${fileExt}`

const videos=await getVideo();
if(video){
video.sort((a,b)=>{
//a, b は配列の中の要素を見る
cosnst dateA=new Date(a.updated_at);
const dateB=new Date(b.updated_at);
return dateB.getTime()-date.A.getTime()
//baのときは大きい順、abのときは小さい順
})
}

 const video={
                videoTitle:videoInformation.videoTitle,
                description:videoInformation.description,
                videoSrc:filePath,
                user_id:userId
            }
           postVideo(video)

export const postVideo=async(video:video)=>{
await db.insert(videos).values({
  videoTitle: video.videoTitle,
        videoSrc:video.videoSrc,
        description: video.description,
        user_id: video.user_id
})
revalidatePth('/','layout')
}

export const getUserVideo=cache(async(userId:string)=>{
const data=await db.query.videos.findMany({
where:eq(videos.user_id,useId)
})
return data;
})

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

 {userVideo.reverse.map((video) => {
                    return (
                        <div key={video.id}>
                            <Card video={video}/>
                        </div>
                    )
                })}

//privateVideo.tsx  (server側)
    <div key={video.id} className={"bg-rose-500"}>
                            <Card video={video}/>
                            {/*<input type={"checkbox"} onChange={()=>handleCheck(video.videoSrc)}/>*/}
                            {/*<button onClick={onDelete(video.videoSrc)} type={"button"}>Delete</button>*/}
                        </div>

//card.tsx  (まだserver側)

  <div  className={"flex flex-col items-center justify-center bg-green-500"}>
            <iframe src={process.env.CDNURL + video.videoSrc} width={320} height={240}
                    allowFullScreen={true} loading={"eager"}/>
            <h1 className={"text-2xl"}>{video.videoTitle}</h1>
            <p>{video.description}</p>
            <DeleteButton/>    //(こいつがclient側)
        </div>

//delte-button.tsx

 <div>
           <button>消す</button>
        </div>

const file =packInfo.thumbnail
const fileName=file.name.split('.').shift();
const fileExt=file.name.split('.').pop();
const filePath='${fileName}-${Math.random()}.${fileExt}`;

const {error:uploadError}=await supabase.storage.from("thumbnail").upload(filePath,file)

const packFront={
packTitle:packInfo.packTitle,
description:packInfo.description,
thumbnail:filePath,
userId:userId
}
await postPackFront(packFront)
if(uploadError){
throw uploadError
}

const MyPack=await getPackId(userId)
if(!MyPack){
return;
}
const packId=MyPack.reverse()[0].id   //最後に入ったpackIdを取り出している
for(const video of videos){
const file=video.file;
const fileName=file.name.split('.').shift();
const fileExt=file.name.split('.').pop();
const filePath=`${fileName}-${Math.random()}.${fileExt}`;

const {error:uploadError}=await supabase.storage.from('packVideo').upload(filePath,file);
const packVideoInfo={
videoTitle:vieo.videoTitle,
description:video.description,
file:filePath,
packId:packId
}

awiat postPackEachVideo(packVideoInfo);
if(uploadError){
throw uploadError;
}
}

const handleChange=(setter:React.Dispatch<React.SetStateAction<any>>,field:string)=>(newValue:string|File)=>{
setter((prevState:any)=>({...prevState,[field]:newValue}))
}

return(
<>
<PackHeader onPackTitleChange={handleChange(setPackInfo,'packTitle')} onDescriptionChange={handleChange(setPackInfo,'description')} onThumbnailChange={handleChange(setPackInfo,'thumbnail')}/>
</>
)

const PackHeader=()=>{
const handlePackTitleChange=(event:React.ChangeEvent<HTMLInputElement>)=>{
onPackTitleChange(event.target.value)
}

...

return(
<>
<input type="text" onChange={handlePackTitleChange}/>
...
</>
)
}

export const CustomAlert=()=>{
return(
 <div className={"fixed inset-0 flex items-center justify-center bg-black/80 z-50"}>
            <div className="flex items-center flex-col gap-y-4 bg-white p-6 rounded-lg shadow-lg w-80">
                <div>
                {success?(
                    <Image src={"/happy-panda.jpg"} alt={""} width={150} height={150} className={"rounded-lg"}/>
                ):(
                    <Image src={"/sad-panda.jpg"} alt={""} width={150} height={150} className={"rounded-lg"}/>
                )}
                </div>
                <p className={" text-3xl text-gray-700"}>
                    {message}
                </p>
                <Button variant={"default"} onClick={onClose} >Close</Button>
            </div>
        </div>
)
}

import { NextResponse } from 'next/server';
import Stripe from 'stripe';
import { supabase } from '@/lib/supabaseClient';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2022-11-15',
});

export async function POST(request: Request) {
  const { name, price, videoUrl } = await request.json();

  try {
    // Stripeで商品を作成
    const product = await stripe.products.create({
      name,
      type: 'good',
      metadata: {
        videoUrl,
      },
    });

    const stripePrice = await stripe.prices.create({
      product: product.id,
      unit_amount: price * 100,
      currency: 'jpy',
    });

    // Supabaseに商品情報を保存
    const { data, error } = await supabase
      .from('products')
      .insert({
        name,
        price,
        video_url: videoUrl,
        stripe_product_id: product.id,
        stripe_price_id: stripePrice.id,
      })
      .select()
      .single();

    if (error) throw error;

    return NextResponse.json({ productId: data.id, stripeProductId: product.id, stripePriceId: stripePrice.id });
  } catch (error) {
    console.error('Error creating product:', error);
    return NextResponse.json({ error: 'Product creation failed' }, { status: 500 });
  }
}

// app/components/ProductForm.tsx
'use client';

import { useState } from 'react';

export default function ProductForm() {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [videoUrl, setVideoUrl] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessage('商品を作成中...');
    try {
      const response = await fetch('/api/create-product', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, price: Number(price), videoUrl }),
      });
      const data = await response.json();
      if (response.ok) {
        setMessage('商品が正常に作成されました！');
        setName('');
        setPrice('');
        setVideoUrl('');
      } else {
        setMessage(`エラー: ${data.error}`);
      }
    } catch (error) {
      setMessage('商品の作成中にエラーが発生しました');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 入力フィールドは前回と同じ */}
      <button type="submit">商品を追加</button>
      {message && <p>{message}</p>}
    </form>
  );
}

    const stripePrice=await stripe.prices.create({
            product:product.id,
            unit_amount:price*100,
            currency:'usd',
        })

npm i --save-dev @types/bcrypt

declare module 'bcrypt';

const {data:{session},error}=await supabase.auth.getSession()
if(error||!session){
redirect('/auth/login')
}

 const supabase=createClient()
    const {data,error}=await supabase.auth.getUser();
    console.log(data.user?.user_metadata)
    if(error||!data){
        redirect("/auth/login")
    }

Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:

> Build error occurred
Error: Failed to collect page data for /

const supabase=createClient()

import Stripe from "stripe";
import {updatePurchaseHistory} from "@/actions/userActtions";
import {NextApiRequest, NextApiResponse} from "next";
import {buffer} from 'micro'
import {redirect} from "next/navigation";

const stripe=new Stripe(process.env.STRIPE_SECRETKEY!)
const endpointSecret=process.env.STRIPE_WEBHOOK_SECRET!

export default async function handler(req:NextApiRequest,res:NextApiResponse){
if(req.method=='POST'){
const buf=await buffer(req); // バッファリング(一時的にメモリーにデータを貯めている。これにより、パフォーマンスが向上する)
const sig=req.headers['stripe-signature'] as string;
let event;

try{
event =stripe.webhooks.constructEvent(buf,sig,endpointSecret)
}catch(err:any){
console.error('Error verifying webhook signature:',err);
return res.status(400).send(`webhook Error: ${err.message}`);

}
const session=event.data.object as Stripe.Checkout.Session;

const userId=session.metadata?.userId;
const priceId=session.metadata?.priceId;

switch(event.type){
case 'checkout.session.completed':
try{
await updatePurchaseHistory(userId,priceId);
console.log('Purchase history updated successfully')
}catch(e){
console.error('Error updating purchase history:',e)
return res.status(500).json({e:'Failed to update purchase history'})

}
break;
case'invoice.payment_succeeded':
//ここにinvoice.payment_succeededイベントの処理
break;
default:console.log(`Unhandled event type:${event.type}`);
}
res.status(200).json({received:true})
}else{
res.setHeader('Allow','POST');
res.status(405).end('Method Not Allowed')
}
}

export const config={
api:{
bodyParser:false
}
}

const list=[5,9,3,1,2,8,4,7,6,11,13,10,15,14,12]

const newList=list.map((item)=>{
    return item+1
})

//[
   6, 10,  4,  2,  3,  9,
   5,  8,  7, 12, 14, 11,
  16, 15, 13
]

const list=[
    {id:2,
        name:"a",
    },
    {id:1,
        name:"b",
    },
    {id:4,
        name:"c",
    },
    {id:3,
        name:"d",
    }
]

list.sort((a,b)=>b.id-a.id);

console.log(list)

import Stripe from "stripe";
import {headers} from "next/headers";
import {NextResponse} from "next/server"

const stripe=new Stripe(process.env.STRIPE_SECRET_KEY!)
const endpointSecret=process.env.STRIPE_WEBHOOK_SECRET!;

export async function POST(req:Request){
const body=await req.text();
const sig=headers().get('Stripe-Signature') as string;

let event:Stripe.Event;

try{
event=stripe.webhooks.constructEvent(
body,
sig,
process.env.STRIPE_WEBHOOKS_SECRET!
)
console.log('event',event)
}catch(err){
return new NextResponse("invalid signature",{status:400})
}
const session=event.data.object as Stripe.Checkout.Session;
console.log('session',session)
switch(event.type){
case 'checkout.session.completed':
//決済成功時にさせたい処理を書く
break;
case 'invoice.payment_succeeded':
//請求書の作成成功時の処理を書く
break;
default:console.log(`Unhandled event type:${event.type}`);//上のcaseに一致しなかったとき
}

return new NextResponse("ok",{status:200})
}

 ⨯ Detected default export in 'C:\Users\torio\Desktop\Next.js\content-service\app\api\account\route.ts'. Export a named export for each HTTP method instead.
 ⨯ No HTTP methods exported in 'C:\Users\torio\Desktop\Next.js\content-service\app\api\account\route.ts'. Export a named export for each HTTP method.

//account

export async function POST(){
...
}

const {data, error}=await supabase.auth.getUser()

automatic_tax:{enabled:true},
customer:customerId,
custmer_update:{
address:"auto",
shipping:"auto"
}

stripe.checkout.sessions.create({
                payment_method_types: ['card'],
                line_items: [
                    {
                        price: priceId,
                        quantity: 1
                    },
                ],
                mode: 'payment',
                success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/settlement-result/success?session_id={CHECKOUT_SESSION_ID}`,
                cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/shop`,
                automatic_tax: {enabled: true},
                customer: customerId,
            customer_update:{
                    address:"auto",
                    shipping:"auto"
            },
                payment_intent_data: {
                    application_fee_amount: 123,
                    transfer_data: {
                        destination: accountId
                    }
                },
                metadata: {
                    userId: userId,
                    priceId: priceId
                },
                invoice_creation: {
                    enabled: true,
                    invoice_data: {
                        description: '購入された商品となります',
                        metadata: {
                            userId: userId
                        }
                    }
                },
            },
        );