Skip to content

Commit 4f3c77c

Browse files
synzensynzen
committed
Refactor previewer to messagebuilder
1 parent 7041ecd commit 4f3c77c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+236
-236
lines changed

‎services/backend-api/client/src/components/InputWithInsertPlaceholder/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
FormHelperText,
1111
} from "@chakra-ui/react";
1212
import { AddIcon } from "@chakra-ui/icons";
13-
import { InsertPlaceholderDialog } from "../../pages/Previewer/InsertPlaceholderDialog";
13+
import { InsertPlaceholderDialog } from "../../pages/MessageBuilder/InsertPlaceholderDialog";
1414

1515
interface Props {
1616
value: string;

services/backend-api/client/src/components/PreviewerTour/index.tsx renamed to services/backend-api/client/src/components/MessageBuilderTour/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
import { motion } from "framer-motion";
2121
import { FaArrowRight, FaArrowLeft, FaTimes } from "react-icons/fa";
2222
import { FaScrewdriverWrench } from "react-icons/fa6";
23-
import { useIsPreviewerMobile } from "../../hooks";
23+
import { useIsMessageBuilderMobile } from "../../hooks";
2424

2525
export const TOUR_STORAGE_KEY = "message-builder-tour-completed";
2626

@@ -428,17 +428,17 @@ const TourTooltip: React.FC<TourTooltipProps> = ({
428428
);
429429
};
430430

431-
interface PreviewerTourProps {
431+
interface MessageBuilderTourProps {
432432
onComplete?: () => void;
433433
resetTrigger?: number;
434434
}
435435

436-
export const PreviewerTour: React.FC<PreviewerTourProps> = ({ onComplete, resetTrigger }) => {
436+
export const MessageBuilderTour: React.FC<MessageBuilderTourProps> = ({ onComplete, resetTrigger }) => {
437437
const [tourState, setTourState] = useState<TourState | null>(null);
438438
const [isActive, setIsActive] = useState(false);
439439
const [isTransitioning, setIsTransitioning] = useState(false);
440440
const { isOpen, onOpen, onClose } = useDisclosure();
441-
const isMobile = useIsPreviewerMobile();
441+
const isMobile = useIsMessageBuilderMobile();
442442

443443
// Check if user has completed the tour
444444
const hasCompletedTour = useCallback(() => {
@@ -761,4 +761,4 @@ export const PreviewerTour: React.FC<PreviewerTourProps> = ({ onComplete, resetT
761761
);
762762
};
763763

764-
export default PreviewerTour;
764+
export default MessageBuilderTour;

‎services/backend-api/client/src/hooks/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export * from "./useDebounce";
22
export * from "./useLogin";
33
export * from "./useIsFeatureAllowed";
4-
export * from "./usePreviewerTour";
4+
export * from "./useMessageBuilderTour";
55
export * from "./useResponsive";

services/backend-api/client/src/hooks/usePreviewerTour.ts renamed to services/backend-api/client/src/hooks/useMessageBuilderTour.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
22

33
const TOUR_STORAGE_KEY = "previewer-tour-completed";
44

5-
export const usePreviewerTour = () => {
5+
export const useMessageBuilderTour = () => {
66
const [resetTrigger, setResetTrigger] = useState(0);
77

88
const hasCompletedTour = useCallback(() => {

‎services/backend-api/client/src/hooks/useResponsive.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { useBreakpointValue } from "@chakra-ui/react";
2-
import { MESSAGE_BUILDER_MOBILE_BREAKPOINT } from "../pages/Previewer/constants/MessageBuilderMobileBreakpoint";
2+
import { MESSAGE_BUILDER_MOBILE_BREAKPOINT } from "../pages/MessageBuilder/constants/MessageBuilderMobileBreakpoint";
33

44
/**
5-
* Hook to determine if the current viewport is desktop size for the previewer component
6-
* Uses the [MESSAGE_BUILDER_MOBILE_BREAKPOINT] breakpoint (1024px) which is when the previewer switches to desktop layout
5+
* Hook to determine if the current viewport is desktop size for the message builder component
6+
* Uses the [MESSAGE_BUILDER_MOBILE_BREAKPOINT] breakpoint (1024px) which is when the message builder switches to desktop layout
77
* @returns boolean - true if desktop (lg breakpoint or larger), false otherwise
88
*/
9-
export const useIsPreviewerDesktop = () => {
9+
export const useIsMessageBuilderDesktop = () => {
1010
return useBreakpointValue({ base: false, [MESSAGE_BUILDER_MOBILE_BREAKPOINT]: true }) ?? false;
1111
};
1212

1313
/**
14-
* Hook to determine if the current viewport is mobile/tablet size for the previewer component
15-
* Uses the lg breakpoint (1024px) which is when the previewer switches layouts
14+
* Hook to determine if the current viewport is mobile/tablet size for the message builder component
15+
* Uses the lg breakpoint (1024px) which is when the message builder switches layouts
1616
* @returns boolean - true if mobile/tablet (below lg breakpoint), false otherwise
1717
*/
18-
export const useIsPreviewerMobile = () => {
18+
export const useIsMessageBuilderMobile = () => {
1919
return useBreakpointValue({ base: true, [MESSAGE_BUILDER_MOBILE_BREAKPOINT]: false }) ?? true;
2020
};

services/backend-api/client/src/pages/Previewer.tsx renamed to services/backend-api/client/src/pages/MessageBuilder.tsx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@ import { useFormContext } from "react-hook-form";
3939
import { useParams, Link as RouterLink, useNavigate } from "react-router-dom";
4040
import { useTranslation } from "react-i18next";
4141
import { FaRightFromBracket } from "react-icons/fa6";
42-
import { DiscordMessagePreview } from "./Previewer/DiscordMessagePreview";
43-
import { ComponentPropertiesPanel } from "./Previewer/ComponentPropertiesPanel";
44-
import { ComponentTreeItem } from "./Previewer/ComponentTreeItem";
45-
import { ComponentTreeToolbar } from "./Previewer/ComponentTreeToolbar";
42+
import { DiscordMessagePreview } from "./MessageBuilder/DiscordMessagePreview";
43+
import { ComponentPropertiesPanel } from "./MessageBuilder/ComponentPropertiesPanel";
44+
import { ComponentTreeItem } from "./MessageBuilder/ComponentTreeItem";
45+
import { ComponentTreeToolbar } from "./MessageBuilder/ComponentTreeToolbar";
4646
import { NavigableTreeItem } from "../components/NavigableTree";
4747
import { NavigableTreeContext, NavigableTreeProvider } from "../contexts/NavigableTreeContext";
48-
import { PreviewerProvider, usePreviewerContext } from "./Previewer/PreviewerContext";
49-
import { ProblemsSection } from "./Previewer/ProblemsSection";
50-
import { ProblemsDialog } from "./Previewer/ProblemsDialog";
51-
import extractPreviewerProblems from "./Previewer/utils/extractPreviewerProblems";
48+
import { MessageBuilderProvider, useMessageBuilderContext } from "./MessageBuilder/MessageBuilderContext";
49+
import { ProblemsSection } from "./MessageBuilder/ProblemsSection";
50+
import { ProblemsDialog } from "./MessageBuilder/ProblemsDialog";
51+
import extractMessageBuilderProblems from "./MessageBuilder/utils/extractMessageBuilderProblems";
5252
import RouteParams from "../types/RouteParams";
5353
import { Loading } from "../components";
5454
import { SearchFeedsModal } from "../components/SearchFeedsModal";
@@ -60,20 +60,20 @@ import {
6060
useUserFeedConnectionContext,
6161
} from "../contexts/UserFeedConnectionContext";
6262
import { FeedConnectionType } from "../types";
63-
import PreviewerFormState from "./Previewer/types/PreviewerFormState";
63+
import MessageBuilderFormState from "./MessageBuilder/types/MessageBuilderFormState";
6464
import { useUpdateDiscordChannelConnection } from "../features/feedConnections";
6565
import {
6666
PageAlertContextOutlet,
6767
PageAlertProvider,
6868
usePageAlertContext,
6969
} from "../contexts/PageAlertContext";
70-
import { ComponentType } from "./Previewer/types";
71-
import convertPreviewerStateToConnectionUpdate from "./Previewer/utils/convertPreviewerStateToConnectionUpdate";
70+
import { ComponentType } from "./MessageBuilder/types";
71+
import convertMessageBuilderStateToConnectionUpdate from "./MessageBuilder/utils/convertMessageBuilderStateToConnectionUpdate";
7272
import { pages } from "../constants";
7373
import { UserFeedTabSearchParam } from "../constants/userFeedTabSearchParam";
74-
import { PreviewerTour } from "../components/PreviewerTour";
75-
import { usePreviewerTour, useIsPreviewerDesktop } from "../hooks";
76-
import { MESSAGE_BUILDER_MOBILE_BREAKPOINT } from "./Previewer/constants/MessageBuilderMobileBreakpoint";
74+
import { MessageBuilderTour } from "../components/MessageBuilderTour";
75+
import { useMessageBuilderTour, useIsMessageBuilderDesktop } from "../hooks";
76+
import { MESSAGE_BUILDER_MOBILE_BREAKPOINT } from "./MessageBuilder/constants/MessageBuilderMobileBreakpoint";
7777

7878
const SIDE_PANEL_WIDTH = {
7979
base: "350px",
@@ -85,9 +85,9 @@ const CENTER_PANEL_WIDTH = {
8585
"2xl": `calc(min(100vw - ${500 * 2}px, 100%))`,
8686
};
8787

88-
const PreviewerContent: React.FC = () => {
89-
const { resetMessage } = usePreviewerContext();
90-
const { watch, handleSubmit, formState } = useFormContext<PreviewerFormState>();
88+
const MessageBuilderContent: React.FC = () => {
89+
const { resetMessage } = useMessageBuilderContext();
90+
const { watch, handleSubmit, formState } = useFormContext<MessageBuilderFormState>();
9191
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
9292
const [isProblemsCollapsed, setIsProblemsCollapsed] = useState(false);
9393
const messageComponent = watch("messageComponent");
@@ -104,16 +104,16 @@ const PreviewerContent: React.FC = () => {
104104
useUpdateDiscordChannelConnection();
105105
const { createSuccessAlert, createErrorAlert } = usePageAlertContext();
106106
const { userFeed, connection } = useUserFeedConnectionContext();
107-
const { resetTour, resetTrigger } = usePreviewerTour();
108-
const isDesktop = useIsPreviewerDesktop();
107+
const { resetTour, resetTrigger } = useMessageBuilderTour();
108+
const isDesktop = useIsMessageBuilderDesktop();
109109

110110
// Header hooks
111111
const { data: discordBotData, status: botStatus, error: botError } = useDiscordBot();
112112
const { data: discordUserMe } = useDiscordUserMe();
113113
const { t } = useTranslation();
114114
const navigate = useNavigate();
115115

116-
const problems = extractPreviewerProblems(formState.errors.messageComponent, messageComponent);
116+
const problems = extractMessageBuilderProblems(formState.errors.messageComponent, messageComponent);
117117
const componentIdsWithProblems = new Set(problems.map((p) => p.componentId));
118118

119119
// If the user attempts to close the tab with unsaved changes, ask for confirmation
@@ -144,7 +144,7 @@ const PreviewerContent: React.FC = () => {
144144
}
145145

146146
try {
147-
const connectionDetails = convertPreviewerStateToConnectionUpdate(data.messageComponent);
147+
const connectionDetails = convertMessageBuilderStateToConnectionUpdate(data.messageComponent);
148148

149149
await updateConnection({
150150
feedId,
@@ -605,15 +605,15 @@ const PreviewerContent: React.FC = () => {
605605
onClickComponentPath={handlePathClick}
606606
/>
607607
{/* Tour Component */}
608-
<PreviewerTour resetTrigger={resetTrigger} />
608+
<MessageBuilderTour resetTrigger={resetTrigger} />
609609
</Box>
610610
);
611611
}}
612612
</NavigableTreeContext.Consumer>
613613
);
614614
};
615615

616-
export const Previewer: React.FC = () => {
616+
export const MessageBuilder: React.FC = () => {
617617
const { feedId, connectionId } = useParams<RouteParams>();
618618

619619
return (
@@ -629,9 +629,9 @@ export const Previewer: React.FC = () => {
629629
<UserFeedConnectionProvider feedId={feedId} connectionId={connectionId}>
630630
<NavigableTreeProvider>
631631
<PageAlertProvider>
632-
<PreviewerProvider>
633-
<PreviewerContent />
634-
</PreviewerProvider>
632+
<MessageBuilderProvider>
633+
<MessageBuilderContent />
634+
</MessageBuilderProvider>
635635
</PageAlertProvider>
636636
</NavigableTreeProvider>
637637
</UserFeedConnectionProvider>

services/backend-api/client/src/pages/Previewer/AddComponentButton.tsx renamed to services/backend-api/client/src/pages/MessageBuilder/AddComponentButton.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import { AddIcon } from "@chakra-ui/icons";
1313
import type { Component } from "./types";
1414
import { ComponentType } from "./types";
15-
import getPreviewerComponentLabel from "./utils/getPreviewerComponentLabel";
15+
import getMessageBuilderComponentLabel from "./utils/getMessageBuilderComponentLabel";
1616

1717
interface AddComponentButtonProps {
1818
component: Component;
@@ -32,7 +32,7 @@ export const AddComponentButton: React.FC<AddComponentButtonProps> = ({
3232
<Tooltip
3333
label={
3434
canHaveChildren
35-
? `Add new component under ${getPreviewerComponentLabel(component.type)}`
35+
? `Add new component under ${getMessageBuilderComponentLabel(component.type)}`
3636
: "This component can't have any subcomponents."
3737
}
3838
>
@@ -44,7 +44,7 @@ export const AddComponentButton: React.FC<AddComponentButtonProps> = ({
4444
data-tour-target="add-component-button"
4545
variant="solid"
4646
colorScheme="twitter"
47-
aria-label={`Add new component under ${getPreviewerComponentLabel(component.type)}`}
47+
aria-label={`Add new component under ${getMessageBuilderComponentLabel(component.type)}`}
4848
onClick={canHaveChildren ? undefined : (e) => e.preventDefault()}
4949
{...buttonProps}
5050
>
@@ -64,12 +64,12 @@ export const AddComponentButton: React.FC<AddComponentButtonProps> = ({
6464
onClick={() => onAddChild(ComponentType.LegacyText)}
6565
isDisabled={component.children?.some((c) => c.type === ComponentType.LegacyText)}
6666
>
67-
Add {getPreviewerComponentLabel(ComponentType.LegacyText)}
67+
Add {getMessageBuilderComponentLabel(ComponentType.LegacyText)}
6868
</MenuItem>
6969
</MenuGroup>
7070
<MenuDivider />
7171
<MenuGroup
72-
title={`${getPreviewerComponentLabel(ComponentType.LegacyEmbedContainer)} (${
72+
title={`${getMessageBuilderComponentLabel(ComponentType.LegacyEmbedContainer)} (${
7373
component.children?.filter((c) => c.type === ComponentType.LegacyEmbedContainer)
7474
.length || 0
7575
}/1)`}
@@ -81,7 +81,7 @@ export const AddComponentButton: React.FC<AddComponentButtonProps> = ({
8181
(c) => c.type === ComponentType.LegacyEmbedContainer
8282
)}
8383
>
84-
Add {getPreviewerComponentLabel(ComponentType.LegacyEmbedContainer)}
84+
Add {getMessageBuilderComponentLabel(ComponentType.LegacyEmbedContainer)}
8585
</MenuItem>
8686
</MenuGroup>
8787
<MenuDivider />
@@ -99,7 +99,7 @@ export const AddComponentButton: React.FC<AddComponentButtonProps> = ({
9999
.length || 0) >= 5
100100
}
101101
>
102-
Add {getPreviewerComponentLabel(ComponentType.LegacyActionRow)}
102+
Add {getMessageBuilderComponentLabel(ComponentType.LegacyActionRow)}
103103
</MenuItem>
104104
</MenuGroup>
105105
</>

services/backend-api/client/src/pages/Previewer/ArticlePreviewBanner.tsx renamed to services/backend-api/client/src/pages/MessageBuilder/ArticlePreviewBanner.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ import {
1313
import { InfoIcon, RepeatIcon, WarningIcon } from "@chakra-ui/icons";
1414
import { FaRss, FaDiscord } from "react-icons/fa";
1515
import { useFormContext } from "react-hook-form";
16-
import { usePreviewerContext } from "./PreviewerContext";
16+
import { useMessageBuilderContext } from "./MessageBuilderContext";
1717
import { ArticleSelectionDialog } from "./ArticleSelectionDialog";
1818
import { SendTestArticleContext } from "../../contexts";
1919
import { useUserFeedConnectionContext } from "../../contexts/UserFeedConnectionContext";
2020
import { useUserFeedContext } from "../../contexts/UserFeedContext";
2121
import { CreateDiscordChannelConnectionPreviewInput } from "../../features/feedConnections/api";
2222
import { usePageAlertContext } from "../../contexts/PageAlertContext";
23-
import PreviewerFormState from "./types/PreviewerFormState";
23+
import MessageBuilderFormState from "./types/MessageBuilderFormState";
2424
import { FeedDiscordChannelConnection } from "../../types";
25-
import convertPreviewerStateToConnectionPreviewInput from "./utils/convertPreviewerStateToConnectionPreviewInput";
25+
import convertMessageBuilderStateToConnectionPreviewInput from "./utils/convertMessageBuilderStateToConnectionPreviewInput";
2626

2727
export const ArticlePreviewBanner: React.FC = () => {
2828
const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -37,13 +37,13 @@ export const ArticlePreviewBanner: React.FC = () => {
3737
currentArticle,
3838
hasNoArticles,
3939
isFetchingDifferentArticle,
40-
} = usePreviewerContext();
40+
} = useMessageBuilderContext();
4141

4242
const { userFeed } = useUserFeedContext();
4343
const { connection } = useUserFeedConnectionContext<FeedDiscordChannelConnection>();
4444
const { isFetching: isSendingTestArticle, sendTestArticle } = useContext(SendTestArticleContext);
4545
const { createErrorAlert, createInfoAlert, createSuccessAlert } = usePageAlertContext();
46-
const { getValues } = useFormContext<PreviewerFormState>();
46+
const { getValues } = useFormContext<MessageBuilderFormState>();
4747

4848
const handleSendToDiscord = async () => {
4949
if (isSendingTestArticle || !currentArticleId || !currentArticle) {
@@ -52,7 +52,7 @@ export const ArticlePreviewBanner: React.FC = () => {
5252

5353
try {
5454
const formState = getValues();
55-
const messageComponentData = convertPreviewerStateToConnectionPreviewInput(
55+
const messageComponentData = convertMessageBuilderStateToConnectionPreviewInput(
5656
userFeed,
5757
connection,
5858
formState.messageComponent

services/backend-api/client/src/pages/Previewer/ArticleSelectionDialog.tsx renamed to services/backend-api/client/src/pages/MessageBuilder/ArticleSelectionDialog.tsx

File renamed without changes.

0 commit comments

Comments
 (0)