From 8dac8876924b5087caeb8f3692d2d05ac0e4ad92 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 14 Nov 2023 22:25:29 +0600 Subject: [PATCH 1/3] Fixed some theme issues with Decks, community namings in draft list --- .../components/decks/_deck-floating-manager.scss | 1 - src/common/components/decks/deck-floating-manager.tsx | 2 +- src/common/components/drafts/draft-list-item.tsx | 5 ++++- src/common/core/caches/communities-cache.ts | 2 +- src/common/features/ui/alert/styles.ts | 3 ++- src/common/features/ui/modal/index.tsx | 11 +++++++++++ 6 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/common/components/decks/_deck-floating-manager.scss b/src/common/components/decks/_deck-floating-manager.scss index a943047a5df..3484edcd1c2 100644 --- a/src/common/components/decks/_deck-floating-manager.scss +++ b/src/common/components/decks/_deck-floating-manager.scss @@ -170,7 +170,6 @@ button:not(.dropdown-toggle) { white-space: nowrap; - margin-right: 1rem; @include media-breakpoint-down(sm) { width: calc(100% - 2rem); diff --git a/src/common/components/decks/deck-floating-manager.tsx b/src/common/components/decks/deck-floating-manager.tsx index 2aa15557091..91f6fa6013c 100644 --- a/src/common/components/decks/deck-floating-manager.tsx +++ b/src/common/components/decks/deck-floating-manager.tsx @@ -40,7 +40,7 @@ export const DeckFloatingManager = () => { setMobileOffset(resultInPercentage); }} icon={upArrowSvg} - iconClassName="ml-2" + iconClassName="mx-3" />
dateToFullRelative(draft.created), [draft]); const dateFormatted = useMemo(() => dateToFormatted(draft.created), [draft]); @@ -52,7 +55,7 @@ export function DraftListItem({ history, draft, editFn, deleteFn, cloneFn }: Pro
({accountReputation(reputation)})
- {tag} + {community?.title ?? tag}
{dateRelative}
diff --git a/src/common/core/caches/communities-cache.ts b/src/common/core/caches/communities-cache.ts index f36e18796a5..41fcdc749f0 100644 --- a/src/common/core/caches/communities-cache.ts +++ b/src/common/core/caches/communities-cache.ts @@ -1,7 +1,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { QueryIdentifiers } from "../react-query"; import * as bridgeApi from "../../api/bridge"; -import { Community } from "../../store/communities/types"; +import { Community } from "../../store/communities"; import isCommunity from "../../helper/is-community"; import { useEffect } from "react"; diff --git a/src/common/features/ui/alert/styles.ts b/src/common/features/ui/alert/styles.ts index d6739c84294..4af12bb442a 100644 --- a/src/common/features/ui/alert/styles.ts +++ b/src/common/features/ui/alert/styles.ts @@ -1,7 +1,8 @@ import { Appearance } from "./types"; export const ALERT_STYLES: Record = { - primary: "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky", + primary: + "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky dark:bg-dark-400 dark:border-dark-300 dark:text-white", secondary: "bg-gray-100 border border-gray-200 text-gray-600", success: "bg-green-040 border border-green-030 text-green", warning: "bg-warning-040 border border-warning-030 text-warning-default", diff --git a/src/common/features/ui/modal/index.tsx b/src/common/features/ui/modal/index.tsx index 44483c663d4..e8bc7723391 100644 --- a/src/common/features/ui/modal/index.tsx +++ b/src/common/features/ui/modal/index.tsx @@ -2,6 +2,8 @@ import { createPortal } from "react-dom"; import React, { createContext, HTMLProps, useEffect, useState } from "react"; import { classNameObject } from "../../../helper/class-name-object"; import { useFilteredProps } from "../../../util/props-filter"; +import useMount from "react-use/lib/useMount"; +import useUnmount from "react-use/lib/useUnmount"; interface Props { show: boolean; @@ -32,6 +34,9 @@ export function Modal(props: Omit, "size"> & Props) { "dialogClassName" ]); + useMount(() => document.addEventListener("keyup", onKeyUp)); + useUnmount(() => document.removeEventListener("keyup", onKeyUp)); + useEffect(() => { setShow(props.show); }, [props.show]); @@ -44,6 +49,12 @@ export function Modal(props: Omit, "size"> & Props) { } }, [show]); + const onKeyUp = (e: KeyboardEvent) => { + if (e.key === "Escape") { + setShow(false); + } + }; + return ( {show && From e1c78377442f3322f406af0c7997b3951e2a574c Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 14 Nov 2023 22:33:52 +0600 Subject: [PATCH 2/3] Fixed decks posts voting --- .../decks/columns/add-column/_deck-add-column.scss | 4 ++-- .../decks/columns/deck-items/deck-search-list-item.tsx | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/common/components/decks/columns/add-column/_deck-add-column.scss b/src/common/components/decks/columns/add-column/_deck-add-column.scss index f6544a6ae6b..358329eacf6 100644 --- a/src/common/components/decks/columns/add-column/_deck-add-column.scss +++ b/src/common/components/decks/columns/add-column/_deck-add-column.scss @@ -191,7 +191,7 @@ @apply bg-blue-duck-egg; .click-to-change { - color: $primary; + @apply text-blue-dark-sky; } } @@ -211,7 +211,7 @@ @include padding(1rem); @include border-radius(1rem); - @apply bg-blue-duck-egg; + @apply bg-blue-duck-egg dark:bg-gray-800; } @include themify(night) { diff --git a/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx b/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx index d6b4604528b..43f754e300a 100644 --- a/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx +++ b/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx @@ -17,7 +17,7 @@ import { transformMarkedContent } from "../../../../util/transform-marked-conten import { EntryLink } from "../../../entry-link"; import { useInViewport } from "react-in-viewport"; import { commentSvg, voteSvg } from "../../icons"; -import { EntriesCacheContext } from "../../../../core"; +import { EntriesCacheContext, useEntryCache } from "../../../../core"; export interface SearchItemProps { avatar: string; @@ -50,7 +50,7 @@ export const SearchListItem = ({ index, url, category, - entry, + entry: initialEntry, onMounted, onEntryView, marked, @@ -60,6 +60,7 @@ export const SearchListItem = ({ const ref = useRef(null); const { inViewport } = useInViewport(ref); const { updateVotes } = useContext(EntriesCacheContext); + const { data: entry } = useEntryCache(initialEntry); const [title, setTitle] = useState(entry.title); const [body, setBody] = useState(entry.b); From ad8278c2be315309e89bb8457a72e149e6998c4d Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 14 Nov 2023 22:39:17 +0600 Subject: [PATCH 3/3] Fixed tests --- .../comment/__snapshots__/index.spec.tsx.snap | 4 ++-- src/common/components/drafts/index.spec.tsx | 21 +++++++++++++------ 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap index eb3cc57f44e..adf3668fa93 100644 --- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap @@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
diff --git a/src/common/components/drafts/index.spec.tsx b/src/common/components/drafts/index.spec.tsx index 99f2f7c3e5c..8ec116684cd 100644 --- a/src/common/components/drafts/index.spec.tsx +++ b/src/common/components/drafts/index.spec.tsx @@ -1,18 +1,19 @@ import * as React from "react"; -import renderer from "react-test-renderer"; import { createBrowserHistory, createLocation } from "history"; import { Drafts } from "./index"; import { - globalInstance, activeUserInstance, - fullAccountInstance, + allOver, communityInstance1, - allOver + fullAccountInstance, + globalInstance } from "../../helper/test-helper"; import { withStore } from "../../tests/with-store"; +import { queryClient } from "../../core"; +import { QueryClientProvider } from "@tanstack/react-query"; let TEST_MODE = 0; @@ -81,7 +82,11 @@ it("(1) Default render.", async () => { onPick: () => {} }; - const component = await withStore(); + const component = await withStore( + + + + ); await allOver(); expect(component.toJSON()).toMatchSnapshot(); }); @@ -98,7 +103,11 @@ it("(2) Test with data.", async () => { onPick: () => {} }; - const component = withStore(); + const component = withStore( + + + + ); await allOver(); expect(component.toJSON()).toMatchSnapshot(); });