next/router Router TypeScript Examples

Source File: _app.tsx From terraform-visual with MIT License

6 votes

C = ({ Component, pageProps }: any) => {
  const title = 'Terraform Visual'

  useEffect(() => {
    ReactGa.set({ page: window.location.pathname })
    ReactGa.pageview(window.location.pathname)

    Router.events.on('routeChangeComplete', () => {
      ReactGa.set({ page: window.location.pathname })
      ReactGa.pageview(window.location.pathname)
    })
  }, [])

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="og:title" content={title} key="title" />
        <meta
          name="google-site-verification"
          content="uP7DvoPqGNsHxvkVhK8aI0zizIHipI0LhZUueqfbG8Y"
        />
      </Head>

      <TerraofmrPlanProvider>
        <Navbar.C />

        <div className={styles.container}>
          <Component {...pageProps} />
        </div>
      </TerraofmrPlanProvider>
    </>
  )
}

Source File: _app.page.test.tsx From crowdsource-dataplatform with MIT License

5 votes

describe('App', () => {
  jestFetchMock.enableMocks();

  const setup = () => {
    router.pathname = '/tts-initiative/dashboard';
    const mockIpAddress = '111.111.11.111';

    fetchMock
      .doMockOnceIf('https://www.cloudflare.com/cdn-cgi/trace')
      .mockResponseOnce(`ip=${mockIpAddress}`);

    fetchMock.doMockIf(`/location-info?ip=${mockIpAddress}`).mockResponse(JSON.stringify({}));

    const Component = () => <div>Hello World</div>;

    return render(<App Component={Component} pageProps={{}} router={(router as unknown) as Router} />);
  };

  verifyAxeTest(setup());

  it('should render the Layout component', () => {
    setup();

    expect(screen.getByTestId('Layout')).toBeInTheDocument();
  });

  it('should render the passed component', () => {
    setup();

    expect(screen.getByText('Hello World')).toBeInTheDocument();
  });

  it('should render the Feedback component', () => {
    setup();

    expect(screen.getByText('Feedback')).toBeInTheDocument();
  });

  it('should render and close the language notification modal component', async () => {
    setup();

    const newValue = 'new value';
    const oldValue = 'old value';
    const localStorageKey = 'contributionLanguage';

    act(() => {
      const storageEvent = new StorageEvent('storage', {
        key: localStorageKey,
        newValue: newValue,
        oldValue: oldValue,
      });

      window.dispatchEvent(storageEvent);
    });

    expect(screen.getByTestId('Modal')).toBeInTheDocument();
  });
});

Source File: _app.tsx From Figurify with Apache License 2.0

5 votes

Router.events.on('routeChangeStart', () => NProgress.start());

Source File: _app.tsx From Figurify with Apache License 2.0

5 votes

Router.events.on('routeChangeComplete', () => NProgress.done());

Source File: _app.tsx From Figurify with Apache License 2.0

5 votes

Router.events.on('routeChangeError', () => NProgress.done());

Source File: _app.tsx From website with Apache License 2.0

5 votes

Router.events.on('routeChangeStart', () => NProgress.start());

Source File: _app.tsx From website with Apache License 2.0

5 votes

Router.events.on('routeChangeComplete', () => NProgress.done());

Source File: _app.tsx From website with Apache License 2.0

5 votes

Router.events.on('routeChangeError', () => NProgress.done());

Source File: _app.tsx From core with GNU Affero General Public License v3.0

5 votes

Router.events.on('routeChangeStart', NProgress.start)

Source File: _app.tsx From core with GNU Affero General Public License v3.0

5 votes

Router.events.on('routeChangeComplete', NProgress.done)

Source File: _app.tsx From core with GNU Affero General Public License v3.0

5 votes

Router.events.on('routeChangeError', NProgress.done)

Source File: redirects.ts From Cromwell with MIT License

4 votes

usePatchForRedirects = () => {
    // Patch next/router for rewrites
    const router = useRouter?.();
    const canLogDebugInfo = false;
    const logInfo = (...args) => canLogDebugInfo && console.log(...args);

    if (router && !(router as any).cromwellPatch) {
        (router as any).cromwellPatch = true;

        const handleChange = (url, as, options): [url: any, as?: any, options?: any] => {
            logInfo('router.push', url, as, options);
            if (typeof url === 'string') {
                const redirect = findRedirect(url);
                if (redirect?.type === 'rewrite' && redirect.from) {
                    logInfo('router.push rewrite', redirect);
                    if (!options) options = {};
                    (options as any).rewriteTo = url;
                    (options as any).rewriteFrom = redirect.from;

                    if (as && as === url) as = redirect.from;
                    url = redirect.from;
                }
            }
            return [url, as, options];
        }

        const routerPush = router.push;
        router.push = (url, as, options) => {
            return routerPush(...handleChange(url, as, options));
        }

        const routerReplace = router.replace;
        router.replace = (url, as, options) => {
            return routerReplace(...handleChange(url, as, options));
        }

        if (SingletonRouter?.router) {
            (SingletonRouter.router as any).change = (changeType, url, as, options) => {
                logInfo('SingletonRouter args', changeType, url, as, options);
                const { rewriteFrom, rewriteTo, rewrote, ...normalOptions } = options ?? {};

                if (!rewrote) {
                    const nextUrl = rewriteTo ?? as ?? url;
                    const redirect = findRedirect(nextUrl);

                    if (redirect?.type === 'rewrite' && redirect.from) {
                        logInfo('SingletonRouter rewrite', rewriteFrom, rewriteTo);
                        normalOptions.rewriteTo = nextUrl;
                        normalOptions.rewrote = true;

                        if (changeType === 'pushState') {
                            routerPush(redirect.from, undefined, normalOptions);
                        } else {
                            routerReplace(redirect.from, undefined, normalOptions);
                        }

                        return new Promise((resolve) => resolve(false));
                    }
                }
                return (Router.prototype as any).change.apply(SingletonRouter.router, [changeType, url, as, options]);
            }
        }
    }

    if (!isServer()) {
        (window as any).routerPush = (...args) => router.push(args[0], args[1], args[2]);
        (window as any).nextRouter = getStore().nodeModules?.modules?.['next/router'];
    }


    // Patch window.history to handle rewrites
    if (!isServer() && !(window as any).cromwellHistoryPatch) {
        (window as any).cromwellHistoryPatch = true;

        const handleChange = (data: any, title: string, url?: string | null | undefined):
            [data: any, title: string, url?: string | null | undefined] => {
            const rewriteTo = data?.options?.rewriteTo;
            if (rewriteTo) {
                logInfo('history.pushState/replaceState rewrite', rewriteTo);
                if (data?.as && data.as === url) data.as = rewriteTo;
                if (data?.url && data.url === url) data.url = rewriteTo;
                url = rewriteTo;
            }
            return [data, title, url];
        }

        const pushState = history.pushState;
        history.pushState = (...params) => {
            logInfo('history.pushState params', params)
            pushState.apply(history, handleChange(...params));
        };

        const replaceState = history.replaceState;
        history.replaceState = (...params) => {
            logInfo('history.replaceState params', params)
            replaceState.apply(history, handleChange(...params));
        };
    }

    // Handle redirects
    if (!isServer()) {
        useLayoutEffect(() => {
            const redirect = findRedirect(window.location.pathname, window.location.search);
            if (redirect?.type === 'redirect' && redirect.to) {
                logInfo('useLayoutEffect redirect', redirect, router?.route)
                router?.replace(redirect.to);
            }
        });
    }
}

Source File: StudentQueue.tsx From office-hours with GNU General Public License v3.0

4 votes

export default function StudentQueue({
  qid,
  cid,
}: StudentQueueProps): ReactElement {
  const { queue } = useQueue(qid);
  const { questions, mutateQuestions } = useQuestions(qid);
  const { studentQuestion, studentQuestionIndex } = useStudentQuestion(qid);
  const [isFirstQuestion, setIsFirstQuestion] = useLocalStorage(
    "isFirstQuestion",
    true
  );
  const [showJoinPopconfirm, setShowJoinPopconfirm] = useState(false);
  const { deleteDraftQuestion } = useDraftQuestion();
  const [isJoining, setIsJoining] = useState(
    questions &&
      studentQuestion &&
      studentQuestion?.status !== OpenQuestionStatus.Queued
  );
  const [popupEditQuestion, setPopupEditQuestion] = useState(false);

  const router = useRouter();
  const editQuestionQueryParam = Boolean(router.query.edit_question as string);

  useEffect(() => {
    if (editQuestionQueryParam && studentQuestion) {
      mutate(`/api/v1/queues/${qid}/questions`);
      setPopupEditQuestion(true);
      router.push(`/course/${cid}/queue/${qid}`);
    }
  }, [editQuestionQueryParam, qid, studentQuestion]);

  const studentQuestionId = studentQuestion?.id;
  const studentQuestionStatus = studentQuestion?.status;
  const leaveQueue = useCallback(async () => {
    await API.questions.update(studentQuestionId, {
      status: ClosedQuestionStatus.ConfirmedDeleted,
    });

    setIsJoining(false);
    await mutateQuestions();
  }, [mutateQuestions, studentQuestionId]);

  const rejoinQueue = useCallback(async () => {
    await API.questions.update(studentQuestionId, {
      status: OpenQuestionStatus.PriorityQueued,
    });
    await mutateQuestions();
  }, [mutateQuestions, studentQuestionId]);

  const finishQuestion = useCallback(
    async (text: string, questionType: QuestionType, groupable: boolean) => {
      const updateStudent = {
        text,
        questionType,
        groupable,
        status:
          studentQuestionStatus === OpenQuestionStatus.Drafting
            ? OpenQuestionStatus.Queued
            : studentQuestionStatus,
      };

      const updatedQuestionFromStudent = await API.questions.update(
        studentQuestionId,
        updateStudent
      );

      const newQuestionsInQueue = questions?.queue?.map((question: Question) =>
        question.id === studentQuestionId
          ? updatedQuestionFromStudent
          : question
      );

      // questions are the old questions and newQuestionsInQueue are questions that've been added since.
      mutateQuestions({
        ...questions,
        yourQuestion: updatedQuestionFromStudent,
        queue: newQuestionsInQueue,
      });
    },
    [studentQuestionStatus, studentQuestionId, questions, mutateQuestions]
  );

  const joinQueueAfterDeletion = useCallback(async () => {
    await API.questions.update(studentQuestion?.id, {
      status: ClosedQuestionStatus.ConfirmedDeleted,
    });
    await mutateQuestions();
    const newQuestion = await API.questions.create({
      text: studentQuestion.text,
      questionType: studentQuestion?.questionType,
      queueId: qid,
      location: studentQuestion?.location,
      force: true,
      groupable: false,
    });
    await API.questions.update(newQuestion.id, {
      status: OpenQuestionStatus.Queued,
    });
    await mutateQuestions();
  }, [mutateQuestions, qid, studentQuestion]);

  const openEditModal = useCallback(async () => {
    mutate(`/api/v1/queues/${qid}/questions`);
    setPopupEditQuestion(true);
  }, [qid]);

  const closeEditModal = useCallback(() => {
    setPopupEditQuestion(false);
    setIsJoining(false);
  }, []);

  const leaveQueueAndClose = useCallback(() => {
    //delete draft when they leave the queue
    deleteDraftQuestion();
    leaveQueue();
    closeEditModal();
  }, [deleteDraftQuestion, leaveQueue, closeEditModal]);

  const joinQueueOpenModal = useCallback(
    async (force: boolean) => {
      try {
        const createdQuestion = await API.questions.create({
          queueId: Number(qid),
          text: "",
          force: force,
          questionType: null,
          groupable: false,
        });
        const newQuestionsInQueue = [...questions?.queue, createdQuestion];
        await mutateQuestions({ ...questions, queue: newQuestionsInQueue });
        setPopupEditQuestion(true);
        return true;
      } catch (e) {
        if (
          e.response?.data?.message?.includes(
            ERROR_MESSAGES.questionController.createQuestion.oneQuestionAtATime
          )
        ) {
          return false;
        }
        return true;
        // TODO: how should we handle error that happens for another reason?
      }
    },
    [mutateQuestions, qid, questions]
  );

  const finishQuestionAndClose = useCallback(
    (
      text: string,
      qt: QuestionType,
      groupable: true,
      router: Router,
      cid: number
    ) => {
      deleteDraftQuestion();
      finishQuestion(text, qt, groupable);
      closeEditModal();
      if (isFirstQuestion) {
        notification.warn({
          style: { cursor: "pointer" },
          message: "Enable Notifications",
          className: "hide-in-percy",
          description:
            "Turn on notifications for when it's almost your turn to get help.",
          placement: "bottomRight",
          duration: 0,
          onClick: () => {
            notification.destroy();
            setIsFirstQuestion(false);
            router.push(`/settings?cid=${cid}`);
          },
        });
      }
    },
    [
      deleteDraftQuestion,
      finishQuestion,
      closeEditModal,
      isFirstQuestion,
      setIsFirstQuestion,
    ]
  );

  useHotkeys(
    "shift+e",
    () => {
      if (studentQuestion) {
        openEditModal();
      }
    },
    [studentQuestion]
  );

  useHotkeys(
    "shift+n",
    () => {
      if (!studentQuestion && queue?.allowQuestions && !queue?.isDisabled) {
        joinQueueOpenModal(false).then((res) => setShowJoinPopconfirm(!res));
      }
    },
    [studentQuestion, queue]
  );

  if (queue && questions) {
    if (!queue.isOpen) {
      return <h1 style={{ marginTop: "50px" }}>The Queue is Closed!</h1>;
    }
    return (
      <>
        <Container>
          <CantFindModal
            visible={studentQuestion?.status === LimboQuestionStatus.CantFind}
            leaveQueue={leaveQueue}
            rejoinQueue={rejoinQueue}
          />
          <StudentRemovedFromQueueModal
            question={studentQuestion}
            leaveQueue={leaveQueue}
            joinQueue={joinQueueAfterDeletion}
          />
          <QueueInfoColumn
            queueId={qid}
            isStaff={false}
            buttons={
              !studentQuestion && (
                <Popconfirm
                  title={
                    <PopConfirmTitle>
                      You already have a question in a queue for this course, so
                      your previous question will be deleted in order to join
                      this queue. Do you want to continue?
                    </PopConfirmTitle>
                  }
                  onConfirm={() => joinQueueOpenModal(true)}
                  okText="Yes"
                  cancelText="No"
                  disabled
                  visible={showJoinPopconfirm}
                  onVisibleChange={setShowJoinPopconfirm}
                >
                  <JoinButton
                    type="primary"
                    disabled={!queue?.allowQuestions || queue?.isDisabled}
                    data-cy="join-queue-button"
                    onClick={async () =>
                      setShowJoinPopconfirm(!(await joinQueueOpenModal(false)))
                    }
                  >
                    Join Queue
                  </JoinButton>
                </Popconfirm>
              )
            }
          />
          <VerticalDivider />
          <QueueListContainer>
            {studentQuestion && (
              <>
                <StudentBanner
                  queueId={qid}
                  editQuestion={openEditModal}
                  leaveQueue={leaveQueue}
                />
                <div style={{ marginTop: "40px" }} />
              </>
            )}
            <QueueQuestions
              questions={questions?.queue}
              studentQuestion={studentQuestion}
            />
          </QueueListContainer>
        </Container>

        <QuestionForm
          visible={
            (questions && !studentQuestion && isJoining) ||
            // && studentQuestion.status !== QuestionStatusKeys.Drafting)
            popupEditQuestion
          }
          question={studentQuestion}
          leaveQueue={leaveQueueAndClose}
          finishQuestion={finishQuestionAndClose}
          position={studentQuestionIndex + 1}
          cancel={closeEditModal}
        />
      </>
    );
  } else {
    return <div />;
  }
}

next/router#Router TypeScript Examples