From 82e10e1fb7222ea0ae3fee559c7690984883f277 Mon Sep 17 00:00:00 2001
From: Madhankumar <madhankumar.r@krds.fr>
Date: Wed, 3 Jan 2024 16:20:50 +0530
Subject: [PATCH] extract search from url
---
.storybook/preview.js | 2 +-
app/@header/default.js | 4 +++-
app/page.js | 27 +++++++++++++++++----------
app/page.module.css | 3 +++
components/base/button/button.stories.js | 6 ++++--
components/base/button/index.js | 14 ++++++++------
components/base/card/card.stories.js | 3 ---
components/base/card/styles.module.css | 3 ++-
components/base/header/index.js | 19 +++++++++++++++----
components/base/icons/icons.stories.js | 2 +-
components/base/icons/styles.module.css | 5 +++++
components/base/search/index.js | 13 +++----------
components/top-level/blog-lists/index.js | 20 +-------------------
components/top-level/blog-lists/styles.module.css | 27 +++++++++++++++++----------
styles/globals.css | 2 +-
15 files changed, 81 insertions(+), 69 deletions(-)
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 37c6fec..1cde0ae 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
/** @type { import('@storybook/react').Preview } */
-import "../app/globals.css";
+import "@styles/globals.css";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";
import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
diff --git a/app/@header/default.js b/app/@header/default.js
index 3665399..808abee 100644
--- a/app/@header/default.js
+++ b/app/@header/default.js
@@ -3,10 +3,11 @@ import Header from "@components/base/header";
import { useAppContext } from "@context/index";
import { useRouter } from "next/navigation";
-export default function PageHeader() {
+export default function PageHeader({ searchParams }) {
const { theme, toggleTheme } = useAppContext();
const router = useRouter();
let currentPage = 1;
+ const urlParams = searchParams.search;
const handleSearch = (value) => {
if (value) {
@@ -29,6 +30,7 @@ export default function PageHeader() {
onThemeChange={toggleTheme}
onSearch={handleSearch}
onClose={handleClose}
+ value={urlParams}
/>
);
}
diff --git a/app/page.js b/app/page.js
index 93d1046..89eb184 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,10 +1,11 @@
import BlogLists from "@components/top-level/blog-lists";
+import Pagination from "@components/top-level/pagination";
import { getPosts, getPostsBySearch } from "@lib/api";
import styles from "./page.module.css";
const Home = async ({ searchParams }) => {
let blogs = [];
- let pageNo = searchParams.page;
+ let pageNo = searchParams.page || 1;
let search = searchParams.search;
let response;
@@ -13,7 +14,6 @@ const Home = async ({ searchParams }) => {
if ("search" in searchParams && pageNo !== "") {
if (search !== "") {
- console.log("dfknb", pageNo);
response = await getPostsBySearch("posts", pageNo, search);
blogs = response.data;
} else {
@@ -23,14 +23,21 @@ const Home = async ({ searchParams }) => {
return (
<div className={styles.container}>
{blogs?.length ? (
- <BlogLists
- title="Lifestyle"
- description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
- blogs={blogs}
- total={response.total}
- currentPage={Number(pageNo)}
- search={search}
- />
+ <div>
+ <BlogLists
+ title="Lifestyle"
+ description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
+ blogs={blogs}
+ />
+ <div className={styles.pagination}>
+ <Pagination
+ currentPage={Number(pageNo)}
+ total={Number(response.total)}
+ perPage={6}
+ search={search}
+ />
+ </div>
+ </div>
) : (
<h2 className="center">No data found</h2>
)}
diff --git a/app/page.module.css b/app/page.module.css
index c292a10..63dd239 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -1,3 +1,6 @@
.container {
padding-top: 1rem;
}
+.pagination {
+ margin-block: 2rem;
+}
diff --git a/components/base/button/button.stories.js b/components/base/button/button.stories.js
index 982760e..b809e1f 100644
--- a/components/base/button/button.stories.js
+++ b/components/base/button/button.stories.js
@@ -8,7 +8,9 @@ export default {
export const button = {
args: {
variant: "primary",
- children: "Button",
- isDisabled: false,
+ disabled: false,
+ },
+ render: (args) => {
+ return <Button {...args}>Button</Button>;
},
};
diff --git a/components/base/button/index.js b/components/base/button/index.js
index 474a435..ff8f218 100644
--- a/components/base/button/index.js
+++ b/components/base/button/index.js
@@ -4,11 +4,10 @@ import cn from "classnames";
import styles from "./styles.module.css";
const Button = ({
- children,
disabled = false,
variant,
+ children,
className,
- href,
...props
}) => {
const classNames = cn(styles["btn"], {
@@ -17,17 +16,20 @@ const Button = ({
[styles.disabled]: disabled,
});
- return (
- <Link href={href} className={classNames} {...props}>
+ return props.href != undefined ? (
+ <Link className={classNames} {...props}>
{children}
</Link>
+ ) : (
+ <button className={classNames} {...props}>
+ {children}
+ </button>
);
};
Button.propTypes = {
variant: PropTypes.oneOf(["primary", "secondary"]),
- children: PropTypes.any,
- isDisabled: PropTypes.bool,
+ disabled: PropTypes.bool,
};
export default Button;
diff --git a/components/base/card/card.stories.js b/components/base/card/card.stories.js
index efd8ee7..6a7ea42 100644
--- a/components/base/card/card.stories.js
+++ b/components/base/card/card.stories.js
@@ -26,7 +26,4 @@ export const card = {
},
readingTime: "1 min",
},
- render: (args) => {
- return <Card {...args} />;
- },
};
diff --git a/components/base/card/styles.module.css b/components/base/card/styles.module.css
index 1420946..c323b80 100644
--- a/components/base/card/styles.module.css
+++ b/components/base/card/styles.module.css
@@ -55,6 +55,7 @@
font-size: 18px;
font-weight: 500;
line-height: 0;
+ color: var(--font-color-900);
}
.card-content .card-author .authordescription .author-desc {
display: flex;
@@ -82,7 +83,7 @@
@media screen and (min-width: 768px) {
.card {
- width: min(90%, 25rem);
+ width: min(100%, 22rem);
}
.card-content .card-author .authordescription .author-desc {
font-size: clamp(0.8rem, 0.5rem + 1vw, 1rem);
diff --git a/components/base/header/index.js b/components/base/header/index.js
index 00ad7fa..6081143 100644
--- a/components/base/header/index.js
+++ b/components/base/header/index.js
@@ -4,7 +4,14 @@ import Icons from "@components/base/icons";
import styles from "./styles.module.css";
import PropTypes from "prop-types";
-function Header({ name, currentTheme, onSearch, onClose, onThemeChange }) {
+function Header({
+ name,
+ currentTheme,
+ onSearch,
+ onClose,
+ onThemeChange,
+ value,
+}) {
const handleTheme = () => {
onThemeChange(currentTheme);
};
@@ -20,18 +27,22 @@ function Header({ name, currentTheme, onSearch, onClose, onThemeChange }) {
<div className={styles.container}>
<nav className={styles.navbar}>
<Link className={styles["navbar-brand"]} href={`/?page=1`}>
- <Icons name="newspaper" size="medium" classes="newspaper-icon" />
+ <Icons name="newspaper" size="large" classes="newspaper-icon" />
<h3>{name}</h3>
</Link>
<div className={styles.search}>
- <Search onSearch={handleSearch} onClose={handleClose} />
+ <Search
+ onSearch={handleSearch}
+ onClose={handleClose}
+ value={value}
+ />
</div>
<div onClick={handleTheme} className={styles.themeLight}>
<Icons
name={currentTheme === "light" ? "sun" : "moon"}
- size="medium"
+ size="large"
/>
</div>
</nav>
diff --git a/components/base/icons/icons.stories.js b/components/base/icons/icons.stories.js
index 0132868..a582f36 100644
--- a/components/base/icons/icons.stories.js
+++ b/components/base/icons/icons.stories.js
@@ -9,7 +9,7 @@ export const icons = () => {
return (
<div className="icon-container">
{iconList.map((e, i) => (
- <div key={i}>{<Icons name={e} size="small" />}</div>
+ <div key={i}>{<Icons name={e} size="medium" />}</div>
))}
</div>
);
diff --git a/components/base/icons/styles.module.css b/components/base/icons/styles.module.css
index 6f222a4..00df7a8 100644
--- a/components/base/icons/styles.module.css
+++ b/components/base/icons/styles.module.css
@@ -4,6 +4,11 @@
color: var(--font-color-300);
}
.medium svg {
+ height: 24px;
+ width: 24px;
+ color: var(--font-color-300);
+}
+.large svg {
height: 38px;
width: 38px;
color: var(--font-color-300);
diff --git a/components/base/search/index.js b/components/base/search/index.js
index 5ff22ce..56a98ff 100644
--- a/components/base/search/index.js
+++ b/components/base/search/index.js
@@ -1,17 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
import PropTypes from "prop-types";
-import { useSearchParams } from "next/navigation";
import Icons from "@components/base/icons";
import styles from "./styles.module.css";
-const Search = ({ onSearch, onClose }) => {
- const searchParams = useSearchParams();
- const search = searchParams.get("search") || "";
- const [inputValue, setInputValue] = useState(search);
-
- useEffect(() => {
- setInputValue(search);
- }, [search]);
+const Search = ({ onSearch, onClose, value }) => {
+ const [inputValue, setInputValue] = useState(value);
const handleCustomClear = () => {
onClose("");
diff --git a/components/top-level/blog-lists/index.js b/components/top-level/blog-lists/index.js
index 74a5bce..d4ed009 100644
--- a/components/top-level/blog-lists/index.js
+++ b/components/top-level/blog-lists/index.js
@@ -1,16 +1,8 @@
import PropTypes from "prop-types";
import Card from "@components/base/card";
-import Pagination from "@components/top-level/pagination";
import styles from "./styles.module.css";
-const BlogLists = ({
- title,
- description,
- blogs,
- currentPage,
- total,
- search,
-}) => {
+const BlogLists = ({ title, description, blogs }) => {
return (
<div className={styles["blog-container"]}>
<h2 className={styles.title}>{title}</h2>
@@ -22,14 +14,6 @@ const BlogLists = ({
</div>
))}
</div>
- <div className={styles.pagination}>
- <Pagination
- currentPage={currentPage}
- total={Number(total)}
- perPage={6}
- search={search}
- />
- </div>
</div>
);
};
@@ -38,8 +22,6 @@ BlogLists.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
blogs: PropTypes.array,
- currentPage: PropTypes.number,
- total: PropTypes.number,
};
export default BlogLists;
diff --git a/components/top-level/blog-lists/styles.module.css b/components/top-level/blog-lists/styles.module.css
index 132e626..6b21dac 100644
--- a/components/top-level/blog-lists/styles.module.css
+++ b/components/top-level/blog-lists/styles.module.css
@@ -3,7 +3,8 @@
margin: 0 auto;
margin-bottom: 2rem;
scroll-behavior: smooth;
- padding-inline: 1rem;
+ padding-inline: 0.8rem;
+ width: min(100% - 1rem);
}
.blog-container .title {
line-height: 25px;
@@ -19,7 +20,7 @@
}
.blog-container .row {
display: grid;
- justify-items: flex-start;
+ /* justify-items: flex-start; */
grid-row-gap: 2rem;
grid-column-gap: 1.5rem;
}
@@ -29,22 +30,28 @@
justify-content: center;
flex: 1 0 auto;
}
-.pagination {
- margin-top: 3rem;
-}
@media screen and (min-width: 768px) {
.row {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
justify-items: center;
- grid-row-gap: 3rem;
+ grid-row-gap: 1.5rem;
+ grid-column-gap: 0.5rem;
+ }
+
+ .blog-container :is(.title, .description) {
+ padding-inline: 0.5rem;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .row {
+ grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+ justify-items: center;
+ grid-column-gap: 1.5rem;
}
}
@media screen and (min-width: 1440px) {
.bloglist-container {
padding: 0 100px;
}
- .bloglist-container .row {
- grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
- justify-items: center;
- }
}
diff --git a/styles/globals.css b/styles/globals.css
index 75c601e..fc3f1d9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -9,7 +9,7 @@
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
text-decoration: none;
--heading1: clamp(0.8rem, 1.5rem + 2.3vw, 2.8rem);
- --heading2: clamp(1rem, 1.4rem + 2.2vw, 2.4rem);
+ --heading2: clamp(1rem, 1.2rem + 2vw, 2.4rem);
--heading3: clamp(1rem, 1rem + 1.4vw, 1.7rem);
--heading4: clamp(1rem, 1rem + 1.2vw, 1.5rem);
--heading5: clamp(1rem, 1rem + 1vw, 1.3rem);
--
libgit2 0.27.0