Merge pull request #1514 from ecency/bugfix/decks-voting

Deck voting, draft community title

src/common/components/comment/__snapshots__/index.spec.tsx.snap

@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-35bbe1bc-68ce-4a67-8a76-3610577db198"
+      id="editor-tool-emoji-picker-11135353-f094-48d5-8498-99120b0b2423"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-cc753785-8754-4778-b5a7-577ef5607916"
+      id="editor-tool-emoji-picker-41abb59c-8fb5-40fd-9dbb-e46f8bdead90"
       role="none"
       title="Emoji"
     >

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);

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) {

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<HTMLDivElement | null>(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);

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"
       />
       <div
         ref={columnsRef}

src/common/components/drafts/draft-list-item.tsx

@@ -13,6 +13,7 @@ import { useMappedStore } from "../../store/use-mapped-store";
 import { Badge } from "@ui/badge";
 import { Button } from "@ui/button";
 import { classNameObject } from "../../helper/class-name-object";
+import { useCommunityCache } from "../../core";
 
 interface Props {
   history: History;
@@ -39,6 +40,8 @@ export function DraftListItem({ history, draft, editFn, deleteFn, cloneFn }: Pro
   const img = catchPostImage(draft.body, 600, 500, global.canUseWebp ? "webp" : "match") || noImage;
   const summary = postBodySummary(draft.body, 200);
 
+  const { data: community } = useCommunityCache(tag);
+
   const dateRelative = useMemo(() => dateToFullRelative(draft.created), [draft]);
   const dateFormatted = useMemo(() => dateToFormatted(draft.created), [draft]);
 
@@ -52,7 +55,7 @@ export function DraftListItem({ history, draft, editFn, deleteFn, cloneFn }: Pro
             <div className="text-gray-600 pl-1">({accountReputation(reputation)})</div>
           </div>
         </div>
-        <Badge>{tag}</Badge>
+        <Badge>{community?.title ?? tag}</Badge>
         <div className="text-sm text-gray-600" title={dateFormatted}>
           {dateRelative}
         </div>

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(<Drafts {...props} />);
+  const component = await withStore(
+    <QueryClientProvider client={queryClient}>
+      <Drafts {...props} />
+    </QueryClientProvider>
+  );
   await allOver();
   expect(component.toJSON()).toMatchSnapshot();
 });
@@ -98,7 +103,11 @@ it("(2) Test with data.", async () => {
     onPick: () => {}
   };
 
-  const component = withStore(<Drafts {...props} />);
+  const component = withStore(
+    <QueryClientProvider client={queryClient}>
+      <Drafts {...props} />
+    </QueryClientProvider>
+  );
   await allOver();
   expect(component.toJSON()).toMatchSnapshot();
 });

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";
 

src/common/features/ui/alert/styles.ts

@@ -1,7 +1,8 @@
 import { Appearance } from "./types";
 
 export const ALERT_STYLES: Record<Appearance, string> = {
-  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",

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<HTMLProps<HTMLDivElement>, "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<HTMLProps<HTMLDivElement>, "size"> & Props) {
     }
   }, [show]);
 
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      setShow(false);
+    }
+  };
+
   return (
     <ModalContext.Provider value={{ show, setShow }}>
       {show &&