Skip to content

[SistentComponents] Fix Hydtration Errors #6287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[SistentComponents] Fix Hydtration Errors #6287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c22a0da
Create separate components for header and section-nav from the select…
falgunmpatel Mar 8, 2025
80a61e8
- Improved nesting of list elements and anchor elements
falgunmpatel Mar 8, 2025
24389de
Merge branch 'master' into fix/hydration-issue-on-sistent-components-…
vishalvivekm Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/HandbookCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { HandbookCardWrapper } from "./HandbookCard.style";
const HandbookCard = ({ title, description, to }) => {
return (
<HandbookCardWrapper>
<Link to={to} class="handbook__card--main">
<Link to={to} className="handbook__card--main">
<div className="handbook__card">
<h1 className="handbook__card--head">{title}</h1>
<div className="handbook__card--line"></div>
Expand All @@ -15,9 +15,9 @@ const HandbookCard = ({ title, description, to }) => {
</p>
{to && (
<div className="handbook__card--lm__container">
<a href={to} className="handbook__card--lm">
<span className="handbook__card--lm">
Read More <HiOutlineChevronRight />
</a>
</span>
</div>
)}
</div>
Expand Down
104 changes: 53 additions & 51 deletions src/components/SistentNavigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,76 +64,78 @@ const TOC = () => {
</li>
<li>
<div>
<li
<div
className="toc-sub-heading identity"
onClick={() => setExpandIdentity((prev) => !prev)}
>
Identity
{expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
</li>
</div>
{expandIdenity && (
<div className="identity-sublinks">
<li>
<Link
to="/projects/sistent/identity/color"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/color"
)
? "active"
: ""
}`}
activeClassName="active"
>
Color
</Link>
</li>
<li>
<Link
to="/projects/sistent/identity/spacing"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/spacing"
)
? "active"
: ""
}`}
activeClassName="active"
>
Spacing
</Link>
</li>
<li>
<Link
to="/projects/sistent/identity/typography"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/typography"
)
? "active"
: ""
}`}
activeClassName="active"
>
Typography
</Link>
</li>
<ul className="toc-ul">
<li>
<Link
to="/projects/sistent/identity/color"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/color"
)
? "active"
: ""
}`}
activeClassName="active"
>
Color
</Link>
</li>
<li>
<Link
to="/projects/sistent/identity/spacing"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/spacing"
)
? "active"
: ""
}`}
activeClassName="active"
>
Spacing
</Link>
</li>
<li>
<Link
to="/projects/sistent/identity/typography"
className={`toc-sub-heading toc-sub-inline identity-item ${
location.pathname.includes(
"/projects/sistent/identity/typography"
)
? "active"
: ""
}`}
activeClassName="active"
>
Typography
</Link>
</li>
</ul>
</div>
)}
</div>
</li>
<li>
<div>
<li
<div
className="toc-sub-heading components"
onClick={() => setExpandComponent((prev) => !prev)}
>
Components
{expandComponent ? <IoIosArrowUp /> : <IoIosArrowDown />}
</li>
</div>
{expandComponent && (
<div className="components-sublinks">
<li>
<ul className="toc-ul">
{sortedComponentArray.map((component) => (
<li key={component.id}>
<Link
Expand All @@ -149,7 +151,7 @@ const TOC = () => {
</Link>
</li>
))}
</li>
</ul>
</div>
)}
</div>
Expand Down
12 changes: 2 additions & 10 deletions src/components/seo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ export const useSiteMetadata = () => {
return data.site.siteMetadata;
};


const SEO = ({ canonical, description,image, schemaMarkup, title,children }) => {
const SEO = ({ canonical, description = "", image = null, schemaMarkup, title, children }) => {
const { pathname } = useLocation();
const { title: defaultTitle, description: defaultDescription, image: siteMetadataImage, siteUrl, twitterUsername } = useSiteMetadata();
const seo = {
Expand Down Expand Up @@ -68,21 +67,14 @@ const SEO = ({ canonical, description,image, schemaMarkup, title,children }) =>
);
};

SEO.defaultProps = {
title: null,
lang: "en",
meta: [],
description: "",
image: null,
};

SEO.propTypes = {
canonical: PropTypes.string,
description: PropTypes.string,
image: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
children: PropTypes.node,
};

export default SEO;
15 changes: 15 additions & 0 deletions src/sections/Projects/Sistent/components/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";

//TODO: Generalise for use in every component
export default function Header() {
return (
<>
<a id="Identity">
<h2>Select</h2>
</a>
<p>
Select component is a dropdown menu for selecting an option from a list.
</p>
</>
);
}
4 changes: 2 additions & 2 deletions src/sections/Projects/Sistent/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ const SistentComponents = () => {
</div>
<div>
<div className="card_bottom">
<a className="learn" href={comp.url}>
<span className="learn">
<div className="learn-more">
<div>Learn more</div>
<div className="icon">
<FaArrowRight />
</div>
</div>
</a>
</span>
</div>
</div>
</div>
Expand Down
39 changes: 39 additions & 0 deletions src/sections/Projects/Sistent/components/section-nav/section-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from "react";
import { useLocation } from "@reach/router";
import { navigate } from "gatsby";
import TabButton from "../../../../../reusecore/Button";

export default function SectionNav() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why this function was added?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was already present inside the select component. Gatsby gave an error for using name exports in the Select Component, therefore I created a different component for it.

Also it is a reusable component and can be used in all other sistent components, once it is generalized.

const location = useLocation();
return (
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/select"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select")}
title="Overview"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/selet/guidance"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select/guidance")}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/select/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select/code")}
title="Code"
/>
</div>
);
}
3 changes: 2 additions & 1 deletion src/sections/Projects/Sistent/components/select/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {
OutlinedInput,
Select,
} from "@mui/material";
import { Header, SectionNav } from ".";
import Header from "../header/header";
import SectionNav from "../section-nav/section-nav";

const codes = {
"variant-outlined": `<Select>
Expand Down
3 changes: 2 additions & 1 deletion src/sections/Projects/Sistent/components/select/guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import {
OutlinedInput,
} from "@mui/material";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import { Header, SectionNav } from ".";
import Header from "../header/header";
import SectionNav from "../section-nav/section-nav";
const SelectGuidance = () => {
const { isDark } = useStyledDarkMode();
const [selectedAge, setSelectedAge] = React.useState("");
Expand Down
53 changes: 2 additions & 51 deletions src/sections/Projects/Sistent/components/select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ import React from "react";
import { SistentThemeProvider } from "@layer5/sistent";
import { SistentLayout } from "../../sistent-layout";
import { Row } from "../../../../../reusecore/Layout";
import { useLocation } from "@reach/router";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import { navigate } from "gatsby";
import TabButton from "../../../../../reusecore/Button";
import {
FormControl,
InputLabel,
MenuItem,
Select,
OutlinedInput,
} from "@mui/material";
import Header from "../header/header";
import SectionNav from "../section-nav/section-nav";

const SistentSelect = () => {
const { isDark } = useStyledDarkMode();
Expand Down Expand Up @@ -224,52 +223,4 @@ const SistentSelect = () => {
);
};

export function SectionNav() {
const location = useLocation();
return (
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/select"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select")}
title="Overview"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/selet/guidance"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select/guidance")}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/select/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/select/code")}
title="Code"
/>
</div>
);
}

export function Header() {
return (
<>
<a id="Identity">
<h2>Select</h2>
</a>
<p>
Select component is a dropdown menu for selecting an option from a list.
</p>
</>
);
}

export default SistentSelect;
Loading