more-tech4-magnum-opus/frontend
1
0
Fork 0
mirror of https://github.com/more-tech4-magnum-opus/frontend.git synced 2024-11-24 17:43:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

add marketplace

Browse Source
This commit is contained in:
Firesieht 2022-10-08 19:23:31 +03:00
parent 86477bd461
commit dcd43fa9de
9 changed files with 108 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/admin/adminMarket/index.tsx
View File

@ -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,6 +21,29 @@ 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">

4
src/admin/adminMarketCard/adminMarketCard.css
View File

@ -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)
}

19
src/admin/adminMarketCard/index.tsx
View File

@ -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>
)
}

10
src/admin/adminMarketPopUp/index.tsx
View File

@ -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")
}

15
src/admin/index.tsx
View File

@ -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(

64
src/app/admin/adminSlice.ts
View File

@ -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

2
src/app/interfaces.ts
View File

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

1
src/components/Header/Header.css
View File

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

22
src/components/fileUploader.tsx
View File

@ -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') {
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;
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.`);
}
},
};
return (
<Upload {...props} multiple>
<Button icon={<UploadOutlined></UploadOutlined>}>Загрузите файлы для проверки</Button>
<Upload {...props}>
<Button icon={<UploadOutlined></UploadOutlined>}>Загрузите картинку</Button>
</Upload>
);
}