add marketplace

src/admin/adminMarket/index.tsx

@@ -1,23 +1,18 @@
 import React, { useState } from "react"
-import { getProducts, getUser } from "../../app/admin/adminSlice";
+import { addProduct, addProducts, fetchAddProduct, getProducts, getUser } from "../../app/admin/adminSlice";
 import { RootAdminState } from "../../app/adminStore";
-import { useAppSelector } from "../../app/hooks";
+import { adminFetcher, useAppDispatch, useAppSelector } from "../../app/hooks";
 import { Header } from "../../components/Header";
 import { AdminMarketCard } from "../adminMarketCard";
 import "./adminMarket.css"
-import {
-    BrowserRouter as Router,
-    Route,
-    Routes,
-    Link
-  } from "react-router-dom";
-import { AdminMarketPopUp } from "../adminMarketPopUp";
+import { ProductIE } from "../../app/interfaces";
 
 export const AdminMarket:React.FC = () =>{
-    const [opened, setOpened] = useState(false);
+    const [first, setFirst] = useState(true)
+
     let user = useAppSelector((state:RootAdminState)=>getUser(state))
     let cards: JSX.Element[] = []
-    let products = useAppSelector(
+    let prod = useAppSelector(
         (state: RootAdminState)=>getProducts(state)).forEach(
             product=>cards.push(<AdminMarketCard  
                         name={product.name}
@@ -26,7 +21,30 @@ export const AdminMarket:React.FC = () =>{
                         cost={product.cost} 
                         id={product.id}
                     ></AdminMarketCard>))
-    
+    let products = useAppSelector((state:RootAdminState)=>getProducts(state))
+
+    let dispatch = useAppDispatch()
+
+    if (products.length == 0 && first ){
+        setFirst(false)
+        adminFetcher.get("marketplace/product/").then(
+        (response)=>{
+            dispatch(addProducts(
+                response.data.map((params:any)=>
+                    ({
+                        name: params.name,
+                        description:params.description,
+                        image: params.image_cropped,
+                        cost:Number(params.price),
+                        id:params.slug
+                    } as ProductIE)
+                )
+            ))
+            }
+        )
+    }
+
+
     return(
             <div className="market">
                 <Header links={[

src/admin/adminMarketCard/adminMarketCard.css

@@ -1,6 +1,6 @@
 .adminCard{
     width: 240px;
-    max-height: 400px;
+    max-height: 450px;
     display: flex;
     flex-direction: column;
     background: #FFFFFF;
@@ -37,7 +37,7 @@
 .adminCardH2{
     font-weight: 400;
     font-size: 16px;
-    line-height: 24px;
+    line-height: 18px;
     color: rgba(0, 0, 0, 0.85)
 }
 

src/admin/adminMarketCard/index.tsx

@@ -14,15 +14,18 @@ export const AdminMarketCard:React.FC<ProductIE> = (props) =>{
     
     return(
         <div className="adminCard">
-            <img src={props.image}></img>
-            <div className="adminCost">
-                <img src="/rub.svg"></img>
-                <div>{props.cost}</div>
+            <img className="adminImg" src={props.image}></img>
+            <div className="adminCardWrapper">
+                <div className="adminCost">
+                    <img src="/rub.svg"></img>
+                    <div>{props.cost}</div>
+                </div>
+                <div className="adminCardH2">{props.name}</div>
+                <div className="adminCardDescr">{props.description.split(" ").slice(0,6).join(" ")}</div>
+                <Button className="btn1" style={{width:"100%"}} onClick={()=>navigate("/admin/market/" + props.id) }>Редактировать</Button>
+                <Button className="btn2" style={{width:"100%"}} onClick={()=>fetchDelProduct(dispatch, props.id)}>Удалить</Button>
             </div>
-            <div>{props.name}</div>
-            <div>{props.description}</div>
-            <Button className="btn1" onClick={()=>navigate("/admin/market/" + props.id) }>Редактировать</Button>
-            <Button className="btn2" onClick={()=>fetchDelProduct(dispatch, props.id)}>Удалить</Button>
+            
         </div>
     )
 }

src/admin/adminMarketPopUp/index.tsx

@@ -11,7 +11,7 @@ import { Header } from "../../components/Header"
 
 export const AdminMarketPopUp:React.FC = () =>{
     let {id} = useParams()
-    let product = useAppSelector((state: RootAdminState)=>getProductByID(state, Number(id)))
+    let product = useAppSelector((state: RootAdminState)=>getProductByID(state, id as string))
     const [cost, setCost] = useState(product.cost)
     const [name, setName] = useState(product.name)
     const [descr, setDescr] = useState(product.description)
@@ -20,14 +20,12 @@ export const AdminMarketPopUp:React.FC = () =>{
     let dispatch = useAppDispatch()
     let navigate = useNavigate()
     const onSave = () =>{
-        console.log("cocb")
         fetchChangeProduct(dispatch, {
             cost: cost, 
             name: name,
-            description: descr,
-            id:product.id,
-            image: product.image
-        } as ProductIE)
+            descr: descr,
+            id: product.id
+        })
         navigate("/admin/market")
     }
 

src/admin/index.tsx

@@ -8,21 +8,8 @@ import { RootAdminState } from "../app/adminStore";
 import { Header } from "../components/Header";
 
 export const AdminPage:React.FC = () => {
-    const [respProducts, setRespProducts] = useState([-1 as any])
-    let products = useAppSelector((state:RootAdminState)=>getProducts(state))
-    let user = useAppSelector((state:RootAdminState)=>getUser(state))
-    let dispatch = useAppDispatch()
-    if (products.length == 0){
-        adminFetcher.get("marketplace/product/").then(
-        (response)=> setRespProducts(response.data as any)
-        )
-    }
 
-    if (respProducts[0] != -1){
-        respProducts.forEach((product)=>{
-            fetchAddProduct(dispatch, product)
-        })
-    }
+    let user = useAppSelector((state:RootAdminState)=>getUser(state))
 
 
     return(

src/app/admin/adminSlice.ts

@@ -32,9 +32,16 @@ const adminSlice = createSlice(
                 state.user.balance = state.user.balance - action.payload
             },
             addProduct(state, action: PayloadAction<ProductIE>){
-                state.market.products = state.market.products.concat([action.payload])
+                if(state.market.products.indexOf(action.payload) == -1){
+                    state.market.products = state.market.products.concat([action.payload])
+                }
             },
-            delProduct(state, action:PayloadAction<number>){
+            addProducts(state, action: PayloadAction<ProductIE[]>){
+                if(state.market.products.length == 0){
+                    state.market.products = state.market.products.concat(action.payload)
+                }
+            },
+            delProduct(state, action:PayloadAction<string>){
                 let products = state.market.products
                 let ind = 0
                 products.forEach((product, index)=>{
@@ -47,6 +54,7 @@ const adminSlice = createSlice(
             },
             changeProduct(state, action:PayloadAction<ProductIE>){
                 let products = state.market.products
+                console.log(action.payload)
                 products.forEach((product,index)=>{
                     if (product.id == action.payload.id){
                         products[index] = action.payload
@@ -64,29 +72,50 @@ export async function fetchSendCoins(dispatch:AppAdminDispatch, params:{userID:n
     dispatch(sendCoins(params.amount))
 }
 
-export async function fetchAddProduct(dispatch:AppAdminDispatch, params:{image: FormData, descr: string, name:string, cost:number}) {
+export async function fetchAddProduct(dispatch:AppAdminDispatch, params:{image: File, descr: string, name:string, cost:number}) {
     //тут идет фетч
-    let data = {
-        image: "",
-        description: params.descr,
-        name: params.name,
-        cost: params.cost,
-        id: params.cost
-    } as ProductIE //vмоковая даата
-    adminFetcher.post("marketplace/product/", {
+    const formData = new FormData()
+    formData.append("name",params.name)
+    formData.append("description",params.descr)
+    formData.append("image", params.image)
+    formData.append("price",params.cost.toString())
+    adminFetcher.post("marketplace/product/", formData).then((response)=>{
+        dispatch(addProduct({
+            name: response.data.name,
+            description:response.data.description,
+            image: response.data.image_cropped,
+            cost:Number(response.data.price),
+            id:response.data.slug
+        } as ProductIE))
         
     })
 
-    dispatch(addProduct(data))
+    
 }
 
-export async function fetchDelProduct(dispatch:AppAdminDispatch, id:number) {
+export async function fetchDelProduct(dispatch:AppAdminDispatch, id:string) {
     //тут идет фетч
-    dispatch(delProduct(id))
+    adminFetcher.delete("marketplace/product/"+id).then(()=>dispatch(delProduct(id)))
+    
 }
 
-export async function fetchChangeProduct(dispatch:AppAdminDispatch, params:ProductIE) {
-    dispatch(changeProduct(params))
+export async function fetchChangeProduct(dispatch:AppAdminDispatch, params:{id:string, descr: string, name:string, cost:number}) {
+    const formData = new FormData()
+    formData.append("name",params.name)
+    formData.append("description",params.descr)
+    formData.append("price",params.cost.toString())
+    adminFetcher.patch("marketplace/product/" + params.id, formData).then((response)=>{
+        dispatch(delProduct(params.id))
+        dispatch(addProduct({
+            name: response.data.name,
+            description:response.data.description,
+            image: response.data.image_cropped,
+            cost:Number(response.data.price),
+            id:response.data.slug
+        } as ProductIE))
+        
+    })
+      
 }
 
 export const getProducts = createSelector(
@@ -95,7 +124,7 @@ export const getProducts = createSelector(
 )
 
 export const getProductByID = createSelector(
-    (state:RootAdminState, id:number) => state.adminSlice.market.products.filter((product)=>product.id == id)[0],
+    (state:RootAdminState, id:string) => state.adminSlice.market.products.filter((product)=>product.id == id)[0],
     (field)=>field
 )
 
@@ -113,6 +142,7 @@ export const {
     addProduct,
     delProduct,
     changeProduct,
+    addProducts
 } = adminSlice.actions
 
 export default adminSlice.reducer

src/app/interfaces.ts

@@ -42,7 +42,7 @@ export interface ProductIE{
     description:string,
     image: string,
     cost: number,
-    id: number,
+    id: string,
 }
 
 export enum SortTypes{

src/components/Header/Header.css

@@ -15,6 +15,7 @@
     line-height: 24px;
 
     color: #FFFFFF;
+    z-index: 1000;
 }
 .links{
     display: flex;

src/components/fileUploader.tsx

@@ -12,27 +12,25 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
 
     const props = {
         name: 'file',
-        action: host + '/api/',
+        action: "",
         headers: {
           authorization: 'authorization-text',
         },
-      
-        onChange(info:any) {
-          if (info.file.status !== 'uploading') {
-          }
-      
-          if (info.file.status === 'done') {
-            data.onResponse(info.file.response)
-            message.success(`${info.file.name} file uploaded successfully`);
-          } else if (info.file.status === 'error') {
-            message.error(`${info.file.name} file upload failed.`);
+        beforeUpload: (file:File) => {
+          const isPNG = file.type === 'image/png';
+          if (!isPNG) {
+            message.error(`${file.name} is not a png file`);
           }
+          data.onResponse(file)
+          return isPNG || Upload.LIST_IGNORE;
+          
         },
+        
       };
       
     return (
-            <Upload {...props} multiple>
-              <Button icon={<UploadOutlined></UploadOutlined>}>Загрузите файлы для проверки</Button>
+            <Upload {...props}>
+              <Button icon={<UploadOutlined></UploadOutlined>}>Загрузите картинку</Button>
             </Upload>
       );
 }