From c46ae30d5d924bf8d5b3df7878b1b65489ea0ce7 Mon Sep 17 00:00:00 2001 From: Crystal Ngai <“hokei@users.noreply.github.com”> Date: Wed, 3 Mar 2021 13:50:06 -0500 Subject: [PATCH] Details pages styling cleanup --- src/__tests__/unit/SearchPagination.test.jsx | 30 -------------------- src/components/EditionDetail/Edition.tsx | 25 ++++++++++------ src/components/Work/Work.tsx | 4 +-- src/lib/api/SearchApi.ts | 8 ++++-- src/pages/edition/[editionId]/index.tsx | 1 + styles/components/Search.scss | 8 +++++- styles/shared/DefinitionList.scss | 2 -- 7 files changed, 30 insertions(+), 48 deletions(-) delete mode 100644 src/__tests__/unit/SearchPagination.test.jsx diff --git a/src/__tests__/unit/SearchPagination.test.jsx b/src/__tests__/unit/SearchPagination.test.jsx deleted file mode 100644 index 44a1ba37..00000000 --- a/src/__tests__/unit/SearchPagination.test.jsx +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-env mocha */ -import React from "react"; -// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module 'chai' or its corresponding typ... Remove this comment to see the full error message -import { expect } from "chai"; -// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module 'enzyme' or its corresponding t... Remove this comment to see the full error message -import { mount, configure } from "enzyme"; -// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module 'enzyme-adapter-react-16' or it... Remove this comment to see the full error message -import Adapter from "enzyme-adapter-react-16"; -// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../../src/app/components/Searc... Remove this comment to see the full error message -import SearchPagination from "../../src/app/components/SearchResults/SearchPagination"; - -configure({ adapter: new Adapter() }); - -// @ts-expect-error ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message -describe("Search Pagination behavior", () => { - let component: any; - // @ts-expect-error ts-migrate(2304) FIXME: Cannot find name 'before'. - before(() => { - const query = { query: "Chicago", field: "keyword" }; - component = mount(); - }); - - // @ts-expect-error ts-migrate(2582) FIXME: Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message - it("should pass 10 pages into dropdownOptions", () => { - expect( - component.children().prop("paginationDropdownOptions") - ).to.have.length(10); - }); -}); diff --git a/src/components/EditionDetail/Edition.tsx b/src/components/EditionDetail/Edition.tsx index 824d406d..0e250495 100644 --- a/src/components/EditionDetail/Edition.tsx +++ b/src/components/EditionDetail/Edition.tsx @@ -18,6 +18,7 @@ const Edition: React.FC<{ editionResult: EditionResult }> = (props) => { const edition: ApiEdition = props.editionResult.data; const featuredInstance = edition.instances[0]; + console.log("edition", edition); const toggleShowAll = (e: React.ChangeEvent) => { router.push({ @@ -65,19 +66,25 @@ const Edition: React.FC<{ editionResult: EditionResult }> = (props) => {
- - Featured Copy - + {featuredInstance && ( + <> + + Featured Copy + - + + + )}
+
+
{edition.instances && (

= (props) => { }); }; - console.log("showAll", router.query.showAll); - return (
{/* TODO RequestDigital {this.state.requestedEdition && this.getRequestDigital(work)} */} @@ -109,7 +107,7 @@ const WorkDetail: React.FC<{ workResult: WorkResult }> = (props) => { <>Show only items currently available online ), }} - checked={router.query.showAll === "false"} + checked={router.query.showAll !== "true"} onChange={(e) => toggleShowAll(e)} />
diff --git a/src/lib/api/SearchApi.ts b/src/lib/api/SearchApi.ts index d955bd73..b6bafad1 100644 --- a/src/lib/api/SearchApi.ts +++ b/src/lib/api/SearchApi.ts @@ -23,7 +23,7 @@ const defaultWorkQuery: WorkQuery = { const defaultEditionQuery = { editionIdentifier: "", - showAll: "false", + showAll: "true", }; //TODO: Lower Priority: combine SearchQuery and ApiSearchQuery @@ -82,9 +82,11 @@ export const workFetcher = async (query: WorkQuery) => { export const editionFetcher = async (query: EditionQuery) => { const editionApiQuery = { editionIdentifier: query.editionIdentifier, - showAll: query.showAll ? query.showAll : defaultEditionQuery.showAll, + showAll: + typeof query.showAll !== "undefined" + ? query.showAll + : defaultEditionQuery.showAll, }; - const res = await fetch(editionUrl, { method: "POST", headers: { diff --git a/src/pages/edition/[editionId]/index.tsx b/src/pages/edition/[editionId]/index.tsx index 23cb4f14..48c580f8 100644 --- a/src/pages/edition/[editionId]/index.tsx +++ b/src/pages/edition/[editionId]/index.tsx @@ -9,6 +9,7 @@ export async function getServerSideProps(context: any) { //TODO: Default query const editionQuery: EditionQuery = { editionIdentifier: context.query.editionId, + showAll: context.query.showAll, }; const editionResult: EditionResult = await editionFetcher(editionQuery); diff --git a/styles/components/Search.scss b/styles/components/Search.scss index 173bd9a0..1f4b0c26 100644 --- a/styles/components/Search.scss +++ b/styles/components/Search.scss @@ -15,7 +15,7 @@ .search-filter { @include space-stack-xs; border-top: 2px solid var(--section-research-primary); - background-color: var(--ui-gray-light); + background-color: var(--ui-gray-xlight); h2 { @include space-inset-xs; @@ -28,5 +28,11 @@ } .filter-button { + @include space-stack-s; + width: 100% +} + +.content-bottom { + margin: 0 auto; } \ No newline at end of file diff --git a/styles/shared/DefinitionList.scss b/styles/shared/DefinitionList.scss index be7a467c..a50561c5 100644 --- a/styles/shared/DefinitionList.scss +++ b/styles/shared/DefinitionList.scss @@ -28,8 +28,6 @@ dl.nypl-details-table { } border-bottom: 1px solid var(--ui-gray-medium); - - @media (min-width: #{$breakpoint-medium}) { flex-flow: row; flex-wrap: wrap;