This commit is contained in:
Drew Haven 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:
@ -9,7 +11,7 @@ npm install
npm run start
```
# Building For Production
### Building For Production
To build this application for production:
@ -17,7 +19,7 @@ To build this application for production:
npm run build
```
## Testing
### Testing
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
```
## Styling
### 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`.
### 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.
@ -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.
### Adding Links
#### Adding Links
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).
### 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.
@ -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).
## Data Fetching
### Data Fetching
### Pocketbase
#### Pocketbase
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.
@ -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.
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 = ({
document,
session,
}: {
document: AnyDocument;
session?: Session;

View File

@ -4,7 +4,7 @@ import { displayName, relationshipsForDocument } from "@/lib/relationships";
import type { DocumentId } from "@/lib/types";
import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId";
import { Link } from "@tanstack/react-router";
import * as _ from "lodash";
import _ from "lodash";
import { Loader } from "../Loader";
import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType";
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 { RelationshipList } from "../RelationshipList";
import { Loader } from "../Loader";
import { RelationshipList } from "../RelationshipList";
export type Props = {
documentId: DocumentId;
@ -11,8 +11,6 @@ export type Props = {
export function RelatedDocumentList({ documentId, relationshipType }: Props) {
const { docResult } = useDocument(documentId);
const { cache } = useDocumentCache();
if (docResult?.type !== "ready") {
return <Loader />;
}