- Advanced Search
+
+
+
+ Scientific Library with Free Access
+
+
+
Search
+
320 455
+
Items
+
+
diff --git a/src/components/SearchResultsSection.tsx b/src/components/SearchResultsSection.tsx
new file mode 100644
index 0000000..ca8fd64
--- /dev/null
+++ b/src/components/SearchResultsSection.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import Typography from "./typography/Typography";
+import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
+import { useSearchViewModel } from "../searchResults/controller/searchResultsViewModel";
+import { ArticleSearchResult } from "./ArticleSearchResult";
+import { Loader } from "./Loader/Loader";
+
+export const SearchResultSection = () => {
+ const store = useSearchStoreImplementation();
+ const { searchResults, isLoading } = useSearchViewModel(store);
+
+ function getResults() {
+ if (searchResults === undefined || searchResults?.data.length === 0) {
+ return (
+
+ Nothing found.
+
+ );
+ } else {
+ const results = searchResults.data.map((searchItem) => (
+
+ ));
+ return results;
+ }
+ }
+
+ return (
+
+
+
+ Search Results
+
+
+ Total results: {searchResults?.meta.total}
+
+
+
+
{ getResults()}
+
+ );
+};
diff --git a/src/components/SearchSection.tsx b/src/components/SearchSection.tsx
new file mode 100644
index 0000000..452b911
--- /dev/null
+++ b/src/components/SearchSection.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { SearchBar } from "./search/SearchBar";
+
+export const SearchSection = ()=>{
+ return (
+
+
+
+
+
+ Advanced Search
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/breadcrumbs.tsx b/src/components/breadcrumbs.tsx
index 152dba5..2b48b74 100755
--- a/src/components/breadcrumbs.tsx
+++ b/src/components/breadcrumbs.tsx
@@ -35,7 +35,7 @@ export default function Breadcrumbs( { divider ,children, className }: Props ) {
for( let i = 0; i < childrenToArray.length; i++ ) {
let dividerComponent = GetDivider( divider )
- LinkAndDivider = LinkAndDivider.concat( childrenToArray[i] ).concat( dividerComponent )
+ LinkAndDivider = LinkAndDivider.concat(
{childrenToArray[i]}
).concat( dividerComponent )
}
LinkAndDivider.pop();
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css
index 6b8e9e3..b23243a 100755
--- a/src/components/layouts/ThreeColumn/ColumnLayout.css
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.css
@@ -1,6 +1,7 @@
.left-bar {
grid-area: lb;
max-width: 300px;
+ overflow: hidden;
}
.main-bar {
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
index 2636db4..663abd0 100755
--- a/src/components/layouts/ThreeColumn/ColumnLayout.tsx
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
@@ -1,20 +1,11 @@
import React, {
- Fragment,
useState,
useRef,
useEffect,
- FC,
- isValidElement,
} from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
-import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
-import { Button } from "components/Button/Button";
-import classNames from "classnames";
import "./ColumnLayout.css";
-import { Children } from "react";
import MainColumn from "./Maincolumn";
-import LeftColumn from "./LeftColumn";
+import LeftColumn, {LeftColumnProps} from "./LeftColumn";
import RightColumn from "./RightColumn";
/* -------------------------------------------------------------------------- */
/* Custom hook to track container width */
@@ -100,10 +91,9 @@ export const ColumnLayout: React.FC
& ColumnExtentions = ({
React.isValidElement(child) &&
React.Children.only(child).type === LeftColumn
) {
- return React.cloneElement(child, {
- openLeftBar: openLeftBar,
- widthElement: widthElement,
- });
+ return React.cloneElement(child as React.ReactElement,
+ { openLeftBar: openLeftBar, widthElement: widthElement },
+ );
} else {
return child;
}
diff --git a/src/components/layouts/ThreeColumn/LeftColumn.tsx b/src/components/layouts/ThreeColumn/LeftColumn.tsx
index c8698c9..3e51ca3 100755
--- a/src/components/layouts/ThreeColumn/LeftColumn.tsx
+++ b/src/components/layouts/ThreeColumn/LeftColumn.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent as FC } from "react";
import { Transition } from "@headlessui/react";
import classNames from "classnames";
-type LeftColumnProps = {
+export type LeftColumnProps = {
children: React.ReactNode;
openLeftBar?: boolean;
widthElement?: number;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index e309823..563d8d6 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -3,8 +3,6 @@ import Inputgroup from "./Inputgroup";
import SearchInput from "./SearchInput";
import { Button } from "components/Button/Button";
import { SVGSearch } from "components/icons";
-import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
-import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
import Link from "components/typography/Link";
@@ -25,7 +23,7 @@ export function SearchBar({ className }: Props) {
return (
//TOdO Need to add dropdown with categories
-
+
{/*
*/}
@@ -37,7 +35,7 @@ export function SearchBar({ className }: Props) {
-
+