This commit is contained in:
2025-07-15 11:01:07 -07:00
parent 2e9ea14507
commit b30999e907
4 changed files with 17 additions and 26 deletions

View File

@@ -1,6 +1,8 @@
Welcome to your new TanStack app! # DM Companion App
# Getting Started ## Development
### Getting Started
To run this application: To run this application:
@@ -9,7 +11,7 @@ npm install
npm run start npm run start
``` ```
# Building For Production ### Building For Production
To build this application for production: To build this application for production:
@@ -17,7 +19,7 @@ To build this application for production:
npm run build npm run build
``` ```
## Testing ### Testing
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with: This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
@@ -25,15 +27,15 @@ This project uses [Vitest](https://vitest.dev/) for testing. You can run the tes
npm run test npm run test
``` ```
## Styling ### Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling. This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Routing ### Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`. This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
### Adding A Route #### Adding A Route
To add a new route to your application just add another a new file in the `./src/routes` directory. To add a new route to your application just add another a new file in the `./src/routes` directory.
@@ -41,7 +43,7 @@ TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them. Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links #### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`. To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
@@ -59,7 +61,7 @@ This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent). More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
### Using A Layout #### Using A Layout
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component. In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
@@ -91,13 +93,13 @@ The `<TanStackRouterDevtools />` component is not required so you can remove it
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts). More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching ### Data Fetching
### Pocketbase #### Pocketbase
TODO TODO
## State Management ### State Management
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project. Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
@@ -169,11 +171,3 @@ We use the `Derived` class to create a new store that is derived from another st
Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook. Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest). You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
# Demo files
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

View File

@@ -6,7 +6,6 @@ import { FormattedDate } from "../FormattedDate";
*/ */
export const DocumentTitle = ({ export const DocumentTitle = ({
document, document,
session,
}: { }: {
document: AnyDocument; document: AnyDocument;
session?: Session; session?: Session;

View File

@@ -4,7 +4,7 @@ import { displayName, relationshipsForDocument } from "@/lib/relationships";
import type { DocumentId } from "@/lib/types"; import type { DocumentId } from "@/lib/types";
import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId"; import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import * as _ from "lodash"; import _ from "lodash";
import { Loader } from "../Loader"; import { Loader } from "../Loader";
import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType"; import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType";
import { DocumentTitle } from "./DocumentTitle"; import { DocumentTitle } from "./DocumentTitle";

View File

@@ -1,7 +1,7 @@
import { useDocument, useDocumentCache } from "@/context/document/hooks"; import { useDocument } from "@/context/document/hooks";
import type { DocumentId, RelationshipType } from "@/lib/types"; import type { DocumentId, RelationshipType } from "@/lib/types";
import { RelationshipList } from "../RelationshipList";
import { Loader } from "../Loader"; import { Loader } from "../Loader";
import { RelationshipList } from "../RelationshipList";
export type Props = { export type Props = {
documentId: DocumentId; documentId: DocumentId;
@@ -11,8 +11,6 @@ export type Props = {
export function RelatedDocumentList({ documentId, relationshipType }: Props) { export function RelatedDocumentList({ documentId, relationshipType }: Props) {
const { docResult } = useDocument(documentId); const { docResult } = useDocument(documentId);
const { cache } = useDocumentCache();
if (docResult?.type !== "ready") { if (docResult?.type !== "ready") {
return <Loader />; return <Loader />;
} }