ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use named constants for settings URL query params (#3333)

Browse Source
This commit is contained in:
Frank Noirot
2024-08-09 02:47:25 -04:00
committed by GitHub
parent 11a94cc99e
commit a503d1ce50
23 changed files with 106 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -9,7 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook'
import { getNormalisedCoordinates } from './lib/utils' import { getNormalisedCoordinates } from './lib/utils'
import { useLoaderData, useNavigate } from 'react-router-dom' import { useLoaderData, useNavigate } from 'react-router-dom'
import { type IndexLoaderData } from 'lib/types' import { type IndexLoaderData } from 'lib/types'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext' import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { onboardingPaths } from 'routes/Onboarding/paths' import { onboardingPaths } from 'routes/Onboarding/paths'
import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions' import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
@ -28,7 +28,7 @@ import { CoreDumpManager } from 'lib/coredump'
import { UnitsMenu } from 'components/UnitsMenu' import { UnitsMenu } from 'components/UnitsMenu'
export function App() { export function App() {
useRefreshSettings(paths.FILE + 'SETTINGS') useRefreshSettings(PATHS.FILE + 'SETTINGS')
const { project, file } = useLoaderData() as IndexLoaderData const { project, file } = useLoaderData() as IndexLoaderData
const navigate = useNavigate() const navigate = useNavigate()
const filePath = useAbsoluteFilePath() const filePath = useAbsoluteFilePath()
@ -63,7 +63,7 @@ export function App() {
}) })
useHotkeyWrapper( useHotkeyWrapper(
[isTauri() ? 'mod + ,' : 'shift + mod + ,'], [isTauri() ? 'mod + ,' : 'shift + mod + ,'],
() => navigate(filePath + paths.SETTINGS), () => navigate(filePath + PATHS.SETTINGS),
{ {
splitKey: '|', splitKey: '|',
} }

32
src/Router.tsx
View File

@ -20,7 +20,7 @@ import { WasmErrBanner } from 'components/WasmErrBanner'
import { CommandBar } from 'components/CommandBar/CommandBar' import { CommandBar } from 'components/CommandBar/CommandBar'
import ModelingMachineProvider from 'components/ModelingMachineProvider' import ModelingMachineProvider from 'components/ModelingMachineProvider'
import FileMachineProvider from 'components/FileMachineProvider' import FileMachineProvider from 'components/FileMachineProvider'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { import {
fileLoader, fileLoader,
homeLoader, homeLoader,
@ -45,7 +45,7 @@ import { AppStateProvider } from 'AppState'
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
loader: settingsLoader, loader: settingsLoader,
id: paths.INDEX, id: PATHS.INDEX,
/* Make sure auth is the outermost provider or else we will have /* Make sure auth is the outermost provider or else we will have
* inefficient re-renders, use the react profiler to see. */ * inefficient re-renders, use the react profiler to see. */
element: ( element: (
@ -64,7 +64,7 @@ const router = createBrowserRouter([
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
children: [ children: [
{ {
path: paths.INDEX, path: PATHS.INDEX,
loader: async () => { loader: async () => {
const inTauri = isTauri() const inTauri = isTauri()
if (inTauri) { if (inTauri) {
@ -78,21 +78,21 @@ const router = createBrowserRouter([
// Redirect to the file if we have a file path. // Redirect to the file if we have a file path.
if (appState.current_file) { if (appState.current_file) {
return redirect( return redirect(
paths.FILE + '/' + encodeURIComponent(appState.current_file) PATHS.FILE + '/' + encodeURIComponent(appState.current_file)
) )
} }
} }
} }
return inTauri return inTauri
? redirect(paths.HOME) ? redirect(PATHS.HOME)
: redirect(paths.FILE + '/%2F' + BROWSER_PROJECT_NAME) : redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
}, },
}, },
{ {
loader: fileLoader, loader: fileLoader,
id: paths.FILE, id: PATHS.FILE,
path: paths.FILE + '/:id', path: PATHS.FILE + '/:id',
element: ( element: (
<Auth> <Auth>
<FileMachineProvider> <FileMachineProvider>
@ -109,7 +109,7 @@ const router = createBrowserRouter([
), ),
children: [ children: [
{ {
id: paths.FILE + 'SETTINGS', id: PATHS.FILE + 'SETTINGS',
loader: settingsLoader, loader: settingsLoader,
children: [ children: [
{ {
@ -118,11 +118,11 @@ const router = createBrowserRouter([
element: <></>, element: <></>,
}, },
{ {
path: makeUrlPathRelative(paths.SETTINGS), path: makeUrlPathRelative(PATHS.SETTINGS),
element: <Settings />, element: <Settings />,
}, },
{ {
path: makeUrlPathRelative(paths.ONBOARDING.INDEX), path: makeUrlPathRelative(PATHS.ONBOARDING.INDEX),
element: <Onboarding />, element: <Onboarding />,
children: onboardingRoutes, children: onboardingRoutes,
}, },
@ -131,7 +131,7 @@ const router = createBrowserRouter([
], ],
}, },
{ {
path: paths.HOME, path: PATHS.HOME,
element: ( element: (
<Auth> <Auth>
<Outlet /> <Outlet />
@ -139,24 +139,24 @@ const router = createBrowserRouter([
<CommandBar /> <CommandBar />
</Auth> </Auth>
), ),
id: paths.HOME, id: PATHS.HOME,
loader: homeLoader, loader: homeLoader,
children: [ children: [
{ {
index: true, index: true,
element: <></>, element: <></>,
id: paths.HOME + 'SETTINGS', id: PATHS.HOME + 'SETTINGS',
loader: settingsLoader, loader: settingsLoader,
}, },
{ {
path: makeUrlPathRelative(paths.SETTINGS), path: makeUrlPathRelative(PATHS.SETTINGS),
loader: settingsLoader, loader: settingsLoader,
element: <Settings />, element: <Settings />,
}, },
], ],
}, },
{ {
path: paths.SIGN_IN, path: PATHS.SIGN_IN,
element: <SignIn />, element: <SignIn />,
}, },
], ],

6
src/components/ActionButton.tsx
View File

@ -1,6 +1,6 @@
import { ActionIcon, ActionIconProps } from './ActionIcon' import { ActionIcon, ActionIconProps } from './ActionIcon'
import React, { ForwardedRef, forwardRef } from 'react' import React, { ForwardedRef, forwardRef } from 'react'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import type { LinkProps } from 'react-router-dom' import type { LinkProps } from 'react-router-dom'
@ -82,7 +82,7 @@ export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
return ( return (
<Link <Link
ref={ref as ForwardedRef<HTMLAnchorElement>} ref={ref as ForwardedRef<HTMLAnchorElement>}
to={to || paths.INDEX} to={to || PATHS.INDEX}
className={classNames} className={classNames}
{...rest} {...rest}
> >
@ -105,7 +105,7 @@ export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
return ( return (
<Link <Link
ref={ref as ForwardedRef<HTMLAnchorElement>} ref={ref as ForwardedRef<HTMLAnchorElement>}
to={to || paths.INDEX} to={to || PATHS.INDEX}
className={classNames} className={classNames}
{...rest} {...rest}
target="_blank" target="_blank"

14
src/components/FileMachineProvider.tsx
View File

@ -1,7 +1,7 @@
import { useMachine } from '@xstate/react' import { useMachine } from '@xstate/react'
import { useNavigate, useRouteLoaderData } from 'react-router-dom' import { useNavigate, useRouteLoaderData } from 'react-router-dom'
import { type IndexLoaderData } from 'lib/types' import { type IndexLoaderData } from 'lib/types'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import React, { createContext } from 'react' import React, { createContext } from 'react'
import { toast } from 'react-hot-toast' import { toast } from 'react-hot-toast'
import { import {
@ -38,7 +38,7 @@ export const FileMachineProvider = ({
}) => { }) => {
const navigate = useNavigate() const navigate = useNavigate()
const { commandBarSend } = useCommandsContext() const { commandBarSend } = useCommandsContext()
const { project, file } = useRouteLoaderData(paths.FILE) as IndexLoaderData const { project, file } = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
const [state, send] = useMachine(fileMachine, { const [state, send] = useMachine(fileMachine, {
context: { context: {
@ -50,7 +50,7 @@ export const FileMachineProvider = ({
if (event.data && 'name' in event.data) { if (event.data && 'name' in event.data) {
commandBarSend({ type: 'Close' }) commandBarSend({ type: 'Close' })
navigate( navigate(
`${paths.FILE}/${encodeURIComponent( `${PATHS.FILE}/${encodeURIComponent(
context.selectedDirectory + sep() + event.data.name context.selectedDirectory + sep() + event.data.name
)}` )}`
) )
@ -60,7 +60,7 @@ export const FileMachineProvider = ({
event.data.path.endsWith(FILE_EXT) event.data.path.endsWith(FILE_EXT)
) { ) {
// Don't navigate to newly created directories // Don't navigate to newly created directories
navigate(`${paths.FILE}/${encodeURIComponent(event.data.path)}`) navigate(`${PATHS.FILE}/${encodeURIComponent(event.data.path)}`)
} }
}, },
addFileToRenamingQueue: assign({ addFileToRenamingQueue: assign({
@ -130,11 +130,11 @@ export const FileMachineProvider = ({
if (oldPath === file?.path && project?.path) { if (oldPath === file?.path && project?.path) {
// If we just renamed the current file, navigate to the new path // If we just renamed the current file, navigate to the new path
navigate(paths.FILE + '/' + encodeURIComponent(newPath)) navigate(PATHS.FILE + '/' + encodeURIComponent(newPath))
} else if (file?.path.includes(oldPath)) { } else if (file?.path.includes(oldPath)) {
// If we just renamed a directory that the current file is in, navigate to the new path // If we just renamed a directory that the current file is in, navigate to the new path
navigate( navigate(
paths.FILE + PATHS.FILE +
'/' + '/' +
encodeURIComponent(file.path.replace(oldPath, newDirPath)) encodeURIComponent(file.path.replace(oldPath, newDirPath))
) )
@ -169,7 +169,7 @@ export const FileMachineProvider = ({
file?.path.includes(event.data.path)) && file?.path.includes(event.data.path)) &&
project?.path project?.path
) { ) {
navigate(paths.FILE + '/' + encodeURIComponent(project.path)) navigate(PATHS.FILE + '/' + encodeURIComponent(project.path))
} }
return `Successfully deleted ${isDir ? 'folder' : 'file'} "${ return `Successfully deleted ${isDir ? 'folder' : 'file'} "${

6
src/components/FileTree.tsx
View File

@ -1,5 +1,5 @@
import type { FileEntry, IndexLoaderData } from 'lib/types' import type { FileEntry, IndexLoaderData } from 'lib/types'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { ActionButton } from './ActionButton' import { ActionButton } from './ActionButton'
import Tooltip from './Tooltip' import Tooltip from './Tooltip'
import { Dispatch, useCallback, useEffect, useRef, useState } from 'react' import { Dispatch, useCallback, useEffect, useRef, useState } from 'react'
@ -187,7 +187,7 @@ const FileTreeItem = ({
onFileOpen(fileOrDir.path, project?.path || null) onFileOpen(fileOrDir.path, project?.path || null)
// Open kcl files // Open kcl files
navigate(`${paths.FILE}/${encodeURIComponent(fileOrDir.path)}`) navigate(`${PATHS.FILE}/${encodeURIComponent(fileOrDir.path)}`)
} }
onNavigateToFile?.() onNavigateToFile?.()
} }
@ -447,7 +447,7 @@ export const FileTreeInner = ({
}: { }: {
onNavigateToFile?: () => void onNavigateToFile?: () => void
}) => { }) => {
const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
const { send: fileSend, context: fileContext } = useFileContext() const { send: fileSend, context: fileContext } = useFileContext()
const { send: modelingSend } = useModelingContext() const { send: modelingSend } = useModelingContext()
const documentHasFocus = useDocumentHasFocus() const documentHasFocus = useDocumentHasFocus()

14
src/components/HelpMenu.tsx
View File

@ -4,7 +4,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { CustomIcon } from './CustomIcon' import { CustomIcon } from './CustomIcon'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { createAndOpenNewProject } from 'lib/tauriFS' import { createAndOpenNewProject } from 'lib/tauriFS'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath' import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
import { useLspContext } from './LspProvider' import { useLspContext } from './LspProvider'
@ -16,7 +16,7 @@ export function HelpMenu(props: React.PropsWithChildren) {
const location = useLocation() const location = useLocation()
const { onProjectOpen } = useLspContext() const { onProjectOpen } = useLspContext()
const filePath = useAbsoluteFilePath() const filePath = useAbsoluteFilePath()
const isInProject = location.pathname.includes(paths.FILE) const isInProject = location.pathname.includes(PATHS.FILE)
const navigate = useNavigate() const navigate = useNavigate()
const { settings } = useSettingsAuthContext() const { settings } = useSettingsAuthContext()
@ -89,10 +89,10 @@ export function HelpMenu(props: React.PropsWithChildren) {
<HelpMenuItem <HelpMenuItem
as="button" as="button"
onClick={() => { onClick={() => {
const targetPath = location.pathname.includes(paths.FILE) const targetPath = location.pathname.includes(PATHS.FILE)
? filePath + paths.SETTINGS ? filePath + PATHS.SETTINGS_KEYBINDINGS
: paths.HOME + paths.SETTINGS : PATHS.HOME + PATHS.SETTINGS_KEYBINDINGS
navigate(targetPath + '?tab=keybindings') navigate(targetPath)
}} }}
> >
Keyboard shortcuts Keyboard shortcuts
@ -108,7 +108,7 @@ export function HelpMenu(props: React.PropsWithChildren) {
}, },
}) })
if (isInProject) { if (isInProject) {
navigate(filePath + paths.ONBOARDING.INDEX) navigate(filePath + PATHS.ONBOARDING.INDEX)
} else { } else {
createAndOpenNewProject({ onProjectOpen, navigate }) createAndOpenNewProject({ onProjectOpen, navigate })
} }

8
src/components/LowerRightControls.tsx
View File

@ -1,7 +1,7 @@
import { APP_VERSION } from 'routes/Settings' import { APP_VERSION } from 'routes/Settings'
import { CustomIcon } from 'components/CustomIcon' import { CustomIcon } from 'components/CustomIcon'
import Tooltip from 'components/Tooltip' import Tooltip from 'components/Tooltip'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { NetworkHealthIndicator } from 'components/NetworkHealthIndicator' import { NetworkHealthIndicator } from 'components/NetworkHealthIndicator'
import { HelpMenu } from './HelpMenu' import { HelpMenu } from './HelpMenu'
import { Link, useLocation } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
@ -87,9 +87,9 @@ export function LowerRightControls({
</a> </a>
<Link <Link
to={ to={
location.pathname.includes(paths.FILE) location.pathname.includes(PATHS.FILE)
? filePath + paths.SETTINGS + '?tab=project' ? filePath + PATHS.SETTINGS_PROJECT
: paths.HOME + paths.SETTINGS : PATHS.HOME + PATHS.SETTINGS
} }
> >
<CustomIcon <CustomIcon

4
src/components/LspProvider.tsx
View File

@ -14,7 +14,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { Extension } from '@codemirror/state' import { Extension } from '@codemirror/state'
import { LanguageSupport } from '@codemirror/language' import { LanguageSupport } from '@codemirror/language'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { FileEntry } from 'lib/types' import { FileEntry } from 'lib/types'
import Worker from 'editor/plugins/lsp/worker.ts?worker' import Worker from 'editor/plugins/lsp/worker.ts?worker'
import { import {
@ -260,7 +260,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
}) })
if (redirect) { if (redirect) {
navigate(paths.HOME) navigate(PATHS.HOME)
} }
} }

4
src/components/ProjectCard/ProjectCard.tsx
View File

@ -1,5 +1,5 @@
import { FormEvent, useEffect, useRef, useState } from 'react' import { FormEvent, useEffect, useRef, useState } from 'react'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ActionButton } from '../ActionButton' import { ActionButton } from '../ActionButton'
import { FILE_EXT } from 'lib/constants' import { FILE_EXT } from 'lib/constants'
@ -79,7 +79,7 @@ function ProjectCard({
> >
<Link <Link
data-testid="project-link" data-testid="project-link"
to={`${paths.FILE}/${encodeURIComponent(project.default_file)}`} to={`${PATHS.FILE}/${encodeURIComponent(project.default_file)}`}
className="flex flex-col flex-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10 group-hover:!hue-rotate-0 min-h-[5em] divide-y divide-primary/40 dark:divide-chalkboard-80 group-hover:!divide-primary" className="flex flex-col flex-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10 group-hover:!hue-rotate-0 min-h-[5em] divide-y divide-primary/40 dark:divide-chalkboard-80 group-hover:!divide-primary"
> >
{/* <div className="h-36 relative overflow-hidden bg-gradient-to-b from-transparent to-primary/10 rounded-t-sm"> {/* <div className="h-36 relative overflow-hidden bg-gradient-to-b from-transparent to-primary/10 rounded-t-sm">

12
src/components/ProjectSidebarMenu.tsx
View File

@ -1,7 +1,7 @@
import { Popover, Transition } from '@headlessui/react' import { Popover, Transition } from '@headlessui/react'
import { ActionButton, ActionButtonProps } from './ActionButton' import { ActionButton, ActionButtonProps } from './ActionButton'
import { type IndexLoaderData } from 'lib/types' import { type IndexLoaderData } from 'lib/types'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { isTauri } from '../lib/isTauri' import { isTauri } from '../lib/isTauri'
import { Link, useLocation, useNavigate } from 'react-router-dom' import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Fragment, useMemo } from 'react' import { Fragment, useMemo } from 'react'
@ -63,7 +63,7 @@ function AppLogoLink({
// Clear the scene and end the session. // Clear the scene and end the session.
engineCommandManager.endSession() engineCommandManager.endSession()
}} }}
to={paths.HOME} to={PATHS.HOME}
className={wrapperClassName + ' hover:before:brightness-110'} className={wrapperClassName + ' hover:before:brightness-110'}
> >
<Logo className={logoClassName} /> <Logo className={logoClassName} />
@ -116,10 +116,10 @@ function ProjectMenuPopover({
</> </>
), ),
onClick: () => { onClick: () => {
const targetPath = location.pathname.includes(paths.FILE) const targetPath = location.pathname.includes(PATHS.FILE)
? filePath + paths.SETTINGS ? filePath + PATHS.SETTINGS_PROJECT
: paths.HOME + paths.SETTINGS : PATHS.HOME + PATHS.SETTINGS_PROJECT
navigate(targetPath + '?tab=project') navigate(targetPath)
}, },
}, },
'break', 'break',

8
src/components/Settings/AllSettingsFields.tsx
View File

@ -16,7 +16,7 @@ import { getInitialDefaultDir, showInFolder } from 'lib/tauri'
import toast from 'react-hot-toast' import toast from 'react-hot-toast'
import { APP_VERSION } from 'routes/Settings' import { APP_VERSION } from 'routes/Settings'
import { createAndOpenNewProject, getSettingsFolderPaths } from 'lib/tauriFS' import { createAndOpenNewProject, getSettingsFolderPaths } from 'lib/tauriFS'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useDotDotSlash } from 'hooks/useDotDotSlash' import { useDotDotSlash } from 'hooks/useDotDotSlash'
import { sep } from '@tauri-apps/api/path' import { sep } from '@tauri-apps/api/path'
import { ForwardedRef, forwardRef, useEffect } from 'react' import { ForwardedRef, forwardRef, useEffect } from 'react'
@ -44,8 +44,8 @@ export const AllSettingsFields = forwardRef(
isFileSettings && isTauri() isFileSettings && isTauri()
? decodeURI( ? decodeURI(
location.pathname location.pathname
.replace(paths.FILE + '/', '') .replace(PATHS.FILE + '/', '')
.replace(paths.SETTINGS, '') .replace(PATHS.SETTINGS, '')
.slice(0, decodeURI(location.pathname).lastIndexOf(sep())) .slice(0, decodeURI(location.pathname).lastIndexOf(sep()))
) )
: undefined : undefined
@ -70,7 +70,7 @@ export const AllSettingsFields = forwardRef(
if (isFileSettings) { if (isFileSettings) {
// If we're in a project, first navigate to the onboarding start here // If we're in a project, first navigate to the onboarding start here
// so we can trigger the warning screen if necessary // so we can trigger the warning screen if necessary
navigate(dotDotSlash(1) + paths.ONBOARDING.INDEX) navigate(dotDotSlash(1) + PATHS.ONBOARDING.INDEX)
} else { } else {
// If we're in the global settings, create a new project and navigate // If we're in the global settings, create a new project and navigate
// to the onboarding start in that project // to the onboarding start in that project

12
src/components/SettingsAuthProvider.tsx
View File

@ -1,6 +1,6 @@
import { useMachine } from '@xstate/react' import { useMachine } from '@xstate/react'
import { useNavigate, useRouteLoaderData } from 'react-router-dom' import { useNavigate, useRouteLoaderData } from 'react-router-dom'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine' import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine'
import withBaseUrl from '../lib/withBaseURL' import withBaseUrl from '../lib/withBaseURL'
import React, { createContext, useEffect } from 'react' import React, { createContext, useEffect } from 'react'
@ -60,8 +60,8 @@ export const SettingsAuthProvider = ({
}: { }: {
children: React.ReactNode children: React.ReactNode
}) => { }) => {
const loadedSettings = useRouteLoaderData(paths.INDEX) as typeof settings const loadedSettings = useRouteLoaderData(PATHS.INDEX) as typeof settings
const loadedProject = useRouteLoaderData(paths.FILE) as IndexLoaderData const loadedProject = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
return ( return (
<SettingsAuthProviderBase <SettingsAuthProviderBase
loadedSettings={loadedSettings} loadedSettings={loadedSettings}
@ -297,12 +297,12 @@ export const SettingsAuthProviderBase = ({
const [authState, authSend, authActor] = useMachine(authMachine, { const [authState, authSend, authActor] = useMachine(authMachine, {
actions: { actions: {
goToSignInPage: () => { goToSignInPage: () => {
navigate(paths.SIGN_IN) navigate(PATHS.SIGN_IN)
logout() logout()
}, },
goToIndexPage: () => { goToIndexPage: () => {
if (window.location.pathname.includes(paths.SIGN_IN)) { if (window.location.pathname.includes(PATHS.SIGN_IN)) {
navigate(paths.INDEX) navigate(PATHS.INDEX)
} }
}, },
}, },

18
src/components/UserSidebarMenu.tsx
View File

@ -2,7 +2,7 @@ import { Popover, Transition } from '@headlessui/react'
import { ActionButton, ActionButtonProps } from './ActionButton' import { ActionButton, ActionButtonProps } from './ActionButton'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { Fragment, useMemo, useState } from 'react' import { Fragment, useMemo, useState } from 'react'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { Models } from '@kittycad/lib' import { Models } from '@kittycad/lib'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext' import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath' import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
@ -39,10 +39,10 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
), ),
'data-testid': 'user-settings', 'data-testid': 'user-settings',
onClick: () => { onClick: () => {
const targetPath = location.pathname.includes(paths.FILE) const targetPath = location.pathname.includes(PATHS.FILE)
? filePath + paths.SETTINGS ? filePath + PATHS.SETTINGS_USER
: paths.HOME + paths.SETTINGS : PATHS.HOME + PATHS.SETTINGS_USER
navigate(targetPath + '?tab=user') navigate(targetPath)
}, },
}, },
{ {
@ -50,10 +50,10 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
Element: 'button', Element: 'button',
children: 'Keyboard shortcuts', children: 'Keyboard shortcuts',
onClick: () => { onClick: () => {
const targetPath = location.pathname.includes(paths.FILE) const targetPath = location.pathname.includes(PATHS.FILE)
? filePath + paths.SETTINGS ? filePath + PATHS.SETTINGS_KEYBINDINGS
: paths.HOME + paths.SETTINGS : PATHS.HOME + PATHS.SETTINGS_KEYBINDINGS
navigate(targetPath + '?tab=keybindings') navigate(targetPath)
}, },
}, },
{ {

6
src/hooks/useAbsoluteFilePath.ts
View File

@ -1,11 +1,11 @@
import { type IndexLoaderData } from 'lib/types' import { type IndexLoaderData } from 'lib/types'
import { BROWSER_PATH, paths } from 'lib/paths' import { BROWSER_PATH, PATHS } from 'lib/paths'
import { useRouteLoaderData } from 'react-router-dom' import { useRouteLoaderData } from 'react-router-dom'
export function useAbsoluteFilePath() { export function useAbsoluteFilePath() {
const routeData = useRouteLoaderData(paths.FILE) as IndexLoaderData const routeData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
return ( return (
paths.FILE + '/' + encodeURIComponent(routeData?.file?.path || BROWSER_PATH) PATHS.FILE + '/' + encodeURIComponent(routeData?.file?.path || BROWSER_PATH)
) )
} }

4
src/hooks/useRefreshSettings.ts
View File

@ -1,6 +1,6 @@
import { useRouteLoaderData } from 'react-router-dom' import { useRouteLoaderData } from 'react-router-dom'
import { useSettingsAuthContext } from './useSettingsAuthContext' import { useSettingsAuthContext } from './useSettingsAuthContext'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { settings } from 'lib/settings/initialSettings' import { settings } from 'lib/settings/initialSettings'
import { useEffect } from 'react' import { useEffect } from 'react'
@ -10,7 +10,7 @@ import { useEffect } from 'react'
* in conjunction with additional uses of settingsLoader further down the router tree. * in conjunction with additional uses of settingsLoader further down the router tree.
* @param routeId - The id defined in Router.tsx to load the settings from. * @param routeId - The id defined in Router.tsx to load the settings from.
*/ */
export function useRefreshSettings(routeId: string = paths.INDEX) { export function useRefreshSettings(routeId: string = PATHS.INDEX) {
const ctx = useSettingsAuthContext() const ctx = useSettingsAuthContext()
const routeData = useRouteLoaderData(routeId) as typeof settings const routeData = useRouteLoaderData(routeId) as typeof settings

9
src/lib/paths.ts
View File

@ -22,11 +22,16 @@ type OnboardingPaths = {
[K in keyof typeof onboardingPaths]: `/onboarding${(typeof onboardingPaths)[K]}` [K in keyof typeof onboardingPaths]: `/onboarding${(typeof onboardingPaths)[K]}`
} }
export const paths = { const SETTINGS = '/settings' as const
export const PATHS = {
INDEX: '/', INDEX: '/',
HOME: '/home', HOME: '/home',
FILE: '/file', FILE: '/file',
SETTINGS: '/settings', SETTINGS,
SETTINGS_USER: `${SETTINGS}?tab=user` as const,
SETTINGS_PROJECT: `${SETTINGS}?tab=project` as const,
SETTINGS_KEYBINDINGS: `${SETTINGS}?tab=keybindings` as const,
SIGN_IN: '/signin', SIGN_IN: '/signin',
ONBOARDING: prependRoutes(onboardingPaths)('/onboarding') as OnboardingPaths, ONBOARDING: prependRoutes(onboardingPaths)('/onboarding') as OnboardingPaths,
} as const } as const

10
src/lib/routeLoaders.ts
View File

@ -1,7 +1,7 @@
import { ActionFunction, LoaderFunction, redirect } from 'react-router-dom' import { ActionFunction, LoaderFunction, redirect } from 'react-router-dom'
import { FileLoaderData, HomeLoaderData, IndexLoaderData } from './types' import { FileLoaderData, HomeLoaderData, IndexLoaderData } from './types'
import { isTauri } from './isTauri' import { isTauri } from './isTauri'
import { getProjectMetaByRouteId, paths } from './paths' import { getProjectMetaByRouteId, PATHS } from './paths'
import { BROWSER_PATH } from 'lib/paths' import { BROWSER_PATH } from 'lib/paths'
import { import {
BROWSER_FILE_NAME, BROWSER_FILE_NAME,
@ -54,7 +54,7 @@ export const onboardingRedirectLoader: ActionFunction = async (args) => {
const { settings } = await loadAndValidateSettings() const { settings } = await loadAndValidateSettings()
const onboardingStatus = settings.app.onboardingStatus.current || '' const onboardingStatus = settings.app.onboardingStatus.current || ''
const notEnRouteToOnboarding = !args.request.url.includes( const notEnRouteToOnboarding = !args.request.url.includes(
paths.ONBOARDING.INDEX PATHS.ONBOARDING.INDEX
) )
// '' is the initial state, 'done' and 'dismissed' are the final states // '' is the initial state, 'done' and 'dismissed' are the final states
const hasValidOnboardingStatus = const hasValidOnboardingStatus =
@ -65,7 +65,7 @@ export const onboardingRedirectLoader: ActionFunction = async (args) => {
if (shouldRedirectToOnboarding) { if (shouldRedirectToOnboarding) {
return redirect( return redirect(
makeUrlPathRelative(paths.ONBOARDING.INDEX) + onboardingStatus.slice(1) makeUrlPathRelative(PATHS.ONBOARDING.INDEX) + onboardingStatus.slice(1)
) )
} }
@ -89,7 +89,7 @@ export const fileLoader: LoaderFunction = async ({
if (!current_file_name || !current_file_path || !project_name) { if (!current_file_name || !current_file_path || !project_name) {
return redirect( return redirect(
`${paths.FILE}/${encodeURIComponent( `${PATHS.FILE}/${encodeURIComponent(
`${params.id}${isTauri() ? sep() : '/'}${PROJECT_ENTRYPOINT}` `${params.id}${isTauri() ? sep() : '/'}${PROJECT_ENTRYPOINT}`
)}` )}`
) )
@ -158,7 +158,7 @@ export const homeLoader: LoaderFunction = async (): Promise<
HomeLoaderData | Response HomeLoaderData | Response
> => { > => {
if (!isTauri()) { if (!isTauri()) {
return redirect(paths.FILE + '/%2F' + BROWSER_PROJECT_NAME) return redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
} }
const { configuration } = await loadAndValidateSettings() const { configuration } = await loadAndValidateSettings()

6
src/lib/tauriFS.ts
View File

@ -8,7 +8,7 @@ import {
PROJECT_ENTRYPOINT, PROJECT_ENTRYPOINT,
} from 'lib/constants' } from 'lib/constants'
import { bracket } from './exampleKcl' import { bracket } from './exampleKcl'
import { paths } from './paths' import { PATHS } from './paths'
import { import {
createNewProjectDirectory, createNewProjectDirectory,
listProjects, listProjects,
@ -156,8 +156,8 @@ export async function createAndOpenNewProject({
null null
) )
navigate( navigate(
`${paths.FILE}/${encodeURIComponent(newProject.default_file)}${ `${PATHS.FILE}/${encodeURIComponent(newProject.default_file)}${
paths.ONBOARDING.INDEX PATHS.ONBOARDING.INDEX
}` }`
) )
return newProject return newProject

10
src/routes/Home.tsx
View File

@ -16,7 +16,7 @@ import Loading from 'components/Loading'
import { useMachine } from '@xstate/react' import { useMachine } from '@xstate/react'
import { homeMachine } from '../machines/homeMachine' import { homeMachine } from '../machines/homeMachine'
import { ContextFrom, EventFrom } from 'xstate' import { ContextFrom, EventFrom } from 'xstate'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { import {
getNextSearchParams, getNextSearchParams,
getSortFunction, getSortFunction,
@ -44,7 +44,7 @@ import { ProjectSearchBar, useProjectSearch } from 'components/ProjectSearchBar'
// This route only opens in the Tauri desktop context for now, // This route only opens in the Tauri desktop context for now,
// as defined in Router.tsx, so we can use the Tauri APIs and types. // as defined in Router.tsx, so we can use the Tauri APIs and types.
const Home = () => { const Home = () => {
useRefreshSettings(paths.HOME + 'SETTINGS') useRefreshSettings(PATHS.HOME + 'SETTINGS')
const { commandBarSend } = useCommandsContext() const { commandBarSend } = useCommandsContext()
const navigate = useNavigate() const navigate = useNavigate()
const { projects: loadedProjects } = useLoaderData() as HomeLoaderData const { projects: loadedProjects } = useLoaderData() as HomeLoaderData
@ -63,7 +63,7 @@ const Home = () => {
}) })
useHotkeys( useHotkeys(
isTauri() ? 'mod+,' : 'shift+mod+,', isTauri() ? 'mod+,' : 'shift+mod+,',
() => navigate(paths.HOME + paths.SETTINGS), () => navigate(PATHS.HOME + PATHS.SETTINGS),
{ {
splitKey: '|', splitKey: '|',
} }
@ -91,7 +91,7 @@ const Home = () => {
null null
) )
commandBarSend({ type: 'Close' }) commandBarSend({ type: 'Close' })
navigate(`${paths.FILE}/${encodeURIComponent(projectPath)}`) navigate(`${PATHS.FILE}/${encodeURIComponent(projectPath)}`)
} }
}, },
toastSuccess: (_, event) => toast.success((event.data || '') + ''), toastSuccess: (_, event) => toast.success((event.data || '') + ''),
@ -276,7 +276,7 @@ const Home = () => {
<p className="my-4 text-sm text-chalkboard-80 dark:text-chalkboard-30"> <p className="my-4 text-sm text-chalkboard-80 dark:text-chalkboard-30">
Loaded from{' '} Loaded from{' '}
<Link <Link
to="settings?tab=user#projectDirectory" to={`${PATHS.SETTINGS_USER}#projectDirectory`}
className="text-chalkboard-90 dark:text-chalkboard-20 underline underline-offset-2" className="text-chalkboard-90 dark:text-chalkboard-20 underline underline-offset-2"
> >
{settings.app.projectDirectory.current} {settings.app.projectDirectory.current}

4
src/routes/Onboarding/Introduction.tsx
View File

@ -11,7 +11,7 @@ import { APP_NAME } from 'lib/constants'
import { useState } from 'react' import { useState } from 'react'
import { useLspContext } from 'components/LspProvider' import { useLspContext } from 'components/LspProvider'
import { IndexLoaderData } from 'lib/types' import { IndexLoaderData } from 'lib/types'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useFileContext } from 'hooks/useFileContext' import { useFileContext } from 'hooks/useFileContext'
/** /**
@ -51,7 +51,7 @@ function OnboardingResetWarning(props: OnboardingResetWarningProps) {
function OnboardingWarningDesktop(props: OnboardingResetWarningProps) { function OnboardingWarningDesktop(props: OnboardingResetWarningProps) {
const navigate = useNavigate() const navigate = useNavigate()
const dismiss = useDismiss() const dismiss = useDismiss()
const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
const { context: fileContext } = useFileContext() const { context: fileContext } = useFileContext()
const { onProjectClose, onProjectOpen } = useLspContext() const { onProjectClose, onProjectOpen } = useLspContext()

4
src/routes/Onboarding/index.tsx
View File

@ -15,7 +15,7 @@ import UserMenu from './UserMenu'
import ProjectMenu from './ProjectMenu' import ProjectMenu from './ProjectMenu'
import Export from './Export' import Export from './Export'
import FutureWork from './FutureWork' import FutureWork from './FutureWork'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath' import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
import { ActionButton } from 'components/ActionButton' import { ActionButton } from 'components/ActionButton'
import { onboardingPaths } from 'routes/Onboarding/paths' import { onboardingPaths } from 'routes/Onboarding/paths'
@ -103,7 +103,7 @@ export function useNextClick(newStatus: string) {
type: 'set.app.onboardingStatus', type: 'set.app.onboardingStatus',
data: { level: 'user', value: newStatus }, data: { level: 'user', value: newStatus },
}) })
navigate(filePath + paths.ONBOARDING.INDEX.slice(0, -1) + newStatus) navigate(filePath + PATHS.ONBOARDING.INDEX.slice(0, -1) + newStatus)
}, [filePath, newStatus, send, navigate]) }, [filePath, newStatus, send, navigate])
} }

6
src/routes/Settings.tsx
View File

@ -1,7 +1,7 @@
import { SettingsLevel } from 'lib/settings/settingsTypes' import { SettingsLevel } from 'lib/settings/settingsTypes'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { useHotkeys } from 'react-hotkeys-hook' import { useHotkeys } from 'react-hotkeys-hook'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useDotDotSlash } from 'hooks/useDotDotSlash' import { useDotDotSlash } from 'hooks/useDotDotSlash'
import { Fragment, useEffect, useRef } from 'react' import { Fragment, useEffect, useRef } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, Transition } from '@headlessui/react'
@ -21,9 +21,9 @@ export const APP_VERSION = isTauri()
export const Settings = () => { export const Settings = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams() const [searchParams, setSearchParams] = useSearchParams()
const close = () => navigate(location.pathname.replace(paths.SETTINGS, '')) const close = () => navigate(location.pathname.replace(PATHS.SETTINGS, ''))
const location = useLocation() const location = useLocation()
const isFileSettings = location.pathname.includes(paths.FILE) const isFileSettings = location.pathname.includes(PATHS.FILE)
const searchParamTab = const searchParamTab =
(searchParams.get('tab') as SettingsLevel | 'keybindings') ?? (searchParams.get('tab') as SettingsLevel | 'keybindings') ??
(isFileSettings ? 'project' : 'user') (isFileSettings ? 'project' : 'user')

4
src/routes/SignIn.tsx
View File

@ -2,7 +2,7 @@ import { ActionButton } from '../components/ActionButton'
import { isTauri } from '../lib/isTauri' import { isTauri } from '../lib/isTauri'
import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env' import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
import { Themes, getSystemTheme } from '../lib/theme' import { Themes, getSystemTheme } from '../lib/theme'
import { paths } from 'lib/paths' import { PATHS } from 'lib/paths'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext' import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { APP_NAME } from 'lib/constants' import { APP_NAME } from 'lib/constants'
import { login } from 'lib/tauri' import { login } from 'lib/tauri'
@ -75,7 +75,7 @@ const SignIn = () => {
<ActionButton <ActionButton
Element="link" Element="link"
to={`${VITE_KC_SITE_BASE_URL}${ to={`${VITE_KC_SITE_BASE_URL}${
paths.SIGN_IN PATHS.SIGN_IN
}?callbackUrl=${encodeURIComponent( }?callbackUrl=${encodeURIComponent(
typeof window !== 'undefined' && typeof window !== 'undefined' &&
window.location.href.replace('signin', '') window.location.href.replace('signin', '')