From 6948c2e4ee11d0ba44d2382b569abd63a4737fd6 Mon Sep 17 00:00:00 2001 From: Bryann Yeap Kok Keong Date: Sat, 22 Oct 2022 16:25:26 +0800 Subject: [PATCH 1/9] [offers][refactor] Rename currency exchanger file to follow camelCase --- apps/portal/src/pages/offers/test/generateAnalysis.tsx | 2 +- apps/portal/src/pages/offers/test/getAnalysis.tsx | 2 +- apps/portal/src/server/router/offers/offers-profile-router.ts | 2 +- apps/portal/src/server/router/offers/offers.ts | 2 +- .../currency/{currency-exchange.ts => currencyExchange.ts} | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename apps/portal/src/utils/offers/currency/{currency-exchange.ts => currencyExchange.ts} (100%) diff --git a/apps/portal/src/pages/offers/test/generateAnalysis.tsx b/apps/portal/src/pages/offers/test/generateAnalysis.tsx index 029ab5fe..87c4cfbb 100644 --- a/apps/portal/src/pages/offers/test/generateAnalysis.tsx +++ b/apps/portal/src/pages/offers/test/generateAnalysis.tsx @@ -8,7 +8,7 @@ function GenerateAnalysis() { return (
{JSON.stringify( - analysisMutation.mutate({ profileId: 'cl9j50xzk008vutfqg6mta2ey' }), + analysisMutation.mutate({ profileId: 'cl9jj2ks1001li9fn9np47wjr' }), )}
); diff --git a/apps/portal/src/pages/offers/test/getAnalysis.tsx b/apps/portal/src/pages/offers/test/getAnalysis.tsx index 477ee183..8ad7bff0 100644 --- a/apps/portal/src/pages/offers/test/getAnalysis.tsx +++ b/apps/portal/src/pages/offers/test/getAnalysis.tsx @@ -5,7 +5,7 @@ import { trpc } from '~/utils/trpc'; function GetAnalysis() { const analysis = trpc.useQuery([ 'offers.analysis.get', - { profileId: 'cl9j50xzk008vutfqg6mta2ey' }, + { profileId: 'cl9jj2ks1001li9fn9np47wjr' }, ]); return
{JSON.stringify(analysis.data)}
; diff --git a/apps/portal/src/server/router/offers/offers-profile-router.ts b/apps/portal/src/server/router/offers/offers-profile-router.ts index 8ce57731..104cdf95 100644 --- a/apps/portal/src/server/router/offers/offers-profile-router.ts +++ b/apps/portal/src/server/router/offers/offers-profile-router.ts @@ -9,7 +9,7 @@ import { profileDtoMapper, } from '~/mappers/offers-mappers'; import { baseCurrencyString } from '~/utils/offers/currency'; -import { convert } from '~/utils/offers/currency/currency-exchange'; +import { convert } from '~/utils/offers/currency/currencyExchange'; import { createValidationRegex } from '~/utils/offers/zodRegex'; import { createRouter } from '../context'; diff --git a/apps/portal/src/server/router/offers/offers.ts b/apps/portal/src/server/router/offers/offers.ts index 284063e9..8b2321e6 100644 --- a/apps/portal/src/server/router/offers/offers.ts +++ b/apps/portal/src/server/router/offers/offers.ts @@ -5,7 +5,7 @@ import { dashboardOfferDtoMapper, getOffersResponseMapper, } from '~/mappers/offers-mappers'; -import { convertWithDate } from '~/utils/offers/currency/currency-exchange'; +import { convertWithDate } from '~/utils/offers/currency/currencyExchange'; import { Currency } from '~/utils/offers/currency/CurrencyEnum'; import { createValidationRegex } from '~/utils/offers/zodRegex'; diff --git a/apps/portal/src/utils/offers/currency/currency-exchange.ts b/apps/portal/src/utils/offers/currency/currencyExchange.ts similarity index 100% rename from apps/portal/src/utils/offers/currency/currency-exchange.ts rename to apps/portal/src/utils/offers/currency/currencyExchange.ts From e55d08279bce7362957673fee9f76bda03342f47 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sat, 22 Oct 2022 17:46:35 +0800 Subject: [PATCH 2/9] [ui] add toasts --- apps/portal/src/pages/_app.tsx | 9 +- apps/portal/src/pages/index.tsx | 23 +---- apps/portal/src/pages/test__.tsx | 51 +++++++++++ packages/ui/src/Toast/Toast.tsx | 108 +++++++++++++++++++++++ packages/ui/src/Toast/ToastsProvider.tsx | 72 +++++++++++++++ packages/ui/src/index.tsx | 6 ++ 6 files changed, 244 insertions(+), 25 deletions(-) create mode 100644 apps/portal/src/pages/test__.tsx create mode 100644 packages/ui/src/Toast/Toast.tsx create mode 100644 packages/ui/src/Toast/ToastsProvider.tsx diff --git a/apps/portal/src/pages/_app.tsx b/apps/portal/src/pages/_app.tsx index 11606124..9914942e 100644 --- a/apps/portal/src/pages/_app.tsx +++ b/apps/portal/src/pages/_app.tsx @@ -3,6 +3,7 @@ import type { Session } from 'next-auth'; import { SessionProvider } from 'next-auth/react'; import React from 'react'; import superjson from 'superjson'; +import { ToastsProvider } from '@tih/ui'; import { httpBatchLink } from '@trpc/client/links/httpBatchLink'; import { loggerLink } from '@trpc/client/links/loggerLink'; import { withTRPC } from '@trpc/next'; @@ -19,9 +20,11 @@ const MyApp: AppType<{ session: Session | null }> = ({ }) => { return ( - - - + + + + + ); }; diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx index 360c81e8..51f58469 100644 --- a/apps/portal/src/pages/index.tsx +++ b/apps/portal/src/pages/index.tsx @@ -1,32 +1,11 @@ -import { useState } from 'react'; -import type { TypeaheadOption } from '@tih/ui'; -import { HorizontalDivider } from '@tih/ui'; - -import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; -import type { Month, MonthYear } from '~/components/shared/MonthYearPicker'; -import MonthYearPicker from '~/components/shared/MonthYearPicker'; - export default function HomePage() { - const [selectedCompany, setSelectedCompany] = - useState(null); - const [monthYear, setMonthYear] = useState({ - month: (new Date().getMonth() + 1) as Month, - year: new Date().getFullYear(), - }); - return (

- Homepage + Tech Interview Handbook Portal

- setSelectedCompany(option)} - /> -
{JSON.stringify(selectedCompany, null, 2)}
- -
diff --git a/apps/portal/src/pages/test__.tsx b/apps/portal/src/pages/test__.tsx new file mode 100644 index 00000000..26859c56 --- /dev/null +++ b/apps/portal/src/pages/test__.tsx @@ -0,0 +1,51 @@ +import { useState } from 'react'; +import type { TypeaheadOption } from '@tih/ui'; +import { Button } from '@tih/ui'; +import { useToast } from '@tih/ui'; +import { HorizontalDivider } from '@tih/ui'; + +import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; +import type { Month, MonthYear } from '~/components/shared/MonthYearPicker'; +import MonthYearPicker from '~/components/shared/MonthYearPicker'; + +export default function HomePage() { + const [selectedCompany, setSelectedCompany] = + useState(null); + const [monthYear, setMonthYear] = useState({ + month: (new Date().getMonth() + 1) as Month, + year: new Date().getFullYear(), + }); + + const { showToast } = useToast(); + + return ( +
+
+
+

+ Test Page +

+ setSelectedCompany(option)} + /> +
{JSON.stringify(selectedCompany, null, 2)}
+ + + +
+
+
+ ); +} diff --git a/packages/ui/src/Toast/Toast.tsx b/packages/ui/src/Toast/Toast.tsx new file mode 100644 index 00000000..4d6efe51 --- /dev/null +++ b/packages/ui/src/Toast/Toast.tsx @@ -0,0 +1,108 @@ +import { Fragment, useEffect, useRef } from 'react'; +import { Transition } from '@headlessui/react'; +import { CheckIcon } from '@heroicons/react/24/outline'; +import { XMarkIcon } from '@heroicons/react/24/solid'; + +type ToastVariant = 'failure' | 'success'; + +export type ToastMessage = { + duration?: number; + subtitle?: string; + title: string; + variant: ToastVariant; +}; + +type Props = Readonly<{ + duration?: number; + onClose: () => void; + subtitle?: string; + title: string; + variant: ToastVariant; +}>; + +const DEFAULT_DURATION = 5000; + +function ToastIcon({ variant }: Readonly<{ variant: ToastVariant }>) { + switch (variant) { + case 'success': + return ( +