-
+
-
+
-
-
+
{props.title}
+ {isAdmin && <>
(setAttention(!attention))}>Delete }
+ {attention &&<>
(setAttention(!attention))} setFuncShow={setAttention} id={props.id} img={props.img} message={"If u`ll click you also delete all items that connected to this category! Are u sure?"} />}
)
diff --git a/cakeFront/src/components/deleteButton.jsx b/cakeFront/src/components/deleteButton.jsx
new file mode 100644
index 0000000..f2866cd
--- /dev/null
+++ b/cakeFront/src/components/deleteButton.jsx
@@ -0,0 +1,18 @@
+
+import { useEffect } from 'react'
+import { cart } from '../store'
+
+
+import '/src/styles/deleteButton.css'
+
+function DeleteButton (props) {
+
+ const deleteItemInCart = cart((state) => state.deleteItemInCart)
+
+
+ return (
+
(deleteItemInCart(props.name))}>Delete
+ )
+}
+
+export default DeleteButton
\ No newline at end of file
diff --git a/cakeFront/src/components/isLoading.jsx b/cakeFront/src/components/isLoading.jsx
new file mode 100644
index 0000000..f47e0c3
--- /dev/null
+++ b/cakeFront/src/components/isLoading.jsx
@@ -0,0 +1,14 @@
+
+import '/src/styles/isLoading.css'
+
+import { motion } from 'framer-motion'
+
+function IsLoading () {
+ return (
+
+
+ )
+}
+
+export default IsLoading
\ No newline at end of file
diff --git a/cakeFront/src/components/itemInCart.jsx b/cakeFront/src/components/itemInCart.jsx
new file mode 100644
index 0000000..446bc00
--- /dev/null
+++ b/cakeFront/src/components/itemInCart.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+import { cart } from "../store"
+
+import AddButton from "./addButton"
+import DeleteButton from "./deleteButton"
+
+
+
+
+
+
+function ItemInCart(props) {
+
+ const [amount, setAmount] = useState(props.amount)
+
+ const addItemIntoCart = cart((state) => state.addItemIntoCart)
+ const changeAmountOfItem = cart((state) => state.changeAmountOfItem)
+ const setLocalItemsData = cart((state) => state.setLocalItemsData)
+ const deleteItemInCart = cart((state) => state.deleteItemInCart)
+ const restrictions = cart((state) => state.restrictions)
+ const totalPrice = cart((state) => state.totalPrice)
+
+
+
+ useEffect(() => {
+ changeAmountOfItem(props.name, amount, "change")
+ const parsedLocalData = JSON.parse(localStorage.getItem("bigItems"))
+ setLocalItemsData(parsedLocalData)
+ console.log(parsedLocalData)
+ }, [amount])
+
+ return (
+ <>
+
+
+
(deleteItemInCart(props.name))}>
+
+
+
+
+
Name: {props.name}
+
Amount: {props.amount}
+
Price for a unite: {props.price}$
+
+
+
+
{changeAmountOfItem(props.name, amount, "decriment"),setAmount(parseInt(props.amount - 1))}}>
+
+
+
+
+
+ )
+}
+
+export default ItemInCart
\ No newline at end of file
diff --git a/cakeFront/src/components/itemInOrderList.jsx b/cakeFront/src/components/itemInOrderList.jsx
new file mode 100644
index 0000000..5ea1250
--- /dev/null
+++ b/cakeFront/src/components/itemInOrderList.jsx
@@ -0,0 +1,25 @@
+
+
+
+function ItemInOrderList(props) {
+
+ const total = props.amount * props.priceOfItem
+
+ return (
+
+
+
+
+
+
Name: {props.nameOfItem}
+ Amount:
{props.amount}
+
+
Price for per: {props.priceOfItem}$
+ total price
{total.toFixed(2)}$
+
+
+
+ )
+}
+
+export default ItemInOrderList
\ No newline at end of file
diff --git a/cakeFront/src/components/linkButton.jsx b/cakeFront/src/components/linkButton.jsx
index aa447d8..430f21c 100644
--- a/cakeFront/src/components/linkButton.jsx
+++ b/cakeFront/src/components/linkButton.jsx
@@ -1,7 +1,7 @@
-import '../styles/componentsLinkButton.css'
import {Link} from 'react-router-dom'
+import '/src/styles/componentsLinkButton.css'
function LinkButton (props) {
return (
diff --git a/cakeFront/src/components/loginForm.jsx b/cakeFront/src/components/loginForm.jsx
new file mode 100644
index 0000000..f83e28e
--- /dev/null
+++ b/cakeFront/src/components/loginForm.jsx
@@ -0,0 +1,37 @@
+
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { userAction } from '../store'
+
+function LoginForm (props) {
+
+
+ const [userFirstName, setUserFirstName] = useState('')
+ const [userPassword, setUserPassword] = useState('')
+
+ const sign = userAction((state) => state.sign)
+
+ return (
+
+
+
+
<>Login
+
Don`t have an account? (props.setSignIn(!props.signIn))} className='create-account-text'>Create now ! it takes less than a minute
+
+
+
(sign(userFirstName, userPassword, '','','', 'in'))} className='register-btn'>Login
+
+ )
+}
+
+export default LoginForm
\ No newline at end of file
diff --git a/cakeFront/src/components/orderPreview.jsx b/cakeFront/src/components/orderPreview.jsx
new file mode 100644
index 0000000..5296c0d
--- /dev/null
+++ b/cakeFront/src/components/orderPreview.jsx
@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import {Link,} from 'react-router-dom'
+
+import { userAction, fetchOrders } from '../store'
+
+
+
+function OrderPreview(props) {
+
+ const [status, setStatus] = useState('Waiting for customer')
+
+ const isAdmin = userAction((state) => state.isAdmin)
+ const updateOrderStatus = fetchOrders((state) => state.updateOrderStatus)
+
+ return (
+ <>
+
+
+
+
+
+ Id of order: {props.id}
+
+
+
+
status: {props.status}
+
+ {isAdmin &&
+ <>
+ (setStatus(e.target.value))}>
+ Status: Waiting for customer
+ Status: working at order
+ Status: Decliened
+
+ (updateOrderStatus(props.id, status))}>Update
+ }
+
+
+
+
+ )
+}
+
+export default OrderPreview
\ No newline at end of file
diff --git a/cakeFront/src/components/orderWrapper.jsx b/cakeFront/src/components/orderWrapper.jsx
new file mode 100644
index 0000000..fd116e1
--- /dev/null
+++ b/cakeFront/src/components/orderWrapper.jsx
@@ -0,0 +1,65 @@
+import { useParams } from "react-router-dom"
+import { useEffect } from "react"
+
+import ItemInOrderList from "./itemInOrderList"
+
+import { fetchOrders } from "../store"
+
+
+
+
+function OrderWrapper(props) {
+
+ const {id} = useParams()
+
+ const fetchNeededOrders = fetchOrders((state) => state.fetchNeededOrders)
+
+ const items = fetchOrders((state) => state.items)
+ const user = fetchOrders((state) => state.user)
+ const workStatus = fetchOrders((state) => state.workStatus)
+ const totalPrice = fetchOrders((state) => state.totalPrice)
+ const amountOfItems = fetchOrders((state) => state.amountOfItems)
+
+ useEffect(() => {
+ fetchNeededOrders(id, false)
+ },[])
+
+ return (
+ <>
+
+
+
+
+
User data
+
+
+
User id: {user['pk']}
+
Phone number: {user['phoneNumber']}
+
First name: {user['first_name']}
+
Last name: {user['last_name']}
+
Email: {user['email']}
+
+
+
+ Order status: {workStatus}
+
+
+ When ordered: 03.10.2023, 20:31
+
+
+
General Information
+
Total price: {totalPrice.toFixed(2)}$
+
Amount of items: {amountOfItems}
+
+
+
+ {items.map((item) => (
+
+
+
+ )
+}
+
+export default OrderWrapper
\ No newline at end of file
diff --git a/cakeFront/src/components/productItemShowcase.jsx b/cakeFront/src/components/productItemShowcase.jsx
index 5fdb5ce..a3505fd 100644
--- a/cakeFront/src/components/productItemShowcase.jsx
+++ b/cakeFront/src/components/productItemShowcase.jsx
@@ -1,47 +1,98 @@
import { useState } from 'react'
-import {Link} from 'react-router-dom'
-import '../styles/ProductItemShowcase.css'
import BestsellerLine from './bestsellerLine'
+import AddButton from "./addButton"
+import {Link} from 'react-router-dom'
+import UpdateProductShow from './updateProductShow'
+import { cart, userAction } from '../store'
+import IsLoading from './isLoading'
+
+
+
+import '/src/styles/productItemShowcase.css'
function ProductItem (props) {
const [infoBestseller, setInfoBestseller] = useState(false)
+ const [isUpdate, setIsUpdate] = useState(false)
+ const [price, setPrice] = useState(props.price)
+ const [name, setName] = useState(props.name)
+ const [bestseller, setBestseller] = useState(props.bestseller)
+ const [img, setImage] = useState(false)
+ // const [description, setDescription] = useState(props.description)
+ const addItemIntoCart = cart((state) => state.addItemIntoCart)
+ const isAdmin = userAction((state) => state.isAdmin)
+ const deleteObject = userAction((state) => state.deleteObject)
+ const updateObject = userAction((state) => state.updateObject)
+ const isLoading = userAction((state) => state.isLoading)
+
+ async function handleUpdateObject() {
+ await updateObject(props.id, "product",price,name,bestseller,img, props.img,'da',props.category)
+ setIsUpdate(!isUpdate)
+ }
+ async function handleDeleteObject() {
+ await deleteObject(props.id, "product", props.img)
+ }
function handleOnMouseUp() {
setInfoBestseller(!infoBestseller)
}
-
function handleOnMouseDown() {
setInfoBestseller(!infoBestseller)
}
+ function handleImage(e) {
+ if(e.target.files[0]){
+ setImage(e.target.files[0])
+ }
+ }
+
return (
+ {isLoading &&
}
-
{props.bestseller &&
}{infoBestseller &&
}
-
+ {isUpdate || <>
{props.bestseller &&
}{infoBestseller &&
}
}
+ {isUpdate || <>
}
+ {isUpdate &&
+
+ }
- {props.name}
+ {isUpdate || <>{props.name}}
- {props.price} $
+ {isUpdate || <>{props.price} $ }
-
+ {isUpdate ||
}
+ {isUpdate ||
+ <>
+ {isAdmin &&
+
+ {handleDeleteObject()}} className='logout-btn'>Delete
+ (setIsUpdate(!isUpdate))}>Update
+
}
+ }
+ {isUpdate &&
+ (handleUpdateObject())} className='logout-btn'>Commit
+ (setIsUpdate(!isUpdate))} >Deciline
+
}
)
}
-export default ProductItem
\ No newline at end of file
+export default ProductItem
+
+//
+
+ //
\ No newline at end of file
diff --git a/cakeFront/src/components/registrationForm.jsx b/cakeFront/src/components/registrationForm.jsx
new file mode 100644
index 0000000..2177bd1
--- /dev/null
+++ b/cakeFront/src/components/registrationForm.jsx
@@ -0,0 +1,60 @@
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { userAction } from '../store'
+
+
+function RegistrationForm (props) {
+ const [userFirstName, setUserFirstName] = useState('')
+ const [userPassword, setUserPassword] = useState('')
+ const [userEmail, setUserEmail] = useState('')
+ const [userLastName, setUserLastName] = useState('')
+ const [userPhoneNumber, setUserphoneNumber] = useState('')
+ const sign = userAction((state) => state.sign)
+
+async function handleRegistration() {
+ await sign(userFirstName, userPassword, userLastName, userPhoneNumber, userEmail,'up')
+ setUserEmail('')
+ setUserPassword('')
+ setUserLastName('')
+ setUserFirstName('')
+ setUserphoneNumber('')
+}
+
+ return (
+
+
+
+
+
<>Registration
+
Already have account? (props.setSignIn(!props.signIn))} className='create-account-text'>Enter now !
+
+
+
(handleRegistration())}>Registration
+
+
+ )
+}
+
+export default RegistrationForm
\ No newline at end of file
diff --git a/cakeFront/src/components/updateProductShow.jsx b/cakeFront/src/components/updateProductShow.jsx
new file mode 100644
index 0000000..ce92577
--- /dev/null
+++ b/cakeFront/src/components/updateProductShow.jsx
@@ -0,0 +1,30 @@
+
+
+function UpdateProductShow(props) {
+ return (
+
+ )
+}
+
+export default UpdateProductShow
\ No newline at end of file
diff --git a/cakeFront/src/firebase.js b/cakeFront/src/firebase.js
new file mode 100644
index 0000000..1508bd3
--- /dev/null
+++ b/cakeFront/src/firebase.js
@@ -0,0 +1,15 @@
+import { initializeApp } from "firebase/app";
+import { getStorage } from "firebase/storage";
+
+const firebaseConfig = {
+ apiKey: "AIzaSyBjQzkpWSXtu0wRxf1pxsugGYLksMMrF2s",
+ authDomain: "cake-shop-2c6c5.firebaseapp.com",
+ projectId: "cake-shop-2c6c5",
+ storageBucket: "cake-shop-2c6c5.appspot.com",
+ messagingSenderId: "570706637861",
+ appId: "1:570706637861:web:7d9b2788f3414e9c24fbcc"
+};
+
+
+const app = initializeApp(firebaseConfig);
+export const storage = getStorage(app)
\ No newline at end of file
diff --git a/cakeFront/src/pages/About.jsx b/cakeFront/src/pages/About.jsx
index 8b72972..d0f4da1 100644
--- a/cakeFront/src/pages/About.jsx
+++ b/cakeFront/src/pages/About.jsx
@@ -1,7 +1,7 @@
-function About () {
+function AboutPage () {
return (
About
)
}
-export default About
\ No newline at end of file
+export default AboutPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/Catalog.jsx b/cakeFront/src/pages/Catalog.jsx
index acc9509..a1f2f04 100644
--- a/cakeFront/src/pages/Catalog.jsx
+++ b/cakeFront/src/pages/Catalog.jsx
@@ -1,6 +1,9 @@
import CategoriesWrapper from "../sections/catalogCategoryWrapper"
-function Catalog () {
+import '/src/styles/catalogCategoryWrapper.css'
+import '/src/styles/catalogItemsWrapper.css'
+
+function CatalogPage () {
return (
<>
@@ -8,4 +11,4 @@ function Catalog () {
)
}
-export default Catalog
\ No newline at end of file
+export default CatalogPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/Contact.jsx b/cakeFront/src/pages/Contact.jsx
deleted file mode 100644
index a86d070..0000000
--- a/cakeFront/src/pages/Contact.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-
-function Contact() {
- return (
-
Contact
- )
-}
-
-export default Contact
\ No newline at end of file
diff --git a/cakeFront/src/pages/Delivery.jsx b/cakeFront/src/pages/Delivery.jsx
index 1221899..d19fab9 100644
--- a/cakeFront/src/pages/Delivery.jsx
+++ b/cakeFront/src/pages/Delivery.jsx
@@ -1,7 +1,7 @@
-function Delivery () {
+function DeliveryPage () {
return (
)
}
-export default Delivery
\ No newline at end of file
+export default DeliveryPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/Home.jsx b/cakeFront/src/pages/Home.jsx
index c65c6c4..6142f8c 100644
--- a/cakeFront/src/pages/Home.jsx
+++ b/cakeFront/src/pages/Home.jsx
@@ -1,6 +1,3 @@
-import '../styles/default.css'
-import '../styles/texts.css'
-
import HomeOpenSection from "../sections/homeOpenSection"
import HomeAboutUsSection from "../sections/homeAboutUsSection"
import HomeChooseUsSection from "../sections/homeChooseUsSection"
@@ -9,8 +6,20 @@ import HomeCommentsSection from "../sections/homeCommentsSection"
import HomeBestsellerSection from "../sections/homeBestsellerSection"
import HomeIndividualOrderSection from '../sections/homeIndividualOrderSection'
+import '/src/styles/homeAboutUsSection.css'
+import '/src/styles/homeBestsellerSection.css'
+import '/src/styles/homeCatalogSection.css'
+import '/src/styles/homeChooseUsSection.css'
+import '/src/styles/homeCommentsSection.css'
+import '/src/styles/homeIndividualOrderSection.css'
+import '/src/styles/homeOpenSection.css'
+
+
+
+function HomePage () {
+
+
-function Home () {
return (
<>
@@ -24,4 +33,4 @@ function Home () {
)
}
-export default Home
\ No newline at end of file
+export default HomePage
\ No newline at end of file
diff --git a/cakeFront/src/pages/Order.jsx b/cakeFront/src/pages/Order.jsx
new file mode 100644
index 0000000..514037c
--- /dev/null
+++ b/cakeFront/src/pages/Order.jsx
@@ -0,0 +1,25 @@
+import {userAction} from '../store'
+
+import OrderWrapperPreview from "../sections/orderWrapperPreview"
+
+import '/src/styles/orderPreview.css'
+import '/src/styles/orderWrapper.css'
+import '/src/styles/adminOrdersPage.css'
+
+
+function OrderPage () {
+
+ const isAdmin = userAction((state) => state.isAdmin)
+
+ return (
+ <>
+ {isAdmin &&
}
+ {isAdmin ||
U don`t have acsess }
+
+
+
+ )
+
+}
+
+export default OrderPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/cart.jsx b/cakeFront/src/pages/cart.jsx
new file mode 100644
index 0000000..6db00c2
--- /dev/null
+++ b/cakeFront/src/pages/cart.jsx
@@ -0,0 +1,51 @@
+import { cart,fetchOrders } from "../store"
+
+import ItemInCart from "../components/itemInCart"
+
+import '/src/styles/cart.css'
+import '/src/styles/itemInCart.css'
+import '/src/styles/itemInOrderList.css'
+
+
+function Cart () {
+
+ const toggleShowCart = cart((state) => state.toggleShowCart)
+ const Amount = cart((state) => state.Amount)
+ const totalPrice = cart((state) => state.totalPrice)
+ const restrictions = cart((state) => state.restrictions)
+ const items = cart((state) => state.items)
+
+ const createNewOrder = fetchOrders((state) => state.createNewOrder)
+ const raiseError = fetchOrders((state) => state.raiseError)
+ const isCreate = fetchOrders((state) => state.isCreate)
+
+ return (
+ <>
+
{toggleShowCart()}}>
+
(e.stopPropagation())} >
+
+
Cart
+
+
+ {items.map((item) => (
+
+
+
+ Total price {totalPrice.toFixed(2)}$
+
+
(createNewOrder(items))}>
+ ORDER
+
+
+ Total amount {Amount}
+
+
+
+
+
+ )
+}
+
+export default Cart
\ No newline at end of file
diff --git a/cakeFront/src/pages/itemPage.jsx b/cakeFront/src/pages/itemPage.jsx
new file mode 100644
index 0000000..d4d5978
--- /dev/null
+++ b/cakeFront/src/pages/itemPage.jsx
@@ -0,0 +1,49 @@
+
+import '/src/styles/itemPage.css'
+
+import { productItemFetch,cart } from '../store'
+
+import { useParams } from 'react-router-dom'
+import { useEffect } from 'react'
+
+function ItemPage() {
+
+ const fetchNeededItem = productItemFetch((state) => state.fetchNeededItem)
+ const neededItem = productItemFetch((state) => state.neededItem)
+ const addItemIntoCart = cart((state) => state.addItemIntoCart)
+ const {item} = useParams()
+
+ useEffect(() => {
+ fetchNeededItem(item)
+ },[])
+
+ return (
+
+
+
+
+
+
+
+
+
+ {neededItem.nameOfItem}
+
+
+ {neededItem.priceOfItem}$
+
+
+ Bestseller: {neededItem.BestsellerItem && <>Yes || <>No }
+
+
+ (addItemIntoCart(neededItem))} type='button'>ADD TO CART
+
+
+
+ {neededItem.descriptionOfItem}
+
+
+ )
+}
+
+export default ItemPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/layout.jsx b/cakeFront/src/pages/layout.jsx
index 1478c3f..a5f9094 100644
--- a/cakeFront/src/pages/layout.jsx
+++ b/cakeFront/src/pages/layout.jsx
@@ -1,13 +1,35 @@
import {Outlet} from 'react-router-dom'
+import { useEffect } from 'react'
+import { cart, userAction } from '../store'
import Header from '../sections/layoutHeaderSection'
import Footer from '../sections/layoutFooterSection'
+import Cart from "./cart"
+
+import '../styles/layoutFooterSection.css'
+import '/src/styles/layoutheaderSection.css'
+import '/src/styles/layoutStyles.css'
+
+
+
+
+
+
function Layout() {
+ const userAuth = userAction((state) => state.userAuth)
+ const showCart = cart((state) => state.showCart)
+ useEffect(() => {
+ userAuth()
+ },[])
+
return (
<>
+ {showCart &&
}
-
+
+
)
diff --git a/cakeFront/src/pages/logInPage.jsx b/cakeFront/src/pages/logInPage.jsx
new file mode 100644
index 0000000..50766c4
--- /dev/null
+++ b/cakeFront/src/pages/logInPage.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+import { userAction } from '../store'
+
+import { motion } from 'framer-motion'
+import RegistrationForm from '../components/registrationForm'
+import LoginForm from '../components/loginForm'
+import IsLoading from '../components/isLoading'
+
+import '/src/styles/logInLogOutPage.css'
+
+function LogInLogOutPage() {
+ const [signIn, setSignIn] = useState(false)
+
+
+ const isLogged = userAction((state) => state.isLogged)
+ const isAdmin = userAction((state) => state.isAdmin)
+ const logOut = userAction((state) => state.logOut)
+ const isLoading = userAction((state) => state.isLoading)
+ const isCreated = userAction((state) => state.isCreated)
+
+ useEffect(() => {
+ if(isCreated === true) {
+ setSignIn(!signIn)
+ }
+ },[isCreated])
+
+ if(isLogged){
+ return (
+
+
Logout
+
Hi {isAdmin && 'U are admin!'}
+
Are you sure you want to log out from account?
+
(logOut())}>Logout
+
)
+ }
+
+ return (
+
+ {isLoading &&
}
+
{signIn ||
+
{signIn &&
+ {signIn || <>
+
+
+ }
+ {signIn && <>
+
+
+ }
+
+ )
+}
+export default LogInLogOutPage
\ No newline at end of file
diff --git a/cakeFront/src/pages/userOrders.jsx b/cakeFront/src/pages/userOrders.jsx
new file mode 100644
index 0000000..b61ba81
--- /dev/null
+++ b/cakeFront/src/pages/userOrders.jsx
@@ -0,0 +1,14 @@
+import OrderWrapperPreview from "../sections/orderWrapperPreview"
+
+
+
+
+function UserOrders() {
+ return (
+ <>
+
+
+ )
+}
+
+export default UserOrders
\ No newline at end of file
diff --git a/cakeFront/src/sections/catalogCategoryWrapper.jsx b/cakeFront/src/sections/catalogCategoryWrapper.jsx
index ec07485..a0170fd 100644
--- a/cakeFront/src/sections/catalogCategoryWrapper.jsx
+++ b/cakeFront/src/sections/catalogCategoryWrapper.jsx
@@ -1,19 +1,29 @@
import { useEffect, useState } from 'react'
+import Carousel from '../components/carouselBlock'
-import {categoryItemFetch, tools} from '../store'
-import '../styles/catalogCategoryWrapper.css'
+import {categoryItemFetch, tools, userAction} from '../store'
+import IsLoading from '../components/isLoading'
import CategoryItem from "../components/categoryItem"
+
+
function CategoriesWrapper () {
- const [page, setPage] = useState(1)
+ const isAdmin = userAction(state => (state.isAdmin))
- const incrementPage = tools(state => (state.incrementPage))
- const decrimentPage = tools (state => (state.decrimentPage))
+ const [name, setName] = useState('')
+ const [image, setImage] = useState('')
+
+ const [page, setPage] = useState(1)
+ const [isCreating, setIsCreating] = useState(true)
+
const fixWrongPage = tools(state => (state.fixWrongPage))
const categoryItems = categoryItemFetch(state => (state.categoryItems))
+ const createObject = userAction(state => (state.createObject))
+ const isLoading = userAction(state => (state.isLoading))
+ const isAction = userAction((state) => state.isAction)
const loading = categoryItemFetch(state => (state.loading))
const status = categoryItemFetch(state => (state.status))
const fetchCategoryItems = categoryItemFetch((state) => state.fetchCategoryItems)
@@ -26,25 +36,58 @@ function CategoriesWrapper () {
fixWrongPage(page, setPage)
},[status])
+ function imageHandler(e) {
+ if(e.target.files[0]){
+ setImage(e.target.files[0])
+ }
+ }
+
+ useEffect(() => {
+ fetchCategoryItems(page)
+ if(isCreating === true) {
+ setIsCreating(!isCreating)
+ }
+ },[isAction])
+
return (
<>
-
-
-
+ {isAdmin &&
(setIsCreating(!isCreating))}>Create new
}
+ {isLoading &&
}
+ {isCreating ||
+ <>
+
{loading || categoryItems.map((categoryItem) => (
-
+ <>
+
+
+ }
+ {isCreating &&
+ <>
+ {isLoading &&
}
+
+
+
+
+
+
+
+ (setIsCreating(!isCreating))}>Decline
+ (createObject("category",name, image))}>Create
+
-
-
- decrimentPage(page, setPage)} className="decriment-btn carousel-btn">
- «
-
- incrementPage(page, setPage)} className="increment-btn carousel-btn">
- »
-
-
-
+ }
)
@@ -55,3 +98,5 @@ export default CategoriesWrapper
+
+
diff --git a/cakeFront/src/sections/catalogItemsWrapper.jsx b/cakeFront/src/sections/catalogItemsWrapper.jsx
index 2fc64a3..a8a76dd 100644
--- a/cakeFront/src/sections/catalogItemsWrapper.jsx
+++ b/cakeFront/src/sections/catalogItemsWrapper.jsx
@@ -1,16 +1,33 @@
import { useEffect, useState } from 'react'
+import Carousel from '../components/carouselBlock'
-import {productItemFetch, tools} from '../store'
-import '../styles/catalogItemsWrapper.css'
+import {productItemFetch, userAction} from '../store'
import ProductItem from '../components/productItemShowcase'
+import { useParams } from 'react-router-dom'
+import IsLoading from '../components/isLoading.jsx'
+
+
function itemsWrapper () {
+
+ const [name, setName] = useState('')
+ const [price, setPrice] = useState('')
+ const [bestseller, setBestseller] = useState('')
+ const [image, setImage] = useState('')
+ const [about, setAbout] = useState('')
+
+ function imageHandle(e) {
+ if(e.target.files[0]){
+ setImage(e.target.files[0])
+ }
+ }
- const incrementPage = tools((state) => state.incrementPage)
- const decrimentPage = tools((state) => state.decrimentPage)
- const fixWrongPage = tools((state) => state.fixWrongPage)
+
+ const {category} = useParams();
+ const [isCreating, setIsCreating] = useState(false)
+
const findBiggestPrice = productItemFetch((state) => state.findBiggestPrice)
const biggestPrice = productItemFetch((state) => state.biggestPrice)
@@ -18,13 +35,18 @@ function itemsWrapper () {
const neededItems = productItemFetch((state) => state.neededItems)
const loaded = productItemFetch((state) => state.loaded)
const status = productItemFetch((state) => state.status)
+ const createObject = userAction((state) => state.createObject)
+ const isLogged = userAction((state) => state.isLogged)
+ const isLoading = userAction((state) => state.isLoading)
+ const [page, setPage] = useState(1)
const [lowHighFilter, setLowHighFilter] = useState('none')
const [bestsellerFilter, setBestsellerFilter] = useState(false)
- const [page, setPage] = useState(1)
- const [maxPrice, setMaxPrice] = useState(500)
+ const [maxPrice, setMaxPrice] = useState(biggestPrice)
const [minPrice, setMinPrice] = useState(0)
+ const isAction = userAction((state) => state.isAction)
+
function changeMaxPrice(e) {
setMaxPrice(e.target.value);
}
@@ -34,65 +56,114 @@ function itemsWrapper () {
}
useEffect( () => {
- findBiggestPrice()
+ findBiggestPrice(category)
}, [])
useEffect(()=> {
setMaxPrice(biggestPrice)
},[biggestPrice])
+ useEffect(() => {
+ if(isCreating === true){
+ setIsCreating(!isCreating)
+ }
+ },[isAction])
+
useEffect(() => {
const timer = setTimeout(() => {
- fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter);
+ fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter, category);
}, 200);
return () => clearTimeout(timer);
}, [minPrice, maxPrice, bestsellerFilter,lowHighFilter]);
+ async function createObjectHandle() {
+ await createObject('product',name,image,price,bestseller,about,category)
+ await fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter, category);
+ }
+
useEffect(() => {
- console.log(lowHighFilter)
- fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter )
+ fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter,category )
}, [page])
useEffect(() => {
- fixWrongPage(page, setPage)
- },[status])
+ fetchNeededItems(bestsellerFilter, minPrice, maxPrice, page, lowHighFilter, category);
+ },[isAction])
return (
<>
+ {isLoading &&
}
+ {isCreating ||
+ <>
{loaded &&
-
- Min price: {minPrice}
- Max price: {maxPrice}
- {setLowHighFilter(e.target.value)}}>
- None
- Low to high
- High to low
-
- Start with
-
}
+
+
+
+
+ Bestseller
+
+ {setLowHighFilter(e.target.value)}}>
+ None
+ Low to high
+ High to low
+
+
+
+ {isLogged &&
(setIsCreating(!isCreating))}>Create new item }
+
}
{loaded &&
-
- {neededItems.map((item) => (
-
- ))}
-
}
+
+ {neededItems.map((item) => (
+
+ ))}
+
}
{loaded &&
-
-
- decrimentPage(page, setPage)} className="decriment-btn carousel-btn">
- «
-
- <>{page}
- incrementPage(page, setPage)} className="increment-btn carousel-btn">
- »
-
-
-
+
}
+ }
+
+ {isCreating &&
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
(setIsCreating(!setIsCreating))}>Decline!
+
(createObjectHandle()) }>Add to site!
+
+
+ }
@@ -102,4 +173,3 @@ function itemsWrapper () {
export default itemsWrapper
-
diff --git a/cakeFront/src/sections/homeAboutUsSection.jsx b/cakeFront/src/sections/homeAboutUsSection.jsx
index f06b180..566d982 100644
--- a/cakeFront/src/sections/homeAboutUsSection.jsx
+++ b/cakeFront/src/sections/homeAboutUsSection.jsx
@@ -1,4 +1,4 @@
-import '../styles/homeAboutUsSection.css'
+
import LinkButton from '../components/linkButton'
@@ -13,7 +13,7 @@ function HomeAboutUsSection () {
About us
A small cozy pastry shop that will make your sweet dream come true. All products are selected for high quality and freshness. We prepare traditional pastries, as well as individual ones according to the wishes of the client
We think over the all details of the cake, design, the color scheme and decor.
-
+
}{infoBestseller && 
+ {isUpdate || <>
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
+