Changing every btn to Button.

buchananwill · Mar 29, 2024 · 49dcf4e · 49dcf4e
1 parent ef769a2
commit 49dcf4e
Show file tree

Hide file tree

Showing 42 changed files with 266 additions and 198 deletions.
diff --git a/app/build-metrics/[schedule]/page.tsx b/app/build-metrics/[schedule]/page.tsx
@@ -1,4 +1,5 @@
-import { Button, Card, Text, Title } from '@tremor/react';
+import { Button, Text, Title } from '@tremor/react';
+import { Card, CardBody } from '@nextui-org/react';
 import { BuildMetricsChart } from './buildMetricsChart';
 import MetricsContextProvider from './metrics-context-provider';
 
@@ -27,34 +28,40 @@ export default async function BuildMetricsOverview({
   const buildMetricDto = buildMetricDtoResponse.data;
   if (buildMetricDto === undefined) {
     console.log(buildMetricDtoResponse.message);
-    return <Card>No data found!</Card>;
+    return (
+      <Card>
+        <CardBody>No data found!</CardBody>
+      </Card>
+    );
   }
 
   return (
     <MetricsContextProvider buildMetricDto={buildMetricDto}>
       <Card>
-        <div className="flex items-center">
-          <Title className="mr-2">
-            Build Metric Overview, Schedule {scheduleId}
-          </Title>
-          <DropdownParam
-            paramOptions={filteredIds}
-            currentSelection={schedule}
-          />
-          <Link href={`/build-metrics/lesson-cycles/${scheduleId}`}>
-            <Button
-              color="gray"
-              className="ml-2 hover:bg-gray-400 outline-0 border-0"
-            >
-              Lesson Cycles
-            </Button>
-          </Link>
-        </div>
-        <Text>
-          Total allocation loops: {buildMetricDto.totalAllocationLoops}
-        </Text>
-        <Text>Final State: {buildMetricDto.finalState}</Text>
-        <BuildMetricsChart buildMetricData={buildMetricDto} />
+        <CardBody>
+          <div className="flex items-center">
+            <Title className="mr-2">
+              Build Metric Overview, Schedule {scheduleId}
+            </Title>
+            <DropdownParam
+              paramOptions={filteredIds}
+              currentSelection={schedule}
+            />
+            <Link href={`/build-metrics/lesson-cycles/${scheduleId}`}>
+              <Button
+                color="gray"
+                className="ml-2 hover:bg-gray-400 outline-0 border-0"
+              >
+                Lesson Cycles
+              </Button>
+            </Link>
+          </div>
+          <Text>
+            Total allocation loops: {buildMetricDto.totalAllocationLoops}
+          </Text>
+          <Text>Final State: {buildMetricDto.finalState}</Text>
+          <BuildMetricsChart buildMetricData={buildMetricDto} />
+        </CardBody>
       </Card>
     </MetricsContextProvider>
   );

diff --git a/app/curriculum/class-hierarchy/[yearGroup]/page.tsx b/app/curriculum/class-hierarchy/[yearGroup]/page.tsx
@@ -4,7 +4,7 @@ import {
   getOrganizationGraphByOrganizationType,
   getSchemasByIdList
 } from '../../../api/actions/curriculum-delivery-model';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 
 import ForceGraphPage from '../../../graphing/force-graph-page';
 

diff --git a/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx b/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx
@@ -39,6 +39,7 @@ import {
   UnsavedBundleEdits
 } from '../../../../selective-context/keys/work-series-schema-bundle-keys';
 import { RenameModalWrapperContextKey } from '../../../../selective-context/keys/modal-keys';
+import { Button } from '@nextui-org/react';
 
 function bundleSort(
   bun1: WorkSeriesSchemaBundleLeanDto,
@@ -215,11 +216,11 @@ export function BundleEditor({
       <div className={'w-full flex items-center pb-2'}>
         <Title>Current Tab: </Title>
         <RenameButton
-          onClick={handleOpen}
+          onPress={handleOpen}
           currentName={nameOfBundle}
           className={'mx-2 '}
         />
-        <TwoStageClick onClick={() => deleteBundle(activeBundleAndId.id)}>
+        <TwoStageClick onPress={() => deleteBundle(activeBundleAndId.id)}>
           <TrashIcon className={'h-4 w-4'}></TrashIcon>
         </TwoStageClick>
         <span className={'grow'}></span>
@@ -258,12 +259,15 @@ export function BundleEditor({
             </div>
           </Tab.List>
 
-          <button
-            className={` btn btn-sm btn-outline px-0 w-[50px] `}
-            onClick={handleNewBundle}
+          <Button
+            className={`  px-0 w-[50px] `}
+            onPress={handleNewBundle}
+            variant={'ghost'}
+            size={'sm'}
+            color={'primary'}
           >
             <PlusCircleIcon className={'h-5 w-5'}></PlusCircleIcon>
-          </button>
+          </Button>
         </div>
         <Tab.Panels>
           {sortedBundleList.map(({ id }, index) => (

diff --git a/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx b/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx
@@ -3,7 +3,7 @@ import {
   getCurriculumDeliveryModelSchemasByKnowledgeLevel
 } from '../../../../api/actions/curriculum-delivery-model';
 import { normalizeQueryParamToNumber } from '../../../../api/utils';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { BundleEditor } from './bundle-editor';
 import { BundleItemsContextProvider } from '../../contexts/bundle-items-context-provider';
 import { BundleAssignmentsProvider } from '../../contexts/bundle-assignments-provider';

diff --git a/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx b/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Card } from '@tremor/react';
+import { Button, Card } from '@nextui-org/react';
 import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import React, { useMemo, useState } from 'react';
 
@@ -28,6 +28,7 @@ import {
   useModal
 } from '../../generic/components/modals/confirm-action-modal';
 import TupleSelector from '../../generic/components/dropdown/tuple-selector';
+import { isNotNull } from '../../api/main';
 
 const noTaskType: NameIdStringTuple = { name: 'No Type Selected', id: 'n/a' };
 
@@ -55,7 +56,8 @@ export function AddNewCurriculumModelCard({
   const { isOpen, closeModal, openModal } = useModal();
   const { workTaskTypeMap } = useWorkTaskTypeContext();
   const { dispatch, curriculumModelsMap } = useCurriculumModelContext();
-  const [newModelTaskType, setNewModelTaskType] = useState(noTaskType);
+  const [newModelTaskType, setNewModelTaskType] =
+    useState<NameIdStringTuple | null>(null);
   const [nextModelId, setNextModelId] = useState(crypto.randomUUID());
   const [revertUnsaved, setRevertUnsaved] = useState(true);
   const appRouterInstance = useRouter();
@@ -99,12 +101,13 @@ export function AddNewCurriculumModelCard({
     }
     setNextModelId(crypto.randomUUID());
     setNewModelTaskType(
-      taskTypeSelectionList.length > 0 ? taskTypeSelectionList[0] : noTaskType
+      taskTypeSelectionList.length > 0 ? taskTypeSelectionList[0] : null
     );
     closeModal();
   };
 
   const handleAddNewModel = () => {
+    if (!isNotNull(newModelTaskType)) return;
     const unsavedModel: WorkProjectSeriesSchemaDto = {
       ...curriculumModelsMap[nextModelId],
       id: nextModelId,
@@ -129,12 +132,14 @@ export function AddNewCurriculumModelCard({
   return (
     <>
       <Card className={'p-4'}>
-        <button
-          className={'btn btn-primary w-full h-full btn-outline'}
-          onClick={handleOpen}
+        <Button
+          className={' w-full h-full '}
+          variant={'ghost'}
+          color={'primary'}
+          onPress={handleOpen}
         >
           Add New Model <PlusCircleIcon className={'w-8 h-8'}></PlusCircleIcon>
-        </button>
+        </Button>
       </Card>
       <ConfirmActionModal
         show={isOpen}

diff --git a/app/curriculum/delivery-models/curriculum-delivery-model.tsx b/app/curriculum/delivery-models/curriculum-delivery-model.tsx
@@ -21,6 +21,7 @@ import { TwoStageClick } from '../../generic/components/buttons/two-stage-click'
 import { TabStyled } from '../../generic/components/tab-layouts/tab-styled';
 import { TabPanelStyled } from '../../generic/components/tab-layouts/tab-panel-styled';
 import { RenameModal } from '../../generic/components/modals/rename-modal';
+import { Button } from '@nextui-org/react';
 
 const allocationSizes = [1, 2];
 
@@ -49,23 +50,19 @@ export function CurriculumDeliveryModel({
       <Tab.Group>
         <div className={'grid grid-cols-4 mb-2 items-center gap-0.5'}>
           <div className={'col-span-2 flex items-center gap-1'}>
-            <TwoStageClick
-              className={'btn-sm'}
-              standardAppearance={'btn-ghost'}
-              onClick={handleDelete}
-            >
+            <TwoStageClick standardAppearance={'light'} onPress={handleDelete}>
               {' '}
               <TrashIcon className={'h-4 w-4'}></TrashIcon>
             </TwoStageClick>
-            <button
-              className={
-                'btn btn-ghost btn-sm w-3/4 flex overflow-hidden flex-nowrap'
-              }
-              onClick={openModal}
+            <Button
+              className={'w-3/4 flex overflow-hidden flex-nowrap'}
+              onPress={openModal}
+              size={'sm'}
+              variant={'light'}
             >
               <span className={'truncate ... w-3/4'}>{model.name}</span>
               <PencilSquareIcon className={'h-4 w-4 grow'}></PencilSquareIcon>
-            </button>
+            </Button>
           </div>
           <Tab.List className={'grid col-span-2 grow grid-cols-2'}>
             <TabStyled>Periods</TabStyled>

diff --git a/app/generic/components/buttons/pagination.tsx b/app/generic/components/buttons/pagination.tsx
@@ -10,7 +10,9 @@ import { useEffect, useState, useTransition } from 'react';
 import ProtectedNavigation from '../../../navbar/protected-navigation';
 
 import { zeroIndexToOneIndex } from '../../../api/utils';
-const buttonClassName = 'btn  relative btn-primary btn-outline';
+import { ButtonProps } from '@nextui-org/react';
+const buttonClassName = ' relative ';
+
 const svgClassName = 'h-5 w-5 ';
 
 /**
@@ -72,6 +74,9 @@ export function Pagination({
     <div className={'my-2 gap-x-1 flex'}>
       {!!lastPage && (
         <ProtectedNavigation
+          variant={'ghost'}
+          isIconOnly
+          color={'primary'}
           className={`${buttonClassName}`}
           disabled={first || pending}
           onConfirm={toFirstPage}
@@ -85,6 +90,9 @@ export function Pagination({
         </ProtectedNavigation>
       )}
       <ProtectedNavigation
+        variant={'ghost'}
+        isIconOnly
+        color={'primary'}
         className={`${buttonClassName}`}
         disabled={first || pending}
         onConfirm={() => handleClick(false)}
@@ -95,6 +103,9 @@ export function Pagination({
         <ArrowLeftIcon className={svgClassName}></ArrowLeftIcon>
       </ProtectedNavigation>
       <ProtectedNavigation
+        variant={'ghost'}
+        isIconOnly
+        color={'primary'}
         className={`${buttonClassName}`}
         onConfirm={() => handleClick(true)}
         disabled={last || pending}
@@ -106,6 +117,9 @@ export function Pagination({
       </ProtectedNavigation>
       {!!lastPage && (
         <ProtectedNavigation
+          variant={'ghost'}
+          isIconOnly
+          color={'primary'}
           className={`${buttonClassName}`}
           disabled={last || pending}
           onConfirm={toLastPage}

diff --git a/app/generic/components/buttons/two-stage-click.tsx b/app/generic/components/buttons/two-stage-click.tsx
@@ -2,11 +2,13 @@ import React, { useRef, useState } from 'react';
 import { Badge } from '@tremor/react';
 import { offset, useFloating } from '@floating-ui/react';
 import { GenericButtonProps } from './rename-button';
-import { Button } from '@nextui-org/react';
+import { Button, ButtonProps } from '@nextui-org/react';
+import { PressEvent } from '@react-types/shared';
+import { isNotUndefined } from '../../../api/main';
 
 export function TwoStageClick({
   children,
-  onClick,
+  onPress,
   standardAppearance = 'ghost',
   primedAppearance = 'danger',
   primedMessage = 'Confirm delete?',
@@ -16,17 +18,17 @@ export function TwoStageClick({
   standardAppearance?: 'light' | 'ghost';
   primedAppearance?: 'danger' | 'primary';
   primedMessage?: string;
-} & GenericButtonProps) {
+} & ButtonProps) {
   const [clickPrimed, setClickPrimed] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const { refs, floatingStyles } = useFloating({
     placement: 'right',
     middleware: [offset({ mainAxis: 10 })]
   });
 
-  const guardClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (clickPrimed && onClick) {
-      onClick(e);
+  const guardClick = (e: PressEvent) => {
+    if (clickPrimed && isNotUndefined(onPress)) {
+      onPress(e);
       setClickPrimed(false);
       if (timeoutRef.current !== undefined) clearTimeout(timeoutRef.current);
     } else {
@@ -43,17 +45,17 @@ export function TwoStageClick({
         color={clickPrimed ? primedAppearance : 'default'}
         variant={standardAppearance}
         size={'sm'}
-        onClick={guardClick}
+        onPress={guardClick}
       >
         {children}
       </Button>
       {clickPrimed && (
         <div
           ref={refs.setFloating}
           style={floatingStyles}
-          className={'bg-white bg-opacity-100 w-fit h-fit rounded-md'}
+          className={'bg-white bg-opacity-100 w-fit h-fit rounded-md z-10'}
         >
-          <Badge color={'red'} onClick={guardClick}>
+          <Badge color={'red'} className={''}>
             {primedMessage}
           </Badge>
         </div>