From dcda165488f89ebdb7822b5eba05f88da7e4c64a Mon Sep 17 00:00:00 2001
From: danysmall <dany.small.work@gmail.com>
Date: Fri, 14 Oct 2022 15:03:37 +0300
Subject: [PATCH] Sticly footer to the bottom of the page
---
.../ArticleInteractionButtons.tsx | 36 +++++++++++++------
src/components/ArticleSearchResult.tsx | 2 +-
src/components/BaseLayout.tsx | 5 +--
src/components/fetchAnArticle/AnArticle.tsx | 5 ++-
src/core/helpers.ts | 13 +++++--
src/index.tsx | 7 +++-
src/pages/SearchResultsPage.tsx | 2 +-
7 files changed, 51 insertions(+), 19 deletions(-)
diff --git a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
index 410d472..6301918 100755
--- a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
+++ b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
@@ -12,6 +12,7 @@ import {
} from "components/icons";
import classNames from "classnames";
import { Transition } from "@headlessui/react";
+import Link from "components/typography/Link";
const interactionButtonsStore = [
{
@@ -46,6 +47,7 @@ type ArticleButtonProps = {
children?: React.ReactNode;
className?: string;
emphasis?: "high" | "low";
+ articleID?: string,
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
export function ArticleInteractionButtons({
@@ -53,6 +55,7 @@ export function ArticleInteractionButtons({
children,
openAbstract = () => { },
className,
+ articleID,
emphasis = "high", //to change displaying of component
...props
}: ArticleButtonProps) {
@@ -70,18 +73,31 @@ export function ArticleInteractionButtons({
</Button.Icon>
</Button>
);
-
const fileInteractionButtons = interactionButtonsStore.map((button) => {
return (
- <Button
- emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
- className="h-max px-2 mr-2"
- >
- <Button.Icon>
- {React.cloneElement(button.icon, { className: button.iconClassName })}
- </Button.Icon>
- {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
- </Button>
+ button.title === 'Read file' ?
+ <Link
+ to={`/article/content/${articleID}`}>
+ <Button
+ emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
+ className="h-max px-2 mr-2"
+ >
+ <Button.Icon>
+ {React.cloneElement(button.icon, { className: button.iconClassName })}
+ </Button.Icon>
+ {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+ </Button>
+ </Link>
+ :
+ <Button
+ emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
+ className="h-max px-2 mr-2"
+ >
+ <Button.Icon>
+ {React.cloneElement(button.icon, { className: button.iconClassName })}
+ </Button.Icon>
+ {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+ </Button>
);
});
diff --git a/src/components/ArticleSearchResult.tsx b/src/components/ArticleSearchResult.tsx
index bce62e9..c569005 100644
--- a/src/components/ArticleSearchResult.tsx
+++ b/src/components/ArticleSearchResult.tsx
@@ -37,7 +37,7 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
<Article.SubscriptionsButtons />
</div>
- <Article.Title linkTo={`/article/${searchItem.id}`} className="text-2xl">
+ <Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
{searchItem.title}
</Article.Title>
<Article.Authors emphasis="low" className="flex flex-wrap flex-row">
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index 2c143c9..237777d 100755
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -1,3 +1,4 @@
+import { joinClassnames } from "core/helpers";
import React from "react";
import { Footer } from "./parts/Footer";
import Header from "./parts/Header";
@@ -10,10 +11,10 @@ type Props = {
function BaseLayout({ header, footer, children, className }: Props) {
return (
- <div className={className}>
+ <div className={joinClassnames(className, 'flex min-h-screen flex-col justify-between')}>
<Header />
- <main>{children}</main>
+ <main className="flex-1">{children}</main>
<Footer />
</div>
diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
index 240d53c..11c8d26 100644
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -46,7 +46,10 @@ const AnArticle = () => {
<hr></hr>
</div>
- <ArticlePart.Article.InteractionButtons emphasis="high" />
+ <ArticlePart.Article.InteractionButtons
+ emphasis="high"
+ articleID={article?.id}
+ />
{article?.tags && (
<div className="keywords my-10 flex flex-col gap-2">
<Typography
diff --git a/src/core/helpers.ts b/src/core/helpers.ts
index c655cd5..fe40fa8 100755
--- a/src/core/helpers.ts
+++ b/src/core/helpers.ts
@@ -8,10 +8,17 @@ export const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
}
};
-export function capitalization (str: string) {
- return str.substring(0,1).toUpperCase() + str.substring(1);
+export function capitalization(str: string): string {
+ return str.substring(0, 1).toUpperCase() + str.substring(1);
}
-export function formatNumber(num: number) {
+export function formatNumber(num: number): string {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
+}
+
+export function joinClassnames(first?: string, second?: string): string {
+ return [
+ first ?? '',
+ second ?? '',
+ ].join('');
}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index ed9b2e9..7e200b3 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,6 +17,8 @@ import { store } from "store/store";
import { Provider } from "react-redux";
import { SearchResultsPage } from "pages/SearchResultsPage";
import AnArticle from "components/fetchAnArticle/AnArticle";
+import NotFound from "components/fetchAnArticle/NotFound";
+import AnArticleBody from "components/fetchAnArticle/AnArticleBody";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
@@ -33,7 +35,10 @@ root.render(
<Route path="/terms-of-use" element={<TermsOfUse />} />
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
<Route path="/cookies-policy" element={<CookiesPolicy />} />
- <Route path="/article/:id" element={<AnArticle />} />
+ <Route path="/article">
+ <Route path="info/:id" element={<AnArticle />} />
+ <Route path="content/:id" element={<AnArticleBody />} />
+ </Route>
<Route path="/account">
<Route path="settings" element={<AccountSettings />} />
</Route>
diff --git a/src/pages/SearchResultsPage.tsx b/src/pages/SearchResultsPage.tsx
index ca4e486..cca667b 100644
--- a/src/pages/SearchResultsPage.tsx
+++ b/src/pages/SearchResultsPage.tsx
@@ -13,7 +13,7 @@ export const SearchResultsPage = () => {
<SearchSection />
<ColumnLayout>
<ColumnLayout.Left>
- <div className="h-98 bg-blue-200 w-[300px]">left bar</div>
+ <div className="h-98 w-[300px]"></div>
</ColumnLayout.Left>
<ColumnLayout.Main>
<SearchResultSection />