Add CMS

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/public/uploads
+
 # dependencies
 /node_modules
 /.pnp

app/api/upload/route.ts

@@ -0,0 +1,46 @@
+import { writeFile } from 'fs/promises'
+import { NextRequest, NextResponse } from 'next/server'
+import path from 'path'
+import fs from 'fs'
+
+export const globalProducts: any[] = []
+
+export async function POST(request: NextRequest) {
+  const data = await request.formData()
+  const file: File | null = data.get('file') as unknown as File
+  const measure: string = data.get('measure') as string
+  const lastPrice: string = data.get('lastPrice') as string
+  const title: string = data.get('title') as string
+  const weight: string = data.get('weight') as string
+  const image: string = data.get('image') as string
+  const category: string = data.get('category') as string
+  const currentPrice: string = data.get('currentPrice') as string
+
+  if (!file) {
+    return NextResponse.json({ success: false })
+  }
+
+  const bytes = await file.arrayBuffer()
+  const buffer = Buffer.from(bytes)
+
+
+
+  let fileName = '/uploads/' + new Date().valueOf() + file.name
+
+  const dir = path.resolve('./public')
+  if (!fs.existsSync(path.join(dir, './uploads'))) {
+    fs.mkdirSync(path.join(dir, './uploads'));
+  }
+  const filePath = path.join(dir, fileName)
+  await writeFile(filePath, buffer)
+
+  console.log(`open ${filePath} to see the uploaded file`)
+  console.log(filePath)
+  globalProducts.push({ title, measure, image: fileName, lastPrice, weight, category, currentPrice })
+
+  return NextResponse.json(globalProducts)
+}
+
+export async function GET(params: NextRequest) {
+  return NextResponse.json(globalProducts)
+}

components/Catalog.tsx

@@ -1,26 +1,27 @@
 
-import '../src/css/catalog.css'
-import onigiri from '../src/img/Onigiri.jpeg'
-import Product from './Product'
+import { useState } from 'react'
+import '../src/css/catalog.css';
+import Product, {ProductProps} from './Product'
 
-export default function Index() {
+export interface CatalogProps {
+    products: ProductProps[]
+}
+
+export default function Index(props: CatalogProps) {
+    const [category, setCategory] = useState<string>('All')
     return <div className="catalog">
         <div className="catalog_left-container">
             <div className="catalog_title">Products</div>
             <div className="catalog_text">You can sort by category</div>
-            <select className="catalog_select">
-                <option>Mexican</option>
-                <option>Tatar</option>
-                <option>Russian</option>
-                <option>Bashqrt</option>
+            <select className="catalog_select" onChange={ e => setCategory(e.target.value) }>
+                <option>All</option>
+                {Array.from(new Set(props.products.map(x => x.category))).map(x => (<option>{x}</option>))}
             </select>
         </div>
         <div className="catalog_card-container">
-            <Product currentPrice={500} measure={'руб.'} title='Онигири' weight='450 гр.' lastPrice={undefined} imgSrc={onigiri}/>
-            <Product currentPrice={500} measure={'руб.'} lastPrice={650} title='Онигири' weight='450 гр.' imgSrc={onigiri}/>
-            <Product currentPrice={500} measure={'руб.'} lastPrice={650} title='Онигири' weight='450 гр.' imgSrc={onigiri}/>
-            <Product currentPrice={500} measure={'руб.'} lastPrice={650} title='Онигири' weight='450 гр.' imgSrc={onigiri}/>
-            <Product currentPrice={500} measure={'руб.'} lastPrice={650} title='Онигири' weight='450 гр.' imgSrc={onigiri}/>
+            {category === 'All' ?
+            props.products.map(x => <Product currentPrice={x.currentPrice} measure={x.measure} title={x.title} weight={x.weight} lastPrice={x.lastPrice} image={x.image} category={x.category}/>) :
+            props.products.filter(x => x.category == category).map(x => <Product currentPrice={x.currentPrice} measure={x.measure} title={x.title} weight={x.weight} lastPrice={x.lastPrice} image={x.image} category={x.category}/>)}
         </div>
     </div>
 }

components/Product.tsx

@@ -2,19 +2,20 @@ import Image from 'next/image'
 
 import { StaticImport } from 'next/dist/shared/lib/get-img-props'
 
-interface ProductProps {
-    currentPrice: number,
+export interface ProductProps {
+    category: string | undefined
+    currentPrice: string,
     measure: string,
-    lastPrice: number | undefined,
+    lastPrice: string | undefined,
     title: string,
     weight: string,
-    imgSrc: string | StaticImport
+    image: string | StaticImport
 }
 
 export default function Product(props: ProductProps) {
     return <div className="catalog_card">
         <div>
-            <Image src={props.imgSrc} alt={'company logo'} width={270} height={250} className='catalog_product-img'/>
+            <Image src={props.image} alt={'company logo'} width={270} height={250} className='catalog_product-img'/>
         </div>
         <div className='catalog_price-block'>
             <p className='catalog_real-price'>

pages/index.tsx

@@ -1,13 +1,80 @@
+'use client'
+
 import Layout from '../components/Layout';
 import Hero from '../components/Hero';
 import Catalog from '../components/Catalog';
 import About from "@/components/About";
+import { useEffect, useState } from 'react';
+
+const Home = () => {
+  const [file, setFile] = useState<File>()
+  const [category, setCategory] = useState<string>()
+  const [measure, setMeasure] = useState<string>()
+  const [lastPrice, setLastPrice] = useState<string>()
+  const [currentPrice, setCurrentPrice] = useState<string>()
+  const [title, setTitle] = useState<string>()
+  const [weight, setWeight] = useState<string>()
+  const [image, setImage] = useState<string>()
+  const [products, setProducts] = useState<any[]>([])
+
+
+  useEffect(() => {
+    fetch('/api/upload', {
+      method: 'GET',
+    }).then(resp => resp.json())
+    .then(resp => setProducts(resp))
+  }, [])
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!file) return
 
-const Home = () => (
-  <Layout>
+    try {
+      const data = new FormData()
+      data.set('file', file)
+      data.set('category', category as string)
+      data.set('currentPrice', currentPrice as string)
+      data.set('measure', measure as string)
+      data.set('lastPrice', lastPrice as string)
+      data.set('title', title as string)
+      data.set('weight', weight as string)
+      data.set('image', image as string)
+
+
+      const res = await fetch('/api/upload', {
+        method: 'POST',
+        body: data
+      })
+      // handle the error
+      if (!res.ok) throw new Error(await res.text())
+      setProducts(await res.json())
+    } catch (e: any) {
+      // Handle errors here
+      console.error(e)
+    }
+  }
+  console.log(products)
+  return <Layout>
     <Hero />
-    <Catalog />
+    <Catalog products={products}/>
+    <form onSubmit={onSubmit}>
+
+      <input onChange={(e) => setCategory(e.target.value)} name='category' type='text' />
+      <input onChange={(e) => setCurrentPrice(e.target.value)} name='currentPrice' type='text' />
+      <input onChange={(e) => setMeasure(e.target.value)} name='measure' type='text' />
+      <input onChange={(e) => setLastPrice(e.target.value)} name='lastPrice' type='text' />
+      <input onChange={(e) => setTitle(e.target.value)} name='title' type='text' />
+      <input onChange={(e) => setWeight(e.target.value)} name='weight' type='text' />
+      <input onChange={(e) => setImage(e.target.value)} name='image' type='text' />
+
+      <input
+        type="file"
+        name="file"
+        onChange={(e) => setFile(e.target.files?.[0])}
+      />
+      <input type="submit" value="Upload" />
+    </form>
   </Layout>
-);
+};
 
 export default Home;