@reach/router#useNavigate TypeScript Examples

Recents = () => {
  const [recents, setRecents] = useState<ViewerFile[]>();
  const navigate = useNavigate();
  const userSettings = useContext(SettingsContext);

  useEffect(() => {
    if (userSettings.settings?.recents) {
      setRecents(userSettings.settings?.recents.slice(0, 5) || []);
    }
  }, [userSettings]);

  const openFile = async (filePath?: string) => {
    await navigate(`/viewer`, { state: { filePath } });
  };

  return (
    <nav>
      {recents?.map((recent) => {
        let displayValue = recent.displayName;
        // limit display value to 25 chars
        if (displayValue.length > 25) {
          displayValue = `${displayValue.substr(0, 25)}...`;
        }
        return (
          <span key={recent.path} onClick={() => openFile(recent.path)}>
            {displayValue}
          </span>
        );
      })}
    </nav>
  );
}

HomeRoute = ({}: RouteComponentProps) => {
  const navigate = useNavigate();
  const userSettings = useContext(SettingsContext);

  useEffect(() => {
    // must be initialized here (child of the Router) in order to use the navigate function
    ITwinViewerApp.initializeMenuListeners(navigate, userSettings);
  }, []);

  return <Home />;
}

Recents = () => {
  const [recents, setRecents] = useState<ViewerFile[]>();
  const navigate = useNavigate();
  const userSettings = useContext(SettingsContext);

  useEffect(() => {
    if (userSettings.settings?.recents) {
      setRecents(userSettings.settings?.recents.slice(0, 5) || []);
    }
  }, [userSettings]);

  const openFile = async (filePath?: string) => {
    await navigate(`/viewer`, { state: { filePath } });
  };

  return (
    <nav>
      {recents?.map((recent) => {
        let displayValue = recent.displayName;
        // limit display value to 25 chars
        if (displayValue.length > 25) {
          displayValue = `${displayValue.substr(0, 25)}...`;
        }
        return (
          <span key={recent.path} onClick={() => openFile(recent.path)}>
            {displayValue}
          </span>
        );
      })}
    </nav>
  );
}

HomeRoute = ({}: RouteComponentProps) => {
  const navigate = useNavigate();
  const userSettings = useContext(SettingsContext);

  useEffect(() => {
    // must be initialized here (child of the Router) in order to use the navigate function
    ITwinViewerApp.initializeMenuListeners(navigate, userSettings);
  }, []);

  return <Home />;
}

Home = () => {
  const navigate = useNavigate();
  const [learnLinks, setLearnLinks] = useState<LearnLink[]>([]);
  const [linkClass, setLinkClass] = useState<string>();
  const userSettings = useContext(SettingsContext);
  const connectivityStatus = useConnectivity();

  useEffect(() => {
    void fetch("./links.json").then((response) => {
      if (response.status >= 200 && response.status < 300) {
        void response.json().then((links) => {
          setLearnLinks(links);
        });
      }
    });
  }, []);

  useEffect(() => {
    setLinkClass(
      connectivityStatus === InternetConnectivityStatus.Offline
        ? "disabled-link"
        : ""
    );
  }, [connectivityStatus]);

  const openFile = async () => {
    const filePath = await ITwinViewerApp.getFile();
    if (filePath) {
      void userSettings.addRecent(filePath);
      void navigate("/viewer", { state: { filePath } });
    }
  };

  return (
    <div>
      <Headline className="home-title">iTwin Viewer for Desktop</Headline>
      <div className="home">
        <div className="home-section start">
          <Title> {ITwinViewerApp.translate("home.start")}</Title>
          <nav>
            <div>
              <SvgFolderOpened />
              <span onClick={openFile}>{ITwinViewerApp.translate("open")}</span>
            </div>
            <div>
              <SvgImodel className={linkClass} />
              <Link to="itwins" className={linkClass}>
                {ITwinViewerApp.translate("download")}
              </Link>
            </div>
          </nav>
        </div>
        <div className="home-section learn">
          <Title> {ITwinViewerApp.translate("home.learn")}</Title>
          {learnLinks.map((link) => {
            return (
              <Blockquote key={link.url}>
                <a
                  href={link.url}
                  target="_blank"
                  rel="noreferrer"
                  className={linkClass}
                >
                  {ITwinViewerApp.translate(link.textKey)}
                </a>
              </Blockquote>
            );
          })}
        </div>
        <div className="home-section recent">
          <Title>{ITwinViewerApp.translate("home.openRecent")}</Title>
          <Recents />
        </div>
      </div>
    </div>
  );
}

SelectIModel = ({
  accessToken,
  projectId: iTwinId,
  projectName,
}: SelectIModelProps) => {
  const navigate = useNavigate();
  const userSettings = useContext(SettingsContext);
  const modelContext = useContext(IModelContext);

  const selectIModel = async (iModel: IModelFull) => {
    if (modelContext.pendingIModel) {
      // there is already a pending selection. disallow
      return;
    }
    const recents = userSettings.settings.recents;
    if (recents) {
      const local = recents.find((recent) => {
        return (
          recent.iTwinId === iModel.projectId && recent.iModelId === iModel.id
        );
      });
      if (local?.path) {
        // already downloaded, navigate
        void navigate("/viewer", { state: { filePath: local.path } });
        return;
      }
    }
    // trigger a download/view
    modelContext.setPendingIModel(iModel.id);
  };

  return (
    <div className="itv-scrolling-container select-imodel">
      <div className={"itv-content-margins"}>
        <Title>{`iModels for ${projectName}`}</Title>
      </div>
      <div className="itv-scrolling-content">
        <IModelGrid
          accessToken={accessToken}
          projectId={iTwinId}
          onThumbnailClick={selectIModel}
          useIndividualState={useProgressIndicator}
        />
      </div>
    </div>
  );
}

SelectProject = () => {
  const [projectType, setProjectType] = useState(() =>
    PROJECT_TYPE_MAP.includes(window.location.search)
      ? PROJECT_TYPE_MAP.indexOf(window.location.search)
      : 0
  );

  const [searchValue, setSearchValue] = React.useState("");
  const [searchParam, setSearchParam] = React.useState("");
  const startSearch = React.useCallback(() => {
    setSearchParam(searchValue);
  }, [searchValue]);
  const accessToken = useAccessToken();
  const navigate = useNavigate();

  return accessToken ? (
    <>
      <div className="itv-scrolling-container select-project">
        <HorizontalTabs
          labels={tabsWithIcons}
          onTabSelected={setProjectType}
          activeIndex={projectType}
          type={"borderless"}
          contentClassName="grid-holding-tab"
          tabsClassName="grid-holding-tabs"
        >
          <div className={"title-section"}>
            <div className={"inline-input-with-button"}>
              <LabeledInput
                label={"Search"}
                placeholder={"Will search in name or number"}
                displayStyle={"inline"}
                value={searchValue}
                onChange={(event) => {
                  const {
                    target: { value },
                  } = event;
                  setSearchValue(value);
                }}
                onKeyDown={(event) => {
                  if (event.key === "Enter") {
                    startSearch();
                  }
                  if (event.key === "Escape") {
                    setSearchValue("");
                    setSearchParam("");
                  }
                }}
              />
              <IconButton onClick={startSearch}>
                <SvgSearch />
              </IconButton>
            </div>
          </div>
          <div className="itv-scrolling-content">
            <ProjectGrid
              accessToken={accessToken}
              requestType={
                projectType === 0
                  ? "favorites"
                  : projectType === 1
                  ? "recents"
                  : (searchParam as any) ?? ""
              }
              onThumbnailClick={(project) => {
                void navigate(`itwins/${project.id}`, {
                  state: { projectName: project.displayName },
                });
              }}
              stringsOverrides={{ noIModels: "No projects found" } as any}
              filterOptions={searchParam}
            />
          </div>
        </HorizontalTabs>
      </div>
    </>
  ) : (
    <SignIn />
  );
}

useProgressIndicator = (iModel: IModelFull) => {
  const userSettings = useContext(SettingsContext);
  const [status, setStatus] = useState<ModelStatus>();
  const [briefcase, setBriefcase] = useState<BriefcaseConnection>();
  const modelContext = useContext(IModelContext);
  const navigate = useNavigate();

  /**
   * Get the local file from settings
   * @returns
   */
  const getLocal = useCallback(() => {
    const recents = userSettings.settings.recents;
    if (recents) {
      return recents.find((recent) => {
        return (
          recent.iTwinId === iModel.projectId && recent.iModelId === iModel.id
        );
      });
    }
  }, [userSettings]);

  const getBriefcase = useCallback(async () => {
    // if there is a local file, open a briefcase connection and store it in state
    const local = getLocal();
    if (local?.path) {
      const connection = await BriefcaseConnection.openFile({
        fileName: local.path,
        readonly: true,
      });
      setBriefcase(connection);
    } else {
      setStatus(ModelStatus.ONLINE);
    }
  }, []);

  const { progress, doDownload } = useDownload(
    iModel.id,
    iModel.name ?? iModel.id,
    iModel.projectId ?? ""
  );

  const getLatestChangesets = useCallback(async () => {
    if (briefcase) {
      await briefcase.pullChanges();
    }
  }, [briefcase]);

  const startDownload = useCallback(async () => {
    try {
      setStatus(ModelStatus.DOWNLOADING);
      const fileName = await doDownload();
      if (fileName) {
        setStatus(ModelStatus.UPTODATE);
      } else {
        setStatus(ModelStatus.ONLINE);
      }
      return fileName;
    } catch (error) {
      console.log(error);
      setStatus(ModelStatus.ERROR);
    }
  }, []);

  const mergeChanges = useCallback(() => {
    setStatus(ModelStatus.MERGING);
  }, []);

  useEffect(() => {
    if (status === ModelStatus.MERGING) {
      getLatestChangesets()
        .then(() => {
          setStatus(ModelStatus.UPTODATE);
        })
        .catch((error) => {
          console.error(error);
          setStatus(ModelStatus.ERROR);
        });
    }
  }, [status]);

  useEffect(() => {
    if (!briefcase) {
      void getBriefcase();
    }
    return () => {
      if (briefcase) {
        void briefcase.close();
      }
    };
  }, [briefcase]);

  useEffect(() => {
    if (modelContext.pendingIModel === iModel.id) {
      void startDownload().then((filePath) => {
        modelContext.setPendingIModel(undefined);
        if (filePath) {
          void navigate("/viewer", { state: { filePath } });
        }
      });
    }
  }, [modelContext.pendingIModel]);

  useEffect(() => {
    if (briefcase) {
      void getBriefcaseStatus(briefcase).then((briefcaseStatus) => {
        setStatus(briefcaseStatus);
      });
    }
  }, [briefcase]);

  const tileProps = useMemo<Partial<TileProps>>(() => {
    return {
      metadata: (
        <div
          style={{
            width: "100%",
            justifyContent: "flex-end",
            display: "flex",
          }}
        >
          <BriefcaseStatus
            mergeStatus={status}
            mergeProgress={progress}
            onMergeClick={mergeChanges}
            onDownloadClick={startDownload}
          />
        </div>
      ),
    };
  }, [progress, status]);
  return { tileProps };
}