WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Parent Waiting View Added & Market Link goes to bad page fixed

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-06 06:33:33 +01:00
parent bbb099d51f
commit 626835e1e0
5 changed files with 220 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MarketPlace/MainSection.jsx
+28 -15
View File
@@ -1,8 +1,8 @@
import React, { useEffect, useMemo, useState } from "react";
import DataIteration from "../Helpers/DataIteration";
import AvailableJobsCard from "../Cards/AvailableJobsCard";
import ListView from '../../assets/images/list-view.png'
import GridView from '../../assets/images/grid-view.svg'
import ListView from "../../assets/images/list-view.png";
import GridView from "../../assets/images/grid-view.svg";
import SelectBox from "../Helpers/SelectBox";
export default function MainSection({
@@ -17,7 +17,7 @@ export default function MainSection({
);
const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
// Convert to array in order to map
const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -29,8 +29,8 @@ export default function MainSection({
setTab(value);
};
// Handles the category selection on mobile view
const handleSetCategory = (value) => {
// Handles the category selection on mobile view
const handleSetCategory = (value) => {
for (let i in marketCategories) {
if (marketCategories[i] == value) {
setTab(i);
@@ -57,7 +57,7 @@ export default function MainSection({
<div className="hidden lg:flex md:space-x-8 space-x-2">
{mappedArray.map(({ key, value }) => (
<span
key={key}
key={key}
onClick={() => tabHandler(key)}
className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
tab === key
@@ -76,30 +76,43 @@ export default function MainSection({
datas={Object.values(marketCategories)}
className="Update-table-dropdown"
contentBodyClasses="w-auto min-w-max"
position='left'
position="left"
/>
</div>
</div>
{/* contentDisplay toggler */}
<div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
<img
title={contentDisplay=='grid'? 'list view' : 'grid view'}
onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
src={contentDisplay=='grid'? ListView : GridView}
className="w-full h-full cursor-pointer" alt="view"
/>
<img
title={contentDisplay == "grid" ? "list view" : "grid view"}
onClick={() =>
setContentDisplay((prev) => (prev == "grid" ? "list" : "grid"))
}
src={contentDisplay == "grid" ? ListView : GridView}
className="w-full h-full cursor-pointer"
alt="view"
/>
</div>
{/* end of contentDisplay toggler */}
</div>
<div className="filter-navigate-content w-full min-h-screen">
<div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
<div
className={
contentDisplay == "grid"
? "grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"
: "w-full"
}
>
<DataIteration
datas={products}
startLength={process.env.REACT_APP_ZERO_STATE}
endLength={products?.length}
>
{({ datas }) => (
<AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} />
<AvailableJobsCard
contentDisplay={contentDisplay}
key={datas.id}
datas={datas}
/>
)}
</DataIteration>
</div>