Re-arrange FAQ items

Author: Rajat

apps/web/app/(with-contexts)/dashboard/page/[id]/page.tsx

@@ -44,7 +44,7 @@ export default function Page(props: { params: Promise<{ id: string }> }) {
                 siteinfo: siteInfo,
                 address: address,
                 profile: profile as Profile,
-                auth: profile.email
+                auth: profile!.email
                     ? {
                           guest: false,
                           checked: true,

packages/page-blocks/src/blocks/faq/admin-widget/index.tsx

@@ -14,7 +14,11 @@ import {
     CssIdField,
     MaxWidthSelector,
     VerticalPaddingSelector,
+    DragAndDrop,
+    IconButton,
 } from "@courselit/components-library";
+import { Edit } from "@courselit/icons";
+import { generateUniqueId } from "@courselit/utils";
 
 export interface AdminWidgetProps {
     settings: Settings;
@@ -39,7 +43,7 @@ export default function AdminWidget({
     hideActionButtons,
     preservedStateAcrossRerender,
     theme,
-}: AdminWidgetProps): JSX.Element {
+}: AdminWidgetProps) {
     const dummyDescription: Record<string, unknown> = {
         type: "doc",
         content: [
@@ -82,7 +86,8 @@ export default function AdminWidget({
     const [headerAlignment, setHeaderAlignment] = useState<Alignment>(
         settings.headerAlignment || "center",
     );
-    const [itemBeingEditedIndex, setItemBeingEditedIndex] = useState(-1);
+    const [itemBeingEditedIndex, setItemBeingEditedIndex] =
+        useState<number>(-1);
     const [maxWidth, setMaxWidth] = useState<
         ThemeStyle["structure"]["page"]["width"]
     >(settings.maxWidth);
@@ -100,6 +105,7 @@ export default function AdminWidget({
             maxWidth,
             verticalPadding,
             cssId,
+            itemBeingEditedIndex,
         });
 
     useEffect(() => {
@@ -112,6 +118,7 @@ export default function AdminWidget({
         maxWidth,
         verticalPadding,
         cssId,
+        itemBeingEditedIndex,
     ]);
 
     const onItemChange = (newItemData: Item) => {
@@ -179,21 +186,36 @@ export default function AdminWidget({
                 </Form>
             </AdminWidgetPanel>
             <AdminWidgetPanel title="Items" value="items">
-                <ul className="flex flex-col gap-2">
-                    {items.map((item: Item, index: number) => (
-                        <li
-                            key={item.title}
-                            onClick={() => {
-                                hideActionButtons(true, {
-                                    selectedItem: index,
-                                });
-                            }}
-                            className="p-1 border border-transparent hover:border-slate-300 rounded"
-                        >
-                            {item.title}
-                        </li>
-                    ))}
-                </ul>
+                <DragAndDrop
+                    items={items.map((item: Item) => ({
+                        item,
+                        id: generateUniqueId(),
+                    }))}
+                    Renderer={({ item }) => (
+                        <div className="flex justify-between items-center w-full">
+                            <p>{item.title}</p>
+                            <IconButton
+                                variant="soft"
+                                onClick={() => {
+                                    hideActionButtons(true, {
+                                        selectedItem: items.findIndex(
+                                            (i) => i.title === item.title,
+                                        ),
+                                    });
+                                }}
+                            >
+                                <Edit />
+                            </IconButton>
+                        </div>
+                    )}
+                    onChange={(newItems: { item: Item }[]) => {
+                        const itemsInNewOrder: Item[] = [];
+                        for (const item of newItems) {
+                            itemsInNewOrder.push(Object.assign({}, item.item));
+                        }
+                        setItems(itemsInNewOrder);
+                    }}
+                />
                 <div>
                     <Button component="button" onClick={addNewItem}>
                         Add new item

packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx

@@ -6,8 +6,11 @@ import {
     Form,
     FormField,
     Tooltip,
+    AlertDescription,
+    Alert,
 } from "@courselit/components-library";
 import { Address, Auth, Profile } from "@courselit/common-models";
+import { AlertCircle } from "lucide-react";
 
 interface ItemProps {
     item: Item;
@@ -27,6 +30,7 @@ export default function ItemEditor({
 }: ItemProps): JSX.Element {
     const [title, setTitle] = useState(item.title);
     const [description, setDescription] = useState(item.description);
+    const [deleteConfirmation, setDeleteConfirmation] = useState(false);
 
     const itemChanged = () =>
         onChange({
@@ -36,6 +40,12 @@ export default function ItemEditor({
 
     return (
         <div className="flex flex-col">
+            <Alert variant="destructive" className="mb-4">
+                <AlertCircle className="w-4 h-4" />
+                <AlertDescription>
+                    Changes will be visible upon clicking Done button
+                </AlertDescription>
+            </Alert>
             <Form onSubmit={(e) => e.preventDefault()}>
                 <FormField
                     label="Title"
@@ -55,10 +65,16 @@ export default function ItemEditor({
                     <Tooltip title="Delete">
                         <Button
                             component="button"
-                            onClick={onDelete}
+                            onClick={() => {
+                                if (deleteConfirmation) {
+                                    onDelete();
+                                } else {
+                                    setDeleteConfirmation(true);
+                                }
+                            }}
                             variant="soft"
                         >
-                            Delete
+                            {deleteConfirmation ? "Sure?" : "Delete"}
                         </Button>
                     </Tooltip>
                     <Tooltip title="Go back">

packages/page-blocks/src/blocks/faq/settings.ts

@@ -12,4 +12,5 @@ export default interface Settings extends WidgetDefaultSettings {
     itemsAlignment: Alignment;
     items?: Item[];
     cssId?: string;
+    itemBeingEditedIndex?: number;
 }

packages/page-blocks/src/blocks/faq/widget.tsx

@@ -25,15 +25,20 @@ export default function Widget({
         cssId,
         maxWidth,
         verticalPadding,
+        itemBeingEditedIndex,
     },
     state,
+    editing,
 }: WidgetProps<Settings>) {
     const { theme } = state;
     const overiddenTheme: ThemeStyle = JSON.parse(JSON.stringify(theme.theme));
     overiddenTheme.structure.page.width =
         maxWidth || theme.theme.structure.page.width;
     overiddenTheme.structure.section.padding.y =
         verticalPadding || theme.theme.structure.section.padding.y;
+    const accordionValue = editing
+        ? `${items[itemBeingEditedIndex]?.title}-${itemBeingEditedIndex}`
+        : undefined;
 
     return (
         <Section theme={overiddenTheme} id={cssId}>
@@ -64,7 +69,12 @@ export default function Widget({
                 </div>
                 {items && items.length > 0 && (
                     <div className="flex flex-wrap gap-[1%]">
-                        <Accordion type="single" collapsible className="w-full">
+                        <Accordion
+                            type="single"
+                            collapsible
+                            className="w-full"
+                            value={accordionValue}
+                        >
                             {items.map((item: Item, index: number) => (
                                 <AccordionItem
                                     key={`${item.title}-${index}`}