chore/ui: Add tweaks for markdown editors

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "env-cmd -f .env.local vite",
-    "build": "tsc -b && vite build -d --emptyOutDir",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview --port 5173 --host 0.0.0.0"
   },

frontend/src/components/blocks/questions/admin-edit-form.tsx

@@ -1,6 +1,8 @@
 import { DotsVerticalIcon, Pencil1Icon, TrashIcon } from '@radix-ui/react-icons';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -99,15 +101,26 @@ export const QuestionDetails = ({
         <Markdown
           rehypePlugins={[rehypeKatex]}
           remarkPlugins={[remarkMath, remarkGfm]}
-          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:bg-secondary prose-pre:text-secondary-foreground leading-normal'
+          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:p-0 leading-normal'
           components={{
             code: ({ children, className, ...rest }) => {
-              // const isCodeBlock = /language-(\w+)/.exec(className || '');
-
-              return (
+              const match = /language-(\w+)/.exec(className || '');
+              return match ? (
+                <SyntaxHighlighter
+                  customStyle={{
+                    borderRadius: '0.3em',
+                    margin: 0,
+                  }}
+                  PreTag='div'
+                  style={oneLight}
+                  language={match[1]}
+                >
+                  {String(children)}
+                </SyntaxHighlighter>
+              ) : (
                 <code
                   {...rest}
-                  className='dark:bg-secondary dark:text-secondary-foreground rounded px-1.5 py-1 font-mono'
+                  className='bg-secondary text-secondary-foreground rounded px-1.5 py-1 font-mono'
                 >
                   {children}
                 </code>

frontend/src/components/blocks/questions/details.tsx

@@ -21,7 +21,7 @@ type Option = {
   value: string;
 };
 
-type ComboboxProps = {
+type ComboboxMultiProps = {
   options: Array<Option>;
   placeholderText: string;
   noOptionsText: string;
@@ -30,7 +30,7 @@ type ComboboxProps = {
 
 export const ComboboxMulti = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxProps
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxMultiProps
 >(({ className, options, placeholderText, noOptionsText, setValuesCallback, ...props }, ref) => {
   const [open, setOpen] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState<Array<string>>([]);
@@ -100,3 +100,98 @@ export const ComboboxMulti = React.forwardRef<
     </Popover>
   );
 });
+
+type ComboboxExternalProps = {
+  options: Array<{
+    value: string;
+    label: string;
+  }>;
+  itemName: string;
+  chosenOptions: Array<string>;
+  setChosenOptions: (values: Array<string>) => void;
+};
+
+export const ComboboxExternal = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & ComboboxExternalProps
+>(({ className, itemName, options, chosenOptions, setChosenOptions, ...props }, ref) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [inputVal, setInputVal] = React.useState('');
+
+  const onAddNewOption = () => {
+    const opt = inputVal.replace(/^[a-zA-Z]/, (c) => c.toUpperCase());
+
+    if (!chosenOptions.includes(opt)) {
+      setChosenOptions([...chosenOptions, opt]);
+    }
+
+    setInputVal('');
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={isOpen}
+          className='w-[200px] justify-between'
+        >
+          <span>Select {itemName}...</span>
+          <ChevronsUpDown className='opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent ref={ref} {...props} className={cn('w-[200px] p-0', className)}>
+        <Command>
+          <CommandInput
+            value={inputVal}
+            onValueChange={setInputVal}
+            placeholder={`Search or add ${itemName}...`}
+            className='h-9'
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                onAddNewOption();
+              }
+            }}
+          />
+          <CommandList>
+            <CommandEmpty
+              className='hover:bg-secondary hover:text-secondary-foreground p-3 text-sm hover:cursor-pointer'
+              onClick={onAddNewOption}
+            >
+              Add {`"${inputVal}"`}
+            </CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  className='hover:cursor-pointer'
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    if (chosenOptions.includes(currentValue)) {
+                      setChosenOptions(chosenOptions.filter((v) => v !== currentValue));
+                    } else {
+                      setChosenOptions([...chosenOptions, currentValue]);
+                    }
+
+                    setIsOpen(false);
+                  }}
+                >
+                  {option.label}
+                  <Check
+                    className={cn(
+                      'ml-auto',
+                      chosenOptions.includes(option.value) ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+});

frontend/src/components/ui/combobox.tsx

@@ -7,13 +7,10 @@ import { ForgotPassword } from '@/routes/forgot-password';
 import { HomePage } from '@/routes/home';
 import { InterviewRoom, loader as interviewRoomLoader } from '@/routes/interview/[room]';
 import { Login } from '@/routes/login';
+import { Match } from '@/routes/match';
 import { loader as topicsLoader } from '@/routes/match/logic';
-import { Match } from '@/routes/match/main';
+import { loader as questionsLoader, Questions } from '@/routes/questions';
 import { loader as questionDetailsLoader, QuestionDetailsPage } from '@/routes/questions/details';
-import {
-  // loader as questionsLoader,
-  Questions,
-} from '@/routes/questions/main';
 import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
@@ -36,6 +33,7 @@ export const router = createBrowserRouter([
               },
               {
                 path: ROUTES.QUESTIONS,
+                loader: questionsLoader,
                 // loader: questionsLoader(queryClient),
                 element: <Questions />,
               },

frontend/src/lib/router.tsx

@@ -0,0 +1,2 @@
+export * from './logic';
+export * from './main';

frontend/src/routes/match/index.ts

@@ -14,13 +14,13 @@ export interface MatchFormData {
   difficulty: string;
 }
 
-const getTopicsQueryConfig = () =>
+export const getTopicsQueryConfig = () =>
   queryOptions({
     queryKey: ['topics'],
     queryFn: async () => fetchTopics(),
   });
 
-const getDifficultiesQueryConfig = () => {
+export const getDifficultiesQueryConfig = () => {
   return queryOptions({
     queryKey: ['difficulties'],
     queryFn: async () => fetchDifficulties(),

frontend/src/routes/match/logic.ts

@@ -7,6 +7,7 @@ import {
   useEffect,
   useMemo,
 } from 'react';
+import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 
 // import { Await, defer, type LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 import { WithNavBanner } from '@/components/blocks/authed';
@@ -22,23 +23,17 @@ import type { IGetQuestionsResponse } from '@/types/question-types';
 import { QuestionTable } from './question-table';
 import { columns } from './table-columns';
 
-// type IQuestionListServiceAPIResponse = Awaited<ReturnType<typeof fetchQuestions>>;
-// type IQuestionLoaderReturn = Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
-// type IQuestionLoaderData = { initialPage?: IQuestionListServiceAPIResponse };
-// const getListQuestionsQueryConfig = (pageNumber?: number) =>
-//   queryOptions({
-//     queryKey: ['qn', 'list', pageNumber],
-//     queryFn: async ({ signal: _ }) => fetchQuestions(pageNumber),
-//   });
-// export const loader =
-//   (queryClient: QueryClient) =>
-//   async ({ params: _ }: LoaderFunctionArgs) => {
-//     return defer({
-//       initialPage: queryClient.ensureQueryData(getListQuestionsQueryConfig()),
-//     });
-//   };
+export const loader = (args: LoaderFunctionArgs) => {
+  const route = new URL(args.request.url);
+  const params = route.searchParams;
+  const pageNum = params.get('page');
+  return {
+    pageNum,
+  };
+};
 
 export function Questions() {
+  const { pageNum } = useLoaderData() as ReturnType<typeof loader>;
   const { userId } = useAuthedRoute();
   usePageTitle(ROUTES.QUESTIONS);
   const { crumbs } = useCrumbs();
@@ -47,9 +42,9 @@ export function Questions() {
     IGetQuestionsResponse,
     Error
   >({
-    queryKey: ['questions', userId],
+    queryKey: ['questions', userId, pageNum],
     queryFn: ({ pageParam }) => fetchQuestions(userId, pageParam as number | undefined),
-    initialPageParam: 0,
+    initialPageParam: +(pageNum ?? ''),
     getNextPageParam: (lastPage, pages) => {
       const nextPage = pages.length;
       const totalPages = Math.ceil(lastPage.totalQuestions / ROWS_PER_PAGE);

frontend/src/routes/questions/main.tsx

@@ -14,7 +14,8 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { AdminEditForm } from '@/components/blocks/questions/admin-edit-form';
 import { Button } from '@/components/ui/button';
@@ -49,6 +50,7 @@ export function QuestionTable<TData, TValue>({
   isError,
 }: QuestionTableProps<TData, TValue>) {
   const { isAdmin } = useAuthedRoute();
+  const [_searchParams, setSearchParams] = useSearchParams();
   const [isAdminAddFormOpen, setIsAdminAddFormOpen] = useState(false);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
@@ -77,6 +79,12 @@ export function QuestionTable<TData, TValue>({
     setColumnFilters(value == 'all' ? [] : [{ id: 'attempted', value: value === 'attempted' }]);
   };
 
+  useEffect(() => {
+    const newParams = new URLSearchParams();
+    newParams.set('pageNum', String(pagination.pageIndex));
+    setSearchParams(newParams);
+  }, [pagination.pageIndex]);
+
   return (
     <div className='flex size-full flex-col'>
       <div className='flex items-center py-4'>

frontend/src/routes/questions/question-table.tsx

@@ -65,6 +65,9 @@ const config = {
               'code::after': {
                 content: 'none',
               },
+              '.contains-task-list': {
+                'list-style-type': 'none',
+              },
             }
           }
         }