🪟 🔧 Remove useRouter hook [to be closed] #14869

YatsukBogdan1 · 2022-07-20T08:25:15Z

What

How

As mentioned in the issue description, I removed useRouter hook and replaced it in corresponding places with direct hooks for navigation, location, params, etc. I also added two custom hooks (useRouterQuery, useRouterReplace), that were initially in useRouter, since they responsible for some logic, using direct hooks

timroes · 2022-07-25T15:22:27Z

airbyte-webapp/src/hooks/useRouter.tsx

+  sortBy?: string;
+}
+
+export const useRouterQuery = (): UseRouterQueryResult => {


I feel we should not need this anymore, since we (should) know whether something comes in via query parameter or a route parameter, so that we should in the places we use this, just use the useParams hook directly and have one custom useQuery() hook (that doesn't mix the params into the query parameters).

I'll leave in the used places a comment, where I believ the information is coming from.

read your last comment and got what you meant here

so now fixed this. will left comment under every fixed router usage

timroes · 2022-07-25T15:23:36Z

airbyte-webapp/src/hooks/useRouter.tsx


-export default useRouter;
+export const useRouterReplace = (): UseRouterReplaceInterface => {


Wonder if we really want to keep this as a custom hook around, since we anyway just use it in one place?

timroes · 2022-07-25T15:55:01Z

airbyte-webapp/src/services/workspaces/WorkspacesService.tsx

@@ -76,7 +76,7 @@ function useWorkspaceApiService() {
 }

 export const useCurrentWorkspaceId = () => {
-  const { params } = useRouter<unknown, { workspaceId: string }>();
+  const params = useParams() as { workspaceId: string };


useParams support a generic paramter, and we should specify this as it's generic parameter not casting it (more type safe approach). This comment applied also for all other useParams calls in this PR.

I changed current version to something like this

export const useCurrentWorkspaceId = () => { const params = useParams<{ workspaceId: string }>(); return params.workspaceId as string; };

but still need to cast workspaceId to string since it is giving TS errors that value might be undefined. Is that okey,?

timroes · 2022-07-25T16:03:52Z

...e-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx

@@ -39,7 +40,8 @@ type FullTableProps = CreditConsumptionByConnector & {
 };

 const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ creditConsumption }) => {
-  const { query, push } = useRouter();
+  const query = useRouterQuery();


That should purely work from query, no params mixed in.

can you be more specific on this? not sure I am following the logic here

timroes · 2022-07-25T16:07:53Z

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -31,7 +32,8 @@ interface IProps {
 }

 const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeStatus, onSync }) => {
-  const { query, push } = useRouter();
+  const navigate = useNavigate();
+  const query = useRouterQuery();


Should only be from query, not require params.

can you be more specific on this? not sure I am following the logic here

timroes · 2022-07-25T16:27:27Z

airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx

@@ -47,7 +50,7 @@ export const VerifyEmailAction: React.FC = () => {
 };

 export const FirebaseActionRoute: React.FC = () => {
-  const { query: { mode } = {} } = useRouter<{ mode: string }>();
+  const { mode } = useRouterQuery();


Should be fine only with query no params.

can you be more specific on this? not sure I am following the logic here

timroes · 2022-07-25T16:32:47Z

...e-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx

@@ -21,7 +22,8 @@ const ResetPasswordPageValidationSchema = yup.object().shape({
 const ResetPasswordConfirmPage: React.FC = () => {
  const { confirmPasswordReset } = useAuthService();
  const { registerNotification } = useNotificationService();
-  const { push, query } = useRouterHook<{ oobCode: string }>();
+  const navigate = useNavigate();
+  const query = useRouterQuery();


Should be fine with query only no params required.

can you be more specific on this? not sure I am following the logic here

timroes · 2022-07-25T16:35:18Z

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx

@@ -23,7 +23,8 @@ const LoginPageValidationSchema = yup.object().shape({
 const LoginPage: React.FC = () => {
  const { formatMessage } = useIntl();
  const { login } = useAuthService();
-  const { query, replace } = useRouter();
+  const query = useRouterQuery();


Should be fine with just query no params.

can you be more specific on this? not sure I am following the logic here

Those comments all refer to #14869 (comment). I think we should remove the useRouterQuery hook completely, and instead use either the native useParams (if we need it from params) or a useQuery hook (that we'd need to build, since weirdly react-router doesn't include one). Those comments all state if the places earlier using useRouterQuery actually will require to pull in the information from the query i.el. useQuery or from the params i.e. useParams.

yes. got you. already fixed

timroes · 2022-07-25T16:42:34Z

airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx

@@ -26,22 +26,24 @@ import SourceConnectionTable from "./components/SourceConnectionTable";
 import SourceSettings from "./components/SourceSettings";

 const SourceItemPage: React.FC = () => {
-  const { query, params, push } = useRouter<{ id: string }, { id: string; "*": string }>();
+  const query = useRouterQuery();


This seems to be the only place we actually are interested in the id from the params and not the query.

can you be more specific on this? not sure I am following the logic here

timroes · 2022-07-25T18:13:21Z

airbyte-webapp/src/hooks/useRouter.tsx

+  sortBy?: string;
+}
+
+export const useRouterQuery = (): UseRouterQueryResult => {


I think we should not keep this weird merge of params and queries around anymore. I think we should instead just have a very simpley useQuery hook for getting query parameters (without merging the path params in, since weirdly react-router doesn't have a hook for that) and useParams in all places we need the params. I've checked all current usages of this hook in this PR and left a comment which one they actually need (query or params), so I couldn't find any use-case for this mix of both.

# Conflicts: # airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx # airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx # airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx # airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx

dizel852

Did a review, taking into account all comments from @timroes .
Code - LGTM.
Also tested locally - it seems like no regression.

@timroes need your final review/approve.

# Conflicts: # airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx # airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

timroes · 2022-08-30T22:33:43Z

airbyte-webapp/src/hooks/useRouter.tsx

@@ -1,39 +1,19 @@
 import queryString from "query-string";


Could we maybe rename this file to useQuery now, since it does not contain any hook named useRouter anymore.

timroes · 2022-08-30T22:37:04Z

airbyte-webapp/src/hooks/useRouter.tsx

+interface UseQueryResult {
+  from?: string;
+  id?: string;
+  mode?: string;
+  oobCode?: string;
+  order?: SortOrderEnum;
+  sortBy?: string;


Putting this into this central place does not feel like the best TypeScript solution. I'd suggest we instead make useQuery to take a generic parameter, which actually then will be the return type, so that every caller of useQuery will specify the parameters it knows exist on this page.

If we want to make it more "fail safe" here, and say we want to make sure that each of the parameters could still be undefined, we could still put this into the return type, i.e.

useQuery = <T>(): Partial<T> => {

Show 0 bytes for cancelled sync job

This reverts commit a462891.

…alue (#16096) Signed-off-by: Sergey Chvalyuk <grubberr@gmail.com>

* chore: cleanup dormant workflows * fix: restore performance test * fix: add back GKE acceptance test * ci: add cron to GKE Kube Acceptance Test

* added release notes file * changed file name * Added release notes * Edited formatting and links * Deleted extra lines and backticks * Deleted extra spaces Co-authored-by: Amruta Ranade <11484018+Amruta-Ranade@users.noreply.github.com>

Release name should have a dash instead of a period.

* enforce ssl in strict mysql and postgres source * Add test to verify tunnel aware strict SSL behavior * bump version numbers and changelogs * auto-bump connector version [ci skip] * auto-bump connector version [ci skip] Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com>

* Changed August to July in title, file, and sidebar * deleted extra spaces

CLAassistant · 2022-09-12T12:30:48Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
41 out of 42 committers have signed the CLA.

✅ timroes
✅ cgardens
✅ yurii-bidiuk
✅ jhajajaas
✅ grubberr
✅ Amruta-Ranade
✅ zzztimbo
✅ mlavoie-sm360
✅ ambirdsall
✅ evantahler
✅ edmundito
✅ alafanechere
✅ krishnaglick
✅ alexandr-shegeda
✅ etsybaev
✅ alovew
✅ girarda
✅ gosusnp
✅ tealjulia
✅ brianjlai
✅ pmossman
✅ lmossman
✅ subodh1810
✅ vladimir-remar
✅ bazarnov
✅ rileybrook
✅ DoNotPanicUA
✅ adamf
✅ arsenlosenko
✅ marcelopio
✅ Pwaldi
✅ xpuska513
✅ kimerinn
✅ sherifnada
✅ sophia-wiley
✅ davydov-d
✅ davinchia
✅ rodireich
✅ YatsukBogdan1
✅ michaeljguarino
✅ jonathanneo
❌ snyk-bot
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

krishnaglick · 2022-09-12T14:00:45Z

I feel like this has a bad merge from master going on.

YatsukBogdan1 · 2022-09-12T16:15:29Z

I feel like this has a bad merge from master going on.

yeah. I will create a new PR, since I am not sure how to restore this one

YatsukBogdan1 · 2022-09-12T16:20:52Z

created new pull request #16598

YatsukBogdan1 added 3 commits July 20, 2022 11:19

Removes useRouter hook

4c741bf

Merge branch 'master' into byatsuk/remove-use-router

8586ad6

Removes useRouter hook after merging master

a38a0ca

YatsukBogdan1 requested a review from a team as a code owner July 20, 2022 08:25

github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Jul 20, 2022

YatsukBogdan1 added 2 commits July 21, 2022 12:48

Merge branch 'master' into byatsuk/remove-use-router

d88be7f

Fixes linter error import order

6bbad52

timroes requested changes Jul 25, 2022

View reviewed changes

YatsukBogdan1 added 2 commits August 8, 2022 15:07

Removes params from useRouterQuery; Removes useRouterReplace hook

2e71956

YatsukBogdan1 requested a review from timroes August 8, 2022 12:42

dizel852 approved these changes Aug 8, 2022

View reviewed changes

YatsukBogdan1 and others added 3 commits August 29, 2022 19:12

Merge branch 'master' into byatsuk/remove-use-router

ab51b4a

# Conflicts: # airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx # airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

Merge branch 'master' into byatsuk/remove-use-router

12d058f

Merge branch 'master' into byatsuk/remove-use-router

2879d51

timroes changed the title ~~Byatsuk/remove use router~~ 🪟 🔧 Remove useRouter hook Aug 30, 2022

timroes reviewed Aug 30, 2022

View reviewed changes

robgleason and others added 11 commits August 30, 2022 22:31

Frontend: update AttemptDetails.tsx (#15795)

4892a08

Show 0 bytes for cancelled sync job

Revert "Use a valid pat for slash command dispatch (#16144)" (#16156)

2967dfa

This reverts commit a462891.

🐛 Source Facebook Marketing: remove "end_date" from config if empty v…

3ed7f75

…alue (#16096) Signed-off-by: Sergey Chvalyuk <grubberr@gmail.com>

Handle SQLSTATE Exception (08006) when reading records (#15869)

e560ed7

chore: cleanup dormant workflows (#16022)

cd2860f

* chore: cleanup dormant workflows * fix: restore performance test * fix: add back GKE acceptance test * ci: add cron to GKE Kube Acceptance Test

Release Note Documentation (#16148)

732ec3c

* added release notes file * changed file name * Added release notes * Edited formatting and links * Deleted extra lines and backticks * Deleted extra spaces Co-authored-by: Amruta Ranade <11484018+Amruta-Ranade@users.noreply.github.com>

Update august_2022.md

bef1269

Fixed release name

b9bba17

Release name should have a dash instead of a period.

Edited July Release Notes (#16179)

86a5f90

* Changed August to July in title, file, and sidebar * deleted extra spaces

Updated connector catalog page (#16181)

8998bad

YatsukBogdan1 added 2 commits September 12, 2022 15:37

Removes useRouter hook

857561d

Fixes linter error import order

f9abd90

YatsukBogdan1 changed the title ~~🪟 🔧 Remove useRouter hook~~ 🪟 🔧 Remove useRouter hook [to be closed] Sep 12, 2022

YatsukBogdan1 closed this Sep 12, 2022

edmundito mentioned this pull request Sep 12, 2022

🪟 🔧Remove useRouter hook #16598

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🔧 Remove useRouter hook [to be closed] #14869

🪟 🔧 Remove useRouter hook [to be closed] #14869

YatsukBogdan1 commented Jul 20, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

timroes Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

YatsukBogdan1 Aug 8, 2022

timroes Jul 25, 2022

YatsukBogdan1 Aug 8, 2022

dizel852 left a comment

timroes Aug 30, 2022

timroes Aug 30, 2022

CLAassistant commented Sep 12, 2022 •

edited

Loading

krishnaglick commented Sep 12, 2022

YatsukBogdan1 commented Sep 12, 2022

YatsukBogdan1 commented Sep 12, 2022


		export default useRouter;
		export const useRouterReplace = (): UseRouterReplaceInterface => {

🪟 🔧 Remove useRouter hook [to be closed] #14869

🪟 🔧 Remove useRouter hook [to be closed] #14869

Conversation

YatsukBogdan1 commented Jul 20, 2022

What

How

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dizel852 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CLAassistant commented Sep 12, 2022 • edited Loading

krishnaglick commented Sep 12, 2022

YatsukBogdan1 commented Sep 12, 2022

YatsukBogdan1 commented Sep 12, 2022

CLAassistant commented Sep 12, 2022 •

edited

Loading