Skip to content

Commit

Permalink
Merge pull request #55 from SomeshPundir/issue/formatName-fix
Browse files Browse the repository at this point in the history
Issue fixed: formatName function as per described.
  • Loading branch information
RutikKulkarni authored Jun 27, 2024
2 parents e6e628a + 8bfcbc5 commit 2b752eb
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 70 deletions.
37 changes: 36 additions & 1 deletion frontend/src/components/Card/Card.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,43 @@

.companyDetails {
font-weight: bold;
color: #78858f;
color: hsl(206, 9%, 52%);
}
.companyDetails p {
font-size: 12px;
}


/* Media query for mobile screens */
@media (max-width: 800px) {
.card {
padding: 10px;
}

.imageWrapper {
width: 60px;
margin-right: 8px;
}

.imageWrapper img {
width: 40px;
height: 40px;
border-radius: 40px;
}

.info {
width: calc(100% - 80px);
}

.info h2 {
font-size: 14px;
}

.info p {
font-size: 12px;
}

.companyDetails p {
font-size: 10px;
}
}
16 changes: 13 additions & 3 deletions frontend/src/pages/Explore/Explore.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,22 @@ import {

const Explore = () => {
const [columns, setColumns] = useState(3);
const [screenType, setScreenType] = useState('desktop');
const [searchQuery, setSearchQuery] = useState("");
const [filteredCards, setFilteredCards] = useState(cardData);

useEffect(() => {
const handleResize = () => {
setColumns(calculateColumns(window.innerWidth));
const width = window.innerWidth;
setColumns(calculateColumns(width));

if (width <= 800) {
setScreenType('mobile');
} else if (width <= 1349) {
setScreenType('tablet');
} else {
setScreenType('desktop');
}
};

window.addEventListener("resize", handleResize);
Expand Down Expand Up @@ -56,7 +66,7 @@ const Explore = () => {
<div className={styles.gridContainer}>
{mainGridCards.map((card, index) => (
<div key={index} className={styles.gridItem}>
<Card {...card} name={formatName(card.name)} />
<Card {...card} name={formatName(card.name, true, screenType, false)} />
</div>
))}
</div>
Expand All @@ -69,7 +79,7 @@ const Explore = () => {
>
{leftoverCards.map((card, index) => (
<div key={index} className={styles.gridItem}>
<Card {...card} name={formatName(card.name)} />
<Card {...card} name={formatName(card.name, true, screenType, true)} />
</div>
))}
</div>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/pages/Explore/Explore.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,11 @@
grid-template-columns: repeat(2, 1fr);
}

.leftoverOne .gridItem {
.leftoverGrid {
grid-template-columns: repeat(2, 1fr);
}

.leftoverGrid .gridItem {
grid-column: span 2;
}
}
Expand Down
20 changes: 11 additions & 9 deletions frontend/src/pages/Explore/cardData.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
//the cart data does not handle anything
// as if there is just 1 char at the firstname, midname , lastname.

const cardData = [
{ name: 'John Doe', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'John Doe', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'John Doe', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'John Doe', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'John Doe', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'rghnrerger Ddfgrgerg tryherherh', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'cbhnrerger sdrgsrgerg kkherherh', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Abcgdv Abhgcd bghccd', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'abcdaveabcd asdasd abcdabcd', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'asdik asdtasd abcdabc', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Alice Wonderland', title: 'Product Manager', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Bob Marley', title: 'Designer', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Christopher Colum landbus', title: 'Navigator', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Jonathan Livingston Seagull', title: 'Bird', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Katherine mark lee Johnson', title: 'Mathematician', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Leonardo da Vinci', title: 'Artist', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'Michael Jeffrey Jordan', title: 'Athlete', company: 'Company Logo', img: "https://via.placeholder.com/50" },
{ name: 'rss s l kk', title: 'Software Engineer - 1', company: 'Company Logo', img: "https://via.placeholder.com/50" },
];

export default cardData;
Expand Down
55 changes: 55 additions & 0 deletions frontend/src/pages/Explore/exploreHelper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
export const calculateColumns = (width) => {

if (width <= 768) {
return 1;
} else if (width <= 1024) {
return 2;
} else {
return 3;
}
};

export const splitCardsIntoMainAndLeftover = (cards, columns) => {
const mainGridCards = cards.slice(0, Math.floor(cards.length / columns) * columns);
const leftoverCards = cards.slice(Math.floor(cards.length / columns) * columns);
return { mainGridCards, leftoverCards };
};

export const getLeftoverGridClass = (leftoverCount, styles) => {
if (leftoverCount === 1) return styles.leftoverOne;
if (leftoverCount === 2) return styles.leftoverTwo;
return styles.leftoverThree;
};

export const formatName = (name, shouldFormat, screenType, isLeftover) => {
if (!shouldFormat) return name;

if (screenType === 'mobile' || (screenType !== 'mobile' && isLeftover)) {
return name;
}

if (name.length <= 20) {
return name;
}

const nameParts = name.split(' ');
if (nameParts.length === 1) {
return name; // If there's only one part and it's long, return it as is.
}

const firstName = nameParts[0];
const middleName = nameParts.length > 1 ? nameParts[1] : '';
const lastName = nameParts[nameParts.length - 1];

if (nameParts.length > 3) {
return `${firstName} ${middleName[0].toUpperCase()}. ${lastName[0].toUpperCase()}.`;
}

let formattedName = `${firstName} ${middleName} ${lastName}`;

if (formattedName.length > 20) {
formattedName = `${firstName} ${middleName[0].toUpperCase()}. ${lastName[0].toUpperCase()}.`;
}

return formattedName;
};
55 changes: 0 additions & 55 deletions frontend/src/pages/Explore/gridHelper.js

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/src/pages/Explore/imports/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export {
splitCardsIntoMainAndLeftover,
getLeftoverGridClass,
formatName,
} from "../gridHelper";
} from "../exploreHelper";

export { default as cardData } from "../cardData";
export { default as SearchBox } from "../../../components/SearchBox/SearchBox";

0 comments on commit 2b752eb

Please sign in to comment.