Skip to content

Commit

Permalink
tabs added and preview ui change
Browse files Browse the repository at this point in the history
  • Loading branch information
@qayyumgb
qayyumgb committed Jan 14, 2024
1 parent 21df033 commit a826fde
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 102 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-redux": "^9.0.4",
"react-router-dom": "^6.21.1",
"react-scripts": "5.0.1",
Expand Down
13 changes: 9 additions & 4 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ import reportWebVitals from './reportWebVitals';

import './index.scss';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-fade';



const root = ReactDOM.createRoot(
Expand All @@ -27,10 +32,10 @@ const root = ReactDOM.createRoot(

root.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
Expand Down
49 changes: 27 additions & 22 deletions src/pages/home/components/card-data-added/card-data-added.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Checkbox, FormControlLabel, Grid } from '@mui/material';
import { Button, Checkbox, FormControlLabel, Grid, IconButton } from '@mui/material';
import React, { useState, useEffect } from 'react';
import styles from "./card-data-added.module.scss";
import { useUpdateInnerActiveMutation } from '../../../../redux/slices/home';
Expand Down Expand Up @@ -34,13 +34,18 @@ const CardDataAdded: React.FC<CarousalAddedProps> = ({ cardAddedData, checkboxSt
const updatedItems = Array.from(items);
const [reorderedItem] = updatedItems.splice(result.source.index, 1);
updatedItems.splice(result.destination.index, 0, reorderedItem);
const updatedFormData = updatedItems.map((item, index) => ({
...item,
order: index + 1,
}));
setItems(updatedFormData);

setItems(updatedItems);
}


const sortedCardData = [...cardAddedData].sort((a, b) => a.order - b.order);
useEffect(() => {
setItems(cardAddedData)
setItems(sortedCardData)
// Update local checkbox state when the external checkbox state changes
setLocalCheckboxState(checkboxState);
}, [checkboxState, cardAddedData]);
Expand All @@ -52,30 +57,32 @@ const CardDataAdded: React.FC<CarousalAddedProps> = ({ cardAddedData, checkboxSt
}));
};

const handleCheckboxChange = async (itemId: string, checked: boolean) => {
const handleCheckboxChange = (itemId: string, checked: boolean) => {
setLocalCheckboxState((prevState) => ({
...prevState,
[itemId]: checked,
}));

setItems((prevItems) =>
prevItems.map((item) =>
item.id === itemId ? { ...item, active: checked } : item
)
);

const payload = {
// create a payload for submitting form
}
id: itemId,
active: checked,
};

try {
await updateInnerActive({ payload: payload });
// show some toast or snackbar message for success
console.log("API hit on Active Checkbox")

console.log("API hit on Active Checkbox");
} catch (error) {
console.log('error while adding form data', error);
console.log('error while updating checkbox state', error);
} finally {
// incase if loader used, stop it here
}
};

const handleEditCardData = (itemId: string, editedData: any) => {
// Update the item in the local state or dispatch an action to update it in Redux
const updatedItems = items.map((item) =>
item.id === itemId ? { ...item, ...editedData } : item
);
Expand All @@ -100,7 +107,7 @@ const CardDataAdded: React.FC<CarousalAddedProps> = ({ cardAddedData, checkboxSt
};
return (
<Grid item xs={12} >
{cardAddedData.length > 0 ? (
{sortedCardData.length > 0 ? (
<>
<form onSubmit={() => handleSubmit(items)}>
<DragDropContext onDragEnd={handleDragEnd}>
Expand Down Expand Up @@ -135,14 +142,12 @@ const CardDataAdded: React.FC<CarousalAddedProps> = ({ cardAddedData, checkboxSt
<div className={styles.cardDataBody}>
<div className={styles.cardBodyInfo}>
<div className={styles.cardDataEditBtn}>
<Button variant="contained" style={{ padding: '5px' }} color='error' onClick={() => handleDeleteButtonClick(item.id)}>
<DeleteIcon />
</Button>
<Button className='primary-btn' style={{ padding: '5px' }} variant="contained" color="success"
onClick={() => handleEditButtonClick(item.id)}
>
<EditIcon />
</Button>
<IconButton aria-label="delete" size="small" color='error' onClick={() => handleDeleteButtonClick(item.id)}>
<DeleteIcon />
</IconButton>
<IconButton aria-label="edit" size="small" style={{ marginLeft: '3px' }} onClick={() => handleEditButtonClick(item.id)}>
<EditIcon />
</IconButton>
</div>
<ModalWrapper open={editedItemId === item.id} onClose={handleModalClose}>
<CardDataEdit
Expand Down
40 changes: 23 additions & 17 deletions src/pages/home/components/carousel-added-data/carousel-added-data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const CarousalAdded: React.FC<CarousalAddedProps> = ({ carousalData, checkboxSta
const [editedItemId, setEditedItemId] = useState<string | null>(null);

const [updateInnerActive] = useUpdateInnerActiveMutation();


const handleDragEnd = (result: any) => {
if (!result.destination) {
Expand All @@ -38,7 +38,7 @@ const CarousalAdded: React.FC<CarousalAddedProps> = ({ carousalData, checkboxSta
const updatedFormData = updatedItems.map((item, index) => ({
...item,
order: index + 1,
}));
}));
setItems(updatedFormData);
}

Expand All @@ -47,7 +47,7 @@ const CarousalAdded: React.FC<CarousalAddedProps> = ({ carousalData, checkboxSta
setItems(sortedCarouselData)
// Update local checkbox state when the external checkbox state changes
setLocalCheckboxState(checkboxState);
}, [checkboxState,carousalData]);
}, [checkboxState, carousalData]);

const updateLocalCheckboxState = (itemId: string, checked: boolean) => {
setLocalCheckboxState((prevState) => ({
Expand All @@ -62,21 +62,27 @@ const CarousalAdded: React.FC<CarousalAddedProps> = ({ carousalData, checkboxSta
[itemId]: checked,
}));

setItems((prevItems) =>
prevItems.map((item) =>
item.id === itemId ? { ...item, active: checked } : item
)
);

const payload = {
// create a payload for submitting form
}
id: itemId,
active: checked,
};

try {
await updateInnerActive({ payload: payload });

// show some toast or snackbar message for success
await updateInnerActive({ payload });

console.log("API hit on Active Checkbox")
console.log("API hit on Active Checkbox");

} catch (error) {
console.log('error while adding form data', error);
console.log('Error while updating checkbox state', error);
// Handle error - show an error message or perform other actions
} finally {
// incase if loader used, stop it here
// In case if loader used, stop it here
}
};

Expand Down Expand Up @@ -143,12 +149,12 @@ const CarousalAdded: React.FC<CarousalAddedProps> = ({ carousalData, checkboxSta
<img src={item?.image} width={120} />
<div className={styles.cardBodyInfo}>
<div className={styles.editCarousalData}>
<IconButton aria-label="delete" size="small" color='error' onClick={() => handleDeleteButtonClick(item.id)}>
<DeleteIcon />
</IconButton>
<IconButton aria-label="edit" size="small" style={{ marginLeft: '3px' }} onClick={() => handleEditButtonClick(item.id)}>
<EditIcon />
</IconButton>
<IconButton aria-label="delete" size="small" color='error' onClick={() => handleDeleteButtonClick(item.id)}>
<DeleteIcon />
</IconButton>
<IconButton aria-label="edit" size="small" style={{ marginLeft: '3px' }} onClick={() => handleEditButtonClick(item.id)}>
<EditIcon />
</IconButton>

</div>
<ModalWrapper open={editedItemId === item.id} onClose={handleModalClose}>
Expand Down
28 changes: 18 additions & 10 deletions src/pages/home/components/preview-card-data/preview-card-data.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
.previewMain {
background-color: white;
display: block;
height: 300px;
border-radius: 10px;
padding: 20px 30px;
margin: 30px 0;
box-shadow: 0 0 13px 1px gainsboro;

.previewContent {
height: 100%;

.previewBody {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
justify-content: space-between;
align-items: center;

h5 {
width: 100%;
font-size: 40px;
font-weight: 500;
font-size: 18px;
font-weight: 700;
margin: 0;
}

Expand All @@ -29,14 +28,23 @@
display: flex;
justify-content: end;

.previewButton {
background-color: #FF7222;
a {
color: #ff7222;
border: 3px solid #ff7222;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
color: white;
padding: 20px;
}
}
}

p {
font-size: 16px;
margin-top: 0;
}
}
}

Expand Down
52 changes: 21 additions & 31 deletions src/pages/home/components/preview-card-data/preview-card-data.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,40 @@
import { Button, Grid } from '@mui/material';
import React from 'react';
import styles from "./preview-card-data.module.scss";
import { Link as RouterLink } from 'react-router-dom'
import EastIcon from '@mui/icons-material/East';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import { CardDataJson } from '../../../../interfaces';
import styles from "./preview-card-data.module.scss";
import EastIcon from '@mui/icons-material/East';

interface CardDataAdded {
cardDataMain: CardDataJson[];
}

const PreviewCardDataItem: React.FC<CardDataAdded> = ({ cardDataMain }) => {
// Display only the first item
const firstItem = cardDataMain.length > 0 ? cardDataMain : null;
console.log('test', cardDataMain)
return (
<>
<Grid container justifyContent="center">
<Swiper loop={true} navigation={true} modules={[Navigation]} className="mySwiper" style={{ width: '100%' }}>
{cardDataMain.map((item: CardDataJson, index: number) => (
<SwiperSlide>
<div className={styles.previewMain} key={index}>
<div className={styles.previewContent}>
<div className={styles.previewBody}>
<div>
<h5>{item.title}</h5>
<p>{item.description}</p>
</div>
<div className={styles.previewBtn}>
<Button className={styles.previewButton} component={RouterLink} to={item.action}>
<EastIcon />
</Button>
</div>
<Swiper loop={true} navigation={true} modules={[Navigation]} className="mySwiper" style={{ width: '100%' }} slidesPerView={3} spaceBetween={20}>
{cardDataMain.map((item: CardDataJson) => (
<SwiperSlide key={item.id}>
<div className={styles.previewMain}>
<div className={styles.previewContent}>
<div className={styles.previewBody}>
<div>
<h5>{item.title}</h5>
</div>
<div className={styles.previewBtn}>
<a href={item.action}>
<EastIcon />
</a>
</div>
</div>
<p>{item.description}</p>
</div>
</SwiperSlide>

))}
</Swiper>
</Grid>

</div>
</SwiperSlide>
))}
</Swiper>
</>
);
};
Expand Down
4 changes: 3 additions & 1 deletion src/pages/home/components/top-carousel/top-carousel.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


.heroMain {
background-color: #ededed;
margin-bottom: 30px;
Expand All @@ -17,7 +19,7 @@
font-size: 22px;
}
}

}

.bannerCarousal {
Expand Down
Loading

0 comments on commit a826fde

Please sign in to comment.