Compare commits
10 Commits
cojson@0.8
...
lotion
| Author | SHA1 | Date | |
|---|---|---|---|
|
6571a6fb31 | ||
|
|
1139605a7d | ||
|
|
f40c80394d | ||
|
|
2bfb42dd4a | ||
|
|
3ebdaa55c7 | ||
|
|
50dbd46c6c | ||
|
|
37fbe504e3 | ||
|
|
dc43f9a6b0 | ||
|
|
61535c80e3 | ||
|
|
285b7609d6 |
@@ -12,7 +12,6 @@
|
||||
"jazz-browser-auth-clerk",
|
||||
"jazz-react-auth-clerk",
|
||||
"jazz-react",
|
||||
"jazz-react-native",
|
||||
"jazz-nodejs",
|
||||
"jazz-run",
|
||||
"cojson-transport-ws",
|
||||
|
||||
9
.github/workflows/playwright.yml
vendored
9
.github/workflows/playwright.yml
vendored
@@ -10,10 +10,9 @@ jobs:
|
||||
test:
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
strategy:
|
||||
matrix:
|
||||
project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/pets"]
|
||||
project: ["e2e/BinaryCoStream", "examples/pets"]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
@@ -46,12 +45,8 @@ jobs:
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build
|
||||
run: pnpm turbo build;
|
||||
working-directory: ./${{ matrix.project }}
|
||||
|
||||
- name: Build jazz-run
|
||||
run: pnpm exec turbo build && chmod +x dist/index.js;
|
||||
working-directory: ./packages/jazz-run
|
||||
|
||||
- name: Install Playwright Browsers
|
||||
run: pnpm exec playwright install --with-deps
|
||||
|
||||
2
.github/workflows/unit-test.yml
vendored
2
.github/workflows/unit-test.yml
vendored
@@ -41,7 +41,7 @@ jobs:
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build
|
||||
run: pnpm turbo build;
|
||||
|
||||
- name: Unit Tests
|
||||
run: pnpm test
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
/** @type {import("prettier").Config} */
|
||||
const config = {
|
||||
trailingComma: "all",
|
||||
tabWidth: 4,
|
||||
semi: true,
|
||||
singleQuote: false,
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,43 +1,9 @@
|
||||
# @jazz-e2e/binarycostream
|
||||
|
||||
## 0.0.86
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- jazz-tools@0.8.1
|
||||
- jazz-react@0.8.1
|
||||
- Updated dependencies
|
||||
- jazz-tools@0.8.1
|
||||
- jazz-react@0.8.1
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<link rel="icon" type="image/png" href="/jazz-logo.png" />
|
||||
<link rel="stylesheet" href="/src/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jazz BinaryCoStream Tests</title>
|
||||
<title>Jazz Chat Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@jazz-e2e/binarycostream",
|
||||
"private": true,
|
||||
"version": "0.0.86",
|
||||
"version": "0.0.82",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -14,11 +14,11 @@
|
||||
"*.{js,jsx,mdx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"cojson": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"is-ci": "^3.0.1",
|
||||
"jazz-react": "workspace:0.8.5",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
|
||||
30
e2e/CoValues/.gitignore
vendored
30
e2e/CoValues/.gitignore
vendored
@@ -1,30 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
sync-db/
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
@@ -1,35 +0,0 @@
|
||||
# @jazz-e2e/covalues
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/jazz-logo.png" />
|
||||
<link rel="stylesheet" href="/src/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jazz CoValues tests</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/app.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "@jazz-e2e/covalues",
|
||||
"private": true,
|
||||
"version": "0.0.85",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"test:ui": "playwright test --ui"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,mdx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"cojson": "workspace:*",
|
||||
"hash-slash": "workspace:*",
|
||||
"is-ci": "^3.0.1",
|
||||
"jazz-react": "workspace:*",
|
||||
"jazz-tools": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router": "^6.16.0",
|
||||
"react-router-dom": "^6.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@types/node": "^22.5.1",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
"jstat": "^1.9.6",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
import isCI from "is-ci";
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// import dotenv from 'dotenv';
|
||||
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: "./tests",
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: isCI,
|
||||
/* Retry on CI only */
|
||||
retries: isCI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: isCI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: "html",
|
||||
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: "on-first-retry",
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: { ...devices["Desktop Chrome"] },
|
||||
},
|
||||
],
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: isCI ? {
|
||||
command: "pnpm preview",
|
||||
url: "http://localhost:4173/",
|
||||
} : undefined,
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { AuthAndJazz } from "./jazz";
|
||||
import { TestInput } from "./pages/TestInput";
|
||||
import { RouterProvider, createHashRouter } from "react-router-dom";
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <TestInput />,
|
||||
},
|
||||
{
|
||||
path: "/test-input",
|
||||
element: <TestInput />,
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<AuthAndJazz>
|
||||
<RouterProvider router={router} />
|
||||
</AuthAndJazz>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -1,25 +0,0 @@
|
||||
import { createJazzReactApp } from "jazz-react";
|
||||
import { ephemeralCredentialsAuth } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
|
||||
const key = `test-comap@jazz.tools`;
|
||||
|
||||
const localSync = new URLSearchParams(location.search).has("localSync");
|
||||
|
||||
const Jazz = createJazzReactApp();
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
export function AuthAndJazz({ children }: { children: React.ReactNode }) {
|
||||
const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
|
||||
|
||||
return (
|
||||
<Jazz.Provider auth={ephemeralAuth} peer={
|
||||
localSync
|
||||
? `ws://localhost:4200?key=${key}`
|
||||
: `wss://mesh.jazz.tools/?key=${key}`
|
||||
}>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { co, CoMap, Group, ID } from "jazz-tools";
|
||||
import { useAccount, useCoState } from "../jazz";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export class InputTestCoMap extends CoMap {
|
||||
title = co.string;
|
||||
}
|
||||
|
||||
export function TestInput() {
|
||||
const [id, setId] = useState<ID<InputTestCoMap> | undefined>(undefined);
|
||||
const coMap = useCoState(InputTestCoMap, id);
|
||||
const { me } = useAccount();
|
||||
|
||||
useEffect(() => {
|
||||
if (!me || id) return;
|
||||
|
||||
const group = Group.create({ owner: me });
|
||||
|
||||
group.addMember("everyone", "writer");
|
||||
|
||||
setId(InputTestCoMap.create({ title: "" }, { owner: group }).id);
|
||||
}, [me]);
|
||||
|
||||
if (!coMap) return null;
|
||||
|
||||
return (
|
||||
<input
|
||||
value={coMap?.title ?? ""}
|
||||
onChange={(e) => {
|
||||
if (!coMap) return;
|
||||
coMap.title = e.target.value;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
1
e2e/CoValues/src/vite-env.d.ts
vendored
1
e2e/CoValues/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,14 +0,0 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("CoMap - TestInput", () => {
|
||||
test("should keep the cursor position when typing", async ({ page }) => {
|
||||
await page.goto("/test-input");
|
||||
|
||||
await page.getByRole("textbox").fill("xx");
|
||||
await page.getByRole('textbox').press('ArrowLeft');
|
||||
await page.getByRole("textbox").press("y");
|
||||
await page.getByRole("textbox").press("y");
|
||||
|
||||
await expect(page.getByRole('textbox')).toHaveValue("xyyx");
|
||||
});
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"],
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
minify: false
|
||||
}
|
||||
})
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"next/core-web-vitals",
|
||||
"prettier",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": ["error"]
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
# jazz-example-book-shelf
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- jazz-browser-media-images@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
@@ -1,4 +0,0 @@
|
||||
FROM caddy:2.7.3-alpine
|
||||
LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
|
||||
|
||||
COPY ./dist /usr/share/caddy/
|
||||
@@ -1,41 +0,0 @@
|
||||
# Jazz Book Shelf Example
|
||||
|
||||
## Installing & running the example locally
|
||||
|
||||
(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
Start by checking out `jazz`
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Go to the `examples/book-shelf` directory.
|
||||
|
||||
```bash
|
||||
cd examples/book-shelf
|
||||
```
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Start the dev server:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Questions / problems / feedback
|
||||
|
||||
If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
|
||||
|
||||
## Configuration: sync server
|
||||
|
||||
By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
|
||||
|
||||
You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/2_main.tsx).
|
||||
@@ -1,56 +0,0 @@
|
||||
job "example-bookShelf$BRANCH_SUFFIX" {
|
||||
region = "global"
|
||||
datacenters = ["*"]
|
||||
|
||||
group "static" {
|
||||
count = 4
|
||||
|
||||
network {
|
||||
port "http" {
|
||||
to = 80
|
||||
}
|
||||
}
|
||||
|
||||
constraint {
|
||||
attribute = "${node.class}"
|
||||
operator = "="
|
||||
value = "mesh"
|
||||
}
|
||||
|
||||
spread {
|
||||
attribute = "${node.datacenter}"
|
||||
weight = 100
|
||||
}
|
||||
|
||||
constraint {
|
||||
distinct_hosts = true
|
||||
}
|
||||
|
||||
task "server" {
|
||||
driver = "docker"
|
||||
|
||||
config {
|
||||
image = "$DOCKER_TAG"
|
||||
ports = ["http"]
|
||||
|
||||
auth = {
|
||||
username = "$DOCKER_USER"
|
||||
password = "$DOCKER_PASSWORD"
|
||||
}
|
||||
}
|
||||
|
||||
service {
|
||||
tags = ["public"]
|
||||
name = "example-bookShelf$BRANCH_SUFFIX"
|
||||
port = "http"
|
||||
provider = "consul"
|
||||
}
|
||||
|
||||
resources {
|
||||
cpu = 50 # MHz
|
||||
memory = 50 # MB
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
# deploy bump 4
|
||||
5
examples/book-shelf/next-env.d.ts
vendored
5
examples/book-shelf/next-env.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@@ -1,4 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "jazz-example-book-shelf",
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.0.0",
|
||||
"jazz-browser-media-images": "workspace:0.8.5",
|
||||
"jazz-react": "workspace:0.8.5",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"next": "14.2.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.1",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-config-next": "14.2.5",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"postcss": "^8.4.27",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { BookReview, ListOfBookReviews } from "@/schema";
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import { useRouter } from "next/navigation";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { Group, ImageDefinition } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export default function AddBookReview() {
|
||||
const { me } = useAccount();
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [review, setReview] = useState("");
|
||||
const [rating, setRating] = useState(0);
|
||||
const [dateRead, setDateRead] = useState(
|
||||
new Date().toISOString().split("T")[0]
|
||||
);
|
||||
const [coverImage, setCoverImage] = useState<ImageDefinition | undefined>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const onDateChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const date = new Date(event.currentTarget.value)
|
||||
.toISOString()
|
||||
.split("T")[0];
|
||||
setDateRead(date);
|
||||
};
|
||||
|
||||
const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.currentTarget.files?.[0];
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "reader");
|
||||
|
||||
if (file) {
|
||||
createImage(file, { owner: group }).then(image => {
|
||||
setCoverImage(image);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!me?.profile) return;
|
||||
|
||||
const bookReview = BookReview.create(
|
||||
{
|
||||
title,
|
||||
author,
|
||||
review,
|
||||
rating,
|
||||
dateRead: new Date(dateRead),
|
||||
cover: coverImage,
|
||||
},
|
||||
{
|
||||
owner: me.profile._owner,
|
||||
}
|
||||
);
|
||||
|
||||
if (!me.profile.bookReviews) {
|
||||
me.profile.bookReviews = ListOfBookReviews.create([], {
|
||||
owner: me.profile._owner,
|
||||
});
|
||||
}
|
||||
|
||||
me.profile.bookReviews.push(bookReview);
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className="grid max-w-lg gap-8 py-8">
|
||||
<h1 className="text-lg font-semibold text-black">Add book review</h1>
|
||||
<form action="" className="grid gap-4" onSubmit={onSubmit}>
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Cover
|
||||
<input type="file" onChange={onImageChange} />
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Title
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="text"
|
||||
value={title}
|
||||
required
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Author
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="text"
|
||||
value={author}
|
||||
required
|
||||
onChange={e => setAuthor(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Date read
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="date"
|
||||
value={dateRead}
|
||||
required
|
||||
onChange={onDateChange}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-1 text-sm text-gray-600">
|
||||
Rating
|
||||
<RatingInput value={rating} onChange={rating => setRating(rating)} />
|
||||
</div>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Review
|
||||
<textarea
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
value={review}
|
||||
onChange={e => setReview(e.target.value)}
|
||||
></textarea>
|
||||
</label>
|
||||
<Button variant="primary" type="submit">
|
||||
Add
|
||||
</Button>
|
||||
</form>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import { BookReview } from "@/schema";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { BookCover } from "@/components/BookCover";
|
||||
import clsx from "clsx";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import Rating from "@/components/Rating";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
const BookReviewTitle = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "font-serif text-2xl font-bold lg:text-4xl";
|
||||
|
||||
if (readOnly) {
|
||||
return <h1 className={className}>{bookReview.title}</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
value={bookReview.title}
|
||||
placeholder="Book title"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.title = e.target.value)}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewAuthor = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-gray-700";
|
||||
|
||||
if (readOnly) {
|
||||
return <p className={className}>by {bookReview.author}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
value={bookReview.author}
|
||||
placeholder="Author"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.author = e.target.value)}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewDateRead = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-gray-700 max-w-[10rem]";
|
||||
|
||||
if (readOnly) {
|
||||
return (
|
||||
bookReview.dateRead && (
|
||||
<p className={className}>{bookReview.dateRead.toLocaleDateString()}</p>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
type="date"
|
||||
value={bookReview.dateRead?.toISOString().split("T")[0]}
|
||||
placeholder="Date read"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => {
|
||||
const date = new Date(e.target.value);
|
||||
bookReview.dateRead = date;
|
||||
}}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewReview = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-sm leading-relaxed text-gray-600";
|
||||
|
||||
if (readOnly) {
|
||||
if (bookReview.review) {
|
||||
return <p className={className}>{bookReview.review}</p>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<textarea
|
||||
value={bookReview.review}
|
||||
placeholder="Write your review here..."
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.review = e.target.value)}
|
||||
></textarea>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewRating = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-2xl sm:mx-0";
|
||||
|
||||
if (readOnly) {
|
||||
return <Rating className={className} rating={bookReview.rating} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<RatingInput
|
||||
className={clsx(className, "p-2")}
|
||||
onChange={rating => (bookReview.rating = rating)}
|
||||
value={bookReview.rating}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
const bookReview = useCoState(BookReview, params.slug as ID<BookReview>);
|
||||
|
||||
if (!bookReview) return <></>;
|
||||
|
||||
const readOnly = !(bookReview._owner.castAs(Group).myRole() === "admin");
|
||||
|
||||
return (
|
||||
<Container className="grid gap-12 py-8">
|
||||
<div className="flex flex-col gap-6 sm:flex-row md:gap-10">
|
||||
<div className="w-[180px]">
|
||||
<BookCover bookReview={bookReview} readOnly={readOnly} />
|
||||
</div>
|
||||
|
||||
<div className="-mx-2 grid max-w-lg flex-1 gap-3 sm:mx-0">
|
||||
<BookReviewTitle bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewAuthor bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewDateRead bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewRating bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewReview bookReview={bookReview} readOnly={readOnly} />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
@apply ring-2 ring-purple-600/75 dark:ring-2 dark:ring-white/75;
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { JazzAndAuth } from "@/components/JazzAndAuth";
|
||||
import { Nav } from "@/components/Nav";
|
||||
import { Fraunces } from "next/font/google";
|
||||
import clsx from "clsx";
|
||||
|
||||
const fraunces = Fraunces({
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
variable: "--font-fraunces",
|
||||
});
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Jazz Book Shelf",
|
||||
description: "Jazz Book Shelf",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={clsx(inter.className, fraunces.variable)}>
|
||||
<JazzAndAuth>
|
||||
<header>
|
||||
<Nav />
|
||||
</header>
|
||||
<main>{children}</main>
|
||||
</JazzAndAuth>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import UserProfile from "@/components/UserProfile";
|
||||
import { JazzAccount } from "@/schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
export default function Home() {
|
||||
const { me } = useAccount();
|
||||
|
||||
return (
|
||||
<Container className="grid gap-12 py-8">
|
||||
<UserProfile id={me?.id as ID<JazzAccount>} />
|
||||
|
||||
<label className="flex flex-wrap items-center gap-3">
|
||||
Share your profile:
|
||||
<input
|
||||
type="text"
|
||||
className="w-full rounded border p-1"
|
||||
value={`http://localhost:3000/user/${me?.id}`}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import UserProfile from "@/components/UserProfile";
|
||||
import { JazzAccount } from "@/schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
const { slug } = params;
|
||||
|
||||
return (
|
||||
<Container className="py-8">
|
||||
<UserProfile id={slug as ID<JazzAccount>} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { ProgressiveImg } from "jazz-react";
|
||||
import { BookReview } from "@/schema";
|
||||
import { ChangeEvent, useRef, useState } from "react";
|
||||
import { Group, ImageDefinition } from "jazz-tools";
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import clsx from "clsx";
|
||||
import PlusIcon from "@/components/icons/PlusIcon";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
const BookCoverContainer = ({
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={clsx("h-[240px] lg:h-[260px]", className)}>{children}</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MockCover = ({ bookReview }: { bookReview: BookReview }) => {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-l-sm rounded-r-md bg-gray-100 px-3 text-center shadow-lg">
|
||||
<p className="font-medium">{bookReview.title}</p>
|
||||
<p className="text-xs">{bookReview.author}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function BookCoverReadOnly({
|
||||
bookReview,
|
||||
className,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
className?: string;
|
||||
}) {
|
||||
if (bookReview.cover) {
|
||||
return (
|
||||
<BookCoverContainer className={className}>
|
||||
<ProgressiveImg image={bookReview.cover}>
|
||||
{({ src }) => (
|
||||
<img
|
||||
className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg"
|
||||
src={src}
|
||||
/>
|
||||
)}
|
||||
</ProgressiveImg>
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BookCoverContainer className={className}>
|
||||
<MockCover bookReview={bookReview} />
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookCoverInput({ bookReview }: { bookReview: BookReview }) {
|
||||
const { me } = useAccount();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!me?.profile) return;
|
||||
|
||||
const file = event.currentTarget.files?.[0];
|
||||
|
||||
if (file) {
|
||||
createImage(file, { owner: me.profile._owner }).then(image => {
|
||||
bookReview.cover = image;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onUploadClick = () => {
|
||||
inputRef.current?.click();
|
||||
};
|
||||
|
||||
const remove = () => {
|
||||
bookReview.cover = null;
|
||||
};
|
||||
|
||||
if (bookReview.cover) {
|
||||
return (
|
||||
<div className="group relative inline-block">
|
||||
<BookCoverReadOnly
|
||||
className="transition-opacity group-hover:opacity-40"
|
||||
bookReview={bookReview}
|
||||
/>
|
||||
<div className="absolute left-0 top-0 hidden h-full w-full items-center justify-center rounded-l-sm rounded-r-md group-hover:flex">
|
||||
<Button
|
||||
variant="tertiary"
|
||||
type="button"
|
||||
className="shadow"
|
||||
onClick={remove}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BookCoverContainer className="flex w-[180px] flex-col justify-center rounded-l-sm rounded-r-md bg-gray-100 p-3 shadow-lg">
|
||||
<button
|
||||
className="flex h-full w-full flex-col items-center justify-center gap-3 text-gray-500 transition-colors hover:text-gray-600"
|
||||
type="button"
|
||||
onClick={onUploadClick}
|
||||
>
|
||||
<PlusIcon className="h-10 w-10" />
|
||||
Upload book cover
|
||||
</button>
|
||||
<label className="sr-only">
|
||||
Cover
|
||||
<input ref={inputRef} type="file" onChange={onImageChange} />
|
||||
</label>
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookCover({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly?: boolean;
|
||||
}) {
|
||||
if (readOnly) return <BookCoverReadOnly bookReview={bookReview} />;
|
||||
|
||||
return <BookCoverInput bookReview={bookReview} />;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { BookReview } from "@/schema";
|
||||
import Rating from "@/components/Rating";
|
||||
import { Group } from "jazz-tools";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import { BookCover } from "@/components/BookCover";
|
||||
|
||||
export function BookReviewHeader({ bookReview }: { bookReview: BookReview }) {
|
||||
const { title, author, rating, review, dateRead } = bookReview;
|
||||
|
||||
return (
|
||||
<div className="grid gap-5">
|
||||
<div>
|
||||
<h1 className="mb-1 font-serif text-2xl font-bold md:mb-3 lg:text-4xl">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-500">by {author}</p>
|
||||
</div>
|
||||
|
||||
{bookReview._owner.castAs(Group).myRole() === "admin" ? (
|
||||
<RatingInput
|
||||
onChange={rating => (bookReview.rating = rating)}
|
||||
value={rating}
|
||||
/>
|
||||
) : (
|
||||
<Rating className="mx-auto text-2xl sm:mx-0" rating={rating} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { BookReview } from "../schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import Link from "next/link";
|
||||
import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
|
||||
export function BookReviewThumbnail({ id }: { id: ID<BookReview> }) {
|
||||
const bookReview = useCoState(BookReview, id);
|
||||
|
||||
if (!bookReview) return <></>;
|
||||
|
||||
return (
|
||||
<div className="inline-flex shrink-0 gap-4 rounded border p-4 sm:block sm:space-y-6 sm:border-0 sm:p-0 md:w-[200px]">
|
||||
<Link href={`/book/${bookReview.id}`} className="sm:block sm:flex-1">
|
||||
<BookCoverReadOnly bookReview={bookReview} />
|
||||
</Link>
|
||||
|
||||
<div className="flex-1">
|
||||
<Link href={`/book/${bookReview.id}`}>
|
||||
<h2 className="mb-1 text-sm font-medium">{bookReview.title}</h2>
|
||||
</Link>
|
||||
<div className="mb-2 flex flex-col gap-2 text-sm text-gray-500 sm:flex-row sm:items-center">
|
||||
<p>{bookReview.author}</p>
|
||||
<div className="flex items-center gap-0.5 text-xs font-semibold leading-none">
|
||||
<StarIcon className="-mt-px text-base text-yellow-400" />
|
||||
{bookReview.rating}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import type { ComponentProps } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface Props {
|
||||
variant?: "primary" | "secondary" | "tertiary";
|
||||
className?: string;
|
||||
size?: "sm" | "md" | "lg";
|
||||
}
|
||||
|
||||
interface AnchorProps
|
||||
extends Props,
|
||||
React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
href: string;
|
||||
}
|
||||
|
||||
type ButtonProps = ComponentProps<"button"> & Props;
|
||||
|
||||
export function Button(props: AnchorProps | ButtonProps) {
|
||||
const {
|
||||
className: customClassName = "",
|
||||
variant = "primary",
|
||||
children,
|
||||
size = "md",
|
||||
} = props;
|
||||
|
||||
const variantClassNames = {
|
||||
base: "inline-flex gap-2 items-center justify-center rounded-full overflow-hidden transition-colors",
|
||||
primary:
|
||||
"bg-purple-300 font-medium text-purple-950 px-4 py-2 rounded-full hover:bg-purple-200",
|
||||
secondary:
|
||||
"rounded-full bg-slate-100 font-medium text-slate-600 hover:bg-slate-200",
|
||||
tertiary: "rounded-full bg-white text-purple-950 font-medium",
|
||||
};
|
||||
|
||||
const sizeClassNames = {
|
||||
sm: "py-1.5 px-3 text-sm",
|
||||
md: "py-2 px-5",
|
||||
lg: "py-2 md:py-2.5 px-6 md:text-lg",
|
||||
};
|
||||
|
||||
const className = clsx(
|
||||
customClassName,
|
||||
variantClassNames.base,
|
||||
variantClassNames[variant],
|
||||
sizeClassNames[size]
|
||||
);
|
||||
|
||||
if (!!(props as AnchorProps).href) {
|
||||
const anchorProps = props as AnchorProps;
|
||||
return (
|
||||
<Link href={anchorProps.href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const buttonProps = props as ButtonProps;
|
||||
|
||||
return (
|
||||
<button {...buttonProps} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
export function Container({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("mx-auto max-w-4xl px-4", className)}>{children}</div>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { createJazzReactApp, useDemoAuth, DemoAuthBasicUI } from "jazz-react";
|
||||
import { JazzAccount } from "@/schema";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
export function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
// replace `you@example.com` with your email as a temporary API key
|
||||
peer="wss://mesh.jazz.tools/?key=you@example.com"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Jazz Book Shelf" state={authState} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export function Nav() {
|
||||
const { me, logOut } = useAccount();
|
||||
|
||||
return (
|
||||
<nav className="border-b py-3">
|
||||
<Container className="flex items-center justify-between gap-12 text-sm">
|
||||
<Link href="/" className="font-serif text-lg font-semibold">
|
||||
Jazz Book Shelf
|
||||
</Link>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<p>{me?.profile?.name}</p>
|
||||
<Button variant="secondary" onClick={logOut}>
|
||||
Log out
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
|
||||
|
||||
export default function Rating({
|
||||
rating,
|
||||
className = "",
|
||||
}: {
|
||||
rating?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const max = 5;
|
||||
const outline = max - (rating || 0);
|
||||
return (
|
||||
<div className={`inline-flex gap-0.5 text-yellow-400 ${className}`}>
|
||||
{rating ? [...Array(rating)].map((x, i) => <StarIcon key={i} />) : <></>}
|
||||
{[...Array(outline)].map((x, i) => (
|
||||
<StarOutlineIcon key={i} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface RatingInputProps {
|
||||
value?: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function RatingInput({
|
||||
value = 0,
|
||||
onChange,
|
||||
className,
|
||||
}: RatingInputProps) {
|
||||
const handleChange = (newRating: number) => {
|
||||
onChange(newRating > 5 ? 5 : newRating);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(className, "flex gap-0.5 text-2xl text-yellow-400")}>
|
||||
{[...Array(5)].map((_, i) => {
|
||||
return i < value ? (
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none"
|
||||
onClick={() => handleChange(i + 1)}
|
||||
key={i}
|
||||
>
|
||||
<StarIcon />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none"
|
||||
onClick={() => handleChange(i + 1)}
|
||||
key={i}
|
||||
>
|
||||
<StarOutlineIcon />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
|
||||
import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
|
||||
const user = useCoState(JazzAccount, id);
|
||||
const profile = useCoState(JazzProfile, user?.profile?.id);
|
||||
|
||||
const bookReviews = useCoState(
|
||||
ListOfBookReviews,
|
||||
user?.profile?._refs.bookReviews?.id,
|
||||
[{}]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-serif text-lg font-medium sm:text-2xl">
|
||||
{profile?.name}'s book shelf
|
||||
</h1>
|
||||
{profile?._owner.castAs(Group).myRole() === "admin" && (
|
||||
<Button href="/add" variant="primary">
|
||||
Add book
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{bookReviews?.map(bookReview => (
|
||||
<BookReviewThumbnail key={bookReview.id} id={bookReview.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function PlusIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export default function StarIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function StarOutlineIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import {
|
||||
CoMap,
|
||||
co,
|
||||
CoList,
|
||||
Account,
|
||||
Profile,
|
||||
ImageDefinition,
|
||||
Encoders,
|
||||
} from "jazz-tools";
|
||||
|
||||
export class BookReview extends CoMap {
|
||||
title = co.string;
|
||||
author = co.string;
|
||||
rating = co.number;
|
||||
dateRead? = co.encoded(Encoders.Date);
|
||||
review? = co.string;
|
||||
cover? = co.ref(ImageDefinition, { optional: true });
|
||||
}
|
||||
|
||||
export class ListOfBookReviews extends CoList.Of(co.ref(BookReview)) {}
|
||||
|
||||
/** The profile is an app-specific per-user public `CoMap`
|
||||
* where you can store top-level objects for that user */
|
||||
export class JazzProfile extends Profile {
|
||||
bookReviews = co.ref(ListOfBookReviews);
|
||||
}
|
||||
|
||||
export class JazzAccount extends Account {
|
||||
profile = co.ref(JazzProfile);
|
||||
|
||||
/** The account migration is run on account creation and on every log-in.
|
||||
* You can use it to set up the account root and any other initial CoValues you need.
|
||||
*/
|
||||
migrate(this: JazzAccount, creationProps?: { name: string }) {
|
||||
super.migrate(creationProps);
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
const colors = require("tailwindcss/colors");
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
serif: ["var(--font-fraunces)"],
|
||||
},
|
||||
colors: {
|
||||
purple: {
|
||||
...colors.purple,
|
||||
950: "#211f5a",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
@@ -1,42 +1,5 @@
|
||||
# jazz-example-chat
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
- jazz-react-auth-clerk@0.8.5
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-react-auth-clerk@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
- jazz-react-auth-clerk@0.8.2
|
||||
|
||||
## 0.0.81
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-chat-clerk",
|
||||
"private": true,
|
||||
"version": "0.0.85",
|
||||
"version": "0.0.81",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -21,11 +21,11 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"cojson": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"jazz-react": "workspace:0.8.5",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.5",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"lucide-react": "^0.274.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"react": "^18.2.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "3.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
|
||||
@@ -7,14 +7,13 @@ import { AppContainer, TopBar } from "./ui.tsx";
|
||||
|
||||
export function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
const router = useIframeHashRouter();
|
||||
|
||||
const createChat = () => {
|
||||
if (!me) return;
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], { owner: group });
|
||||
router.navigate("/#/chat/" + chat.id);
|
||||
location.hash = "/chat/" + chat.id;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -22,7 +21,7 @@ export function App() {
|
||||
<TopBar>
|
||||
{me?.profile?.name} · <button onClick={logOut}>Log out</button>
|
||||
</TopBar>
|
||||
{router.route({
|
||||
{useIframeHashRouter().route({
|
||||
"/": () => createChat() as never,
|
||||
"/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
|
||||
})}
|
||||
|
||||
38
examples/chat-rn/.gitignore
vendored
38
examples/chat-rn/.gitignore
vendored
@@ -1,38 +0,0 @@
|
||||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
|
||||
# Native
|
||||
*.orig.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# debug
|
||||
npm-debug.*
|
||||
yarn-debug.*
|
||||
yarn-error.*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
ios
|
||||
android
|
||||
@@ -1,18 +0,0 @@
|
||||
# chat-rn
|
||||
|
||||
## 1.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-react-native@0.8.5
|
||||
- jazz-tools@0.8.5
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- jazz-react-native@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
@@ -1,46 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "jazz-chat-rn",
|
||||
"scheme": "jazz-chat-rn",
|
||||
"slug": "jazz-chat-rn",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.jazz.chatrn"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"package": "com.jazz.chatrn"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"expo-build-properties",
|
||||
{
|
||||
"ios": {
|
||||
"newArchEnabled": true
|
||||
},
|
||||
"android": {
|
||||
"newArchEnabled": true
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "e0e61872-1906-4c84-b9d8-9be77355cad0"
|
||||
}
|
||||
},
|
||||
"owner": "paxx"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
@@ -1,10 +0,0 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
plugins: [
|
||||
"nativewind/babel",
|
||||
"@babel/plugin-transform-class-static-block",
|
||||
],
|
||||
};
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 12.5.1",
|
||||
"appVersionSource": "remote"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"ios-simulator": {
|
||||
"extends": "development",
|
||||
"ios": {
|
||||
"simulator": true
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {
|
||||
"autoIncrement": true
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import "./polyfills";
|
||||
import { registerRootComponent } from "expo";
|
||||
import App from "./src/App";
|
||||
|
||||
registerRootComponent(App);
|
||||
@@ -1,29 +0,0 @@
|
||||
// Learn more https://docs.expo.dev/guides/monorepos
|
||||
const { getDefaultConfig } = require("expo/metro-config");
|
||||
const { FileStore } = require("metro-cache");
|
||||
const path = require("path");
|
||||
|
||||
const projectRoot = __dirname;
|
||||
const workspaceRoot = path.resolve(projectRoot, "../..");
|
||||
|
||||
const config = getDefaultConfig(projectRoot);
|
||||
|
||||
// Since we are using pnpm, we have to setup the monorepo manually for Metro
|
||||
// #1 - Watch all files in the monorepo
|
||||
config.watchFolders = [workspaceRoot];
|
||||
// #2 - Try resolving with project modules first, then workspace modules
|
||||
config.resolver.nodeModulesPaths = [
|
||||
path.resolve(projectRoot, "node_modules"),
|
||||
path.resolve(workspaceRoot, "node_modules"),
|
||||
];
|
||||
config.resolver.sourceExts = ["js", "json", "ts", "tsx"];
|
||||
config.resolver.unstable_enablePackageExports = true;
|
||||
|
||||
// Use turborepo to restore the cache when possible
|
||||
config.cacheStores = [
|
||||
new FileStore({
|
||||
root: path.join(projectRoot, "node_modules", ".cache", "metro"),
|
||||
}),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
1
examples/chat-rn/nativewind-env.d.ts
vendored
1
examples/chat-rn/nativewind-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="nativewind/types" />
|
||||
@@ -1,49 +0,0 @@
|
||||
{
|
||||
"name": "chat-rn",
|
||||
"version": "1.0.2",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo run:android",
|
||||
"ios": "expo run:ios",
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@azure/core-asynciterator-polyfill": "^1.0.2",
|
||||
"@react-native-community/netinfo": "^11.3.1",
|
||||
"@react-navigation/native": "^6.1.18",
|
||||
"@react-navigation/native-stack": "^6.11.0",
|
||||
"base-64": "^1.0.0",
|
||||
"clsx": "^2.0.0",
|
||||
"expo": "~51.0.36",
|
||||
"expo-build-properties": "~0.12.5",
|
||||
"expo-clipboard": "~6.0.3",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-crypto": "~13.0.2",
|
||||
"expo-dev-client": "~4.0.27",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"jazz-react-native": "workspace:*",
|
||||
"jazz-tools": "workspace:*",
|
||||
"nativewind": "^2.0.11",
|
||||
"react": "^18.2.0",
|
||||
"react-native": "~0.74.5",
|
||||
"react-native-fetch-api": "^3.0.0",
|
||||
"react-native-get-random-values": "^1.11.0",
|
||||
"react-native-mmkv": "3.0.1",
|
||||
"react-native-polyfill-globals": "^3.1.0",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-url-polyfill": "^2.0.0",
|
||||
"text-encoding": "^0.7.0",
|
||||
"web-streams-polyfill": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
"@babel/plugin-transform-class-static-block": "^7.24.7",
|
||||
"@types/react": "^18.2.19",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import "react-native-polyfill-globals/auto";
|
||||
import "@azure/core-asynciterator-polyfill";
|
||||
import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
|
||||
import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
|
||||
|
||||
polyfillGlobal("ReadableStream", () => ReadableStream);
|
||||
@@ -1,78 +0,0 @@
|
||||
import React, { StrictMode, useEffect, useState } from "react";
|
||||
import {
|
||||
NavigationContainer,
|
||||
useNavigationContainerRef,
|
||||
} from "@react-navigation/native";
|
||||
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import * as Linking from "expo-linking";
|
||||
import HandleInviteScreen from "./invite";
|
||||
|
||||
import { useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
|
||||
import ChatScreen from "./chat";
|
||||
import { Jazz } from "./jazz";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
|
||||
const prefix = Linking.createURL("/");
|
||||
|
||||
const linking = {
|
||||
prefixes: [prefix],
|
||||
config: {
|
||||
screens: {
|
||||
HandleInviteScreen: {
|
||||
path: "router/invite/:valueHint?/:valueID/:inviteSecret",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [auth, state] = useDemoAuth();
|
||||
const [initialRoute, setInitialRoute] = useState<
|
||||
"ChatScreen" | "HandleInviteScreen"
|
||||
>("ChatScreen");
|
||||
const navigationRef = useNavigationContainerRef();
|
||||
|
||||
useEffect(() => {
|
||||
Linking.getInitialURL().then((url) => {
|
||||
if (url) {
|
||||
if (url && url.includes("invite")) {
|
||||
setInitialRoute("HandleInviteScreen");
|
||||
}
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!auth) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://mesh.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
|
||||
storage={undefined}
|
||||
>
|
||||
<NavigationContainer linking={linking} ref={navigationRef}>
|
||||
<Stack.Navigator initialRouteName={initialRoute}>
|
||||
<Stack.Screen
|
||||
options={{ title: "Jazz Chat" }}
|
||||
name="ChatScreen"
|
||||
component={ChatScreen}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="HandleInviteScreen"
|
||||
component={HandleInviteScreen}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</Jazz.Provider>
|
||||
{state.state !== "signedIn" ? (
|
||||
<DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
) : null}
|
||||
</StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,208 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import React, {
|
||||
Button,
|
||||
FlatList,
|
||||
KeyboardAvoidingView,
|
||||
SafeAreaView,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import clsx from "clsx";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
|
||||
import { Chat, Message } from "./schema";
|
||||
import { useAccount, useCoState } from "./jazz";
|
||||
|
||||
export default function ChatScreen({ navigation }: { navigation: any }) {
|
||||
const { me, logOut } = useAccount();
|
||||
const [chat, setChat] = useState<Chat>();
|
||||
const [message, setMessage] = useState("");
|
||||
const loadedChat = useCoState(Chat, chat?.id, [{}]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: () => <Button onPress={logOut} title="Logout" />,
|
||||
headerLeft: () =>
|
||||
chat ? (
|
||||
<Button
|
||||
onPress={() => {
|
||||
if (chat?.id) {
|
||||
Clipboard.setStringAsync(
|
||||
`https://chat.jazz.tools/#/chat/${chat.id}`,
|
||||
);
|
||||
Alert.alert(
|
||||
"Copied to clipboard",
|
||||
`Chat ID: ${chat.id}`,
|
||||
);
|
||||
}
|
||||
}}
|
||||
title="Share"
|
||||
/>
|
||||
) : null,
|
||||
});
|
||||
}, [navigation, chat]);
|
||||
|
||||
const createChat = () => {
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], { owner: group });
|
||||
setChat(chat);
|
||||
};
|
||||
|
||||
const loadChat = async (chatId: ID<Chat>) => {
|
||||
try {
|
||||
const chat = await Chat.load(chatId, me, []);
|
||||
setChat(chat);
|
||||
} catch (error) {
|
||||
console.log("Error loading chat", error);
|
||||
Alert.alert("Error", `Error loading chat: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
const joinChat = () => {
|
||||
Alert.prompt(
|
||||
"Join Chat",
|
||||
"Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel",
|
||||
},
|
||||
{
|
||||
text: "Join",
|
||||
onPress: (chatId) => {
|
||||
if (chatId) {
|
||||
loadChat(chatId as ID<Chat>);
|
||||
} else {
|
||||
Alert.alert("Error", "Chat ID cannot be empty.");
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
"plain-text",
|
||||
);
|
||||
};
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!chat) return;
|
||||
if (message.trim()) {
|
||||
chat.push(
|
||||
Message.create({ text: message }, { owner: chat._owner }),
|
||||
);
|
||||
setMessage("");
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessageItem = ({ item }: { item: Message }) => {
|
||||
const isMe = item._edits.text.by?.isMe;
|
||||
return (
|
||||
<View
|
||||
className={clsx(
|
||||
`rounded-lg p-1 px-1.5 max-w-[80%] `,
|
||||
|
||||
isMe
|
||||
? `bg-gray-200 self-end text-right`
|
||||
: `bg-gray-300 self-start `,
|
||||
)}
|
||||
>
|
||||
{!isMe ? (
|
||||
<Text
|
||||
className={clsx(
|
||||
`text-xs text-gray-500`,
|
||||
isMe ? "text-right" : "text-left",
|
||||
)}
|
||||
>
|
||||
{item._edits.text.by?.profile?.name}
|
||||
</Text>
|
||||
) : null}
|
||||
<View
|
||||
className={clsx(
|
||||
"flex relative items-end justify-between",
|
||||
isMe ? "flex-row" : "flex-row",
|
||||
)}
|
||||
>
|
||||
<Text className={clsx(`text-black text-md max-w-[85%]`)}>
|
||||
{item.text}
|
||||
</Text>
|
||||
<Text
|
||||
className={clsx(
|
||||
"text-[10px] text-gray-500 text-right ml-2",
|
||||
!isMe ? "mt-2" : "mt-1",
|
||||
)}
|
||||
>
|
||||
{item._edits.text.madeAt.getHours()}:
|
||||
{item._edits.text.madeAt.getMinutes()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex flex-col h-full">
|
||||
{!chat ? (
|
||||
<View className="flex flex-col h-full items-center justify-center">
|
||||
<TouchableOpacity
|
||||
onPress={createChat}
|
||||
className="bg-blue-500 p-4 rounded-md"
|
||||
>
|
||||
<Text className="text-white font-semibold">
|
||||
Start new chat
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={joinChat}
|
||||
className="bg-green-500 p-4 rounded-md mt-4"
|
||||
>
|
||||
<Text className="text-white font-semibold">
|
||||
Join chat
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<FlatList
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
flex: 1,
|
||||
gap: 6,
|
||||
padding: 8,
|
||||
}}
|
||||
className="flex"
|
||||
data={loadedChat}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={renderMessageItem}
|
||||
/>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
keyboardVerticalOffset={110}
|
||||
behavior="padding"
|
||||
className="p-3 bg-white border-t border-gray-300"
|
||||
>
|
||||
<SafeAreaView className="flex flex-row items-center gap-2">
|
||||
<TextInput
|
||||
className="rounded-full h-8 py-0 px-2 border border-gray-200 block flex-1"
|
||||
value={message}
|
||||
onChangeText={setMessage}
|
||||
placeholder="Type a message..."
|
||||
textAlignVertical="center"
|
||||
onSubmitEditing={sendMessage}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={sendMessage}
|
||||
className="bg-gray-300 text-white rounded-full h-8 w-8 items-center justify-center"
|
||||
>
|
||||
<Text>↑</Text>
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
</KeyboardAvoidingView>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import React, { Text } from "react-native";
|
||||
import { useAcceptInvite } from "./jazz";
|
||||
import { Chat } from "./schema";
|
||||
|
||||
type ChatScreenParams = {
|
||||
valueHint?: string;
|
||||
valueID?: string;
|
||||
inviteSecret?: string;
|
||||
};
|
||||
|
||||
export default function HandleInviteScreen({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: any;
|
||||
}) {
|
||||
useAcceptInvite({
|
||||
invitedObjectSchema: Chat,
|
||||
onAccept: async (chatId) => {
|
||||
navigation.navigate("ChatScreen", { chatId });
|
||||
},
|
||||
});
|
||||
|
||||
return <Text>Accepting invite...</Text>;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createJazzRNApp } from "jazz-react-native";
|
||||
import { MMKVStorage } from "./mmkv-storage";
|
||||
import { Account } from "jazz-tools";
|
||||
|
||||
const nativeStorage = new MMKVStorage();
|
||||
|
||||
export const Jazz = createJazzRNApp({ nativeStorage });
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { MMKV } from "react-native-mmkv";
|
||||
import type { NativeStorage } from "jazz-react-native";
|
||||
|
||||
const storage = new MMKV();
|
||||
|
||||
export class MMKVStorage implements NativeStorage {
|
||||
get(key: string): Promise<string | undefined> {
|
||||
return Promise.resolve(storage.getString(key));
|
||||
}
|
||||
|
||||
set(key: string, value: string): Promise<void> {
|
||||
storage.set(key, value);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
delete(key: string): Promise<void> {
|
||||
storage.delete(key);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
clearAll(): Promise<void> {
|
||||
storage.clearAll();
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { CoMap, CoList, co } from "jazz-tools";
|
||||
|
||||
export class Message extends CoMap {
|
||||
text = co.string;
|
||||
}
|
||||
|
||||
export class Chat extends CoList.Of(co.ref(Message)) {}
|
||||
@@ -1,12 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./app/**/*.{js,jsx,ts,tsx}",
|
||||
"./components/**/*.{js,jsx,ts,tsx}",
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
},
|
||||
"exclude": [
|
||||
"src/tests"
|
||||
]
|
||||
}
|
||||
7
examples/chat/.gitignore
vendored
7
examples/chat/.gitignore
vendored
@@ -23,9 +23,4 @@ dist-ssr
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
sync-db/
|
||||
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
sync-db/
|
||||
@@ -1,40 +1,5 @@
|
||||
# jazz-example-chat
|
||||
|
||||
## 0.0.87
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.86
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Parent-frame friendlier naviation
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-full">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/jazz-logo.png" />
|
||||
@@ -7,8 +7,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jazz Chat Example</title>
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<div id="root" class="h-full"></div>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/app.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
{
|
||||
"name": "jazz-example-chat",
|
||||
"private": true,
|
||||
"version": "0.0.87",
|
||||
"version": "0.0.83",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"format": "echo 'chat example is codegolfed'",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"test:ui": "playwright test --ui"
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx}": "eslint --fix",
|
||||
@@ -22,10 +20,10 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"cojson": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"jazz-react": "workspace:0.8.5",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"lucide-react": "^0.274.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"react": "^18.2.0",
|
||||
@@ -38,7 +36,6 @@
|
||||
"uniqolor": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@types/qrcode": "^1.5.1",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
@@ -49,9 +46,8 @@
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"is-ci": "^3.0.1",
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "3.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
import isCI from "is-ci";
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// import dotenv from 'dotenv';
|
||||
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: "./tests",
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: isCI,
|
||||
/* Retry on CI only */
|
||||
retries: isCI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: isCI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: "html",
|
||||
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: "on-first-retry",
|
||||
permissions: ["clipboard-read", "clipboard-write"],
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: { ...devices["Desktop Chrome"] },
|
||||
},
|
||||
],
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: isCI ? {
|
||||
command: "pnpm preview",
|
||||
url: "http://localhost:4173/",
|
||||
} : undefined,
|
||||
});
|
||||
@@ -7,22 +7,21 @@ import { AppContainer, TopBar } from "./ui.tsx";
|
||||
|
||||
export function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
const router = useIframeHashRouter();
|
||||
|
||||
const createChat = () => {
|
||||
if (!me) return;
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], { owner: group });
|
||||
router.navigate("/#/chat/" + chat.id);
|
||||
location.hash = "/chat/" + chat.id;
|
||||
};
|
||||
|
||||
return (
|
||||
<AppContainer>
|
||||
<TopBar>
|
||||
<p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
|
||||
{me?.profile?.name} · <button onClick={logOut}>Log out</button>
|
||||
</TopBar>
|
||||
{router.route({
|
||||
{useIframeHashRouter().route({
|
||||
"/": () => createChat() as never,
|
||||
"/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
|
||||
})}
|
||||
|
||||
@@ -5,44 +5,29 @@ import {
|
||||
BubbleBody,
|
||||
BubbleContainer,
|
||||
BubbleInfo,
|
||||
ChatBody,
|
||||
ChatContainer,
|
||||
ChatInput,
|
||||
EmptyChatMessage,
|
||||
} from "./ui.tsx";
|
||||
import { useState } from "react";
|
||||
|
||||
export function ChatScreen(props: { chatID: ID<Chat> }) {
|
||||
const chat = useCoState(Chat, props.chatID, [{}]);
|
||||
const [showNLastMessages, setShowNLastMessages] = useState(30);
|
||||
|
||||
return chat ? (
|
||||
<>
|
||||
<ChatBody>
|
||||
{chat.length > 0 ? (
|
||||
chat
|
||||
.slice(-showNLastMessages)
|
||||
.reverse() // this plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
|
||||
.map(msg => <ChatBubble msg={msg} key={msg.id} />)
|
||||
) : (
|
||||
<EmptyChatMessage />
|
||||
)}
|
||||
{chat.length > showNLastMessages && (
|
||||
<button
|
||||
className="px-4 py-1 block mx-auto my-2 border rounded"
|
||||
onClick={() => setShowNLastMessages(showNLastMessages + 10)}
|
||||
>
|
||||
Show more
|
||||
</button>
|
||||
)}
|
||||
</ChatBody>
|
||||
<ChatContainer>
|
||||
{chat.length > 0 ? (
|
||||
chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
|
||||
) : (
|
||||
<EmptyChatMessage />
|
||||
)}
|
||||
<ChatInput
|
||||
onSubmit={text => {
|
||||
chat.push(Message.create({ text }, { owner: chat._owner }));
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</ChatContainer>
|
||||
) : (
|
||||
<div className="flex-1 flex justify-center items-center">Loading...</div>
|
||||
<div>Loading...</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,8 @@ export const { useAccount, useCoState } = Jazz;
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, state] = useDemoAuth();
|
||||
|
||||
console.log(state, auth)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
@@ -17,10 +19,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
{
|
||||
state.state !== "signedIn"
|
||||
&& <DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
}
|
||||
{state.state !== "signedIn" && <DemoAuthBasicUI appName="Jazz Chat" state={state} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useId } from "react";
|
||||
|
||||
export function AppContainer(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
|
||||
<div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
@@ -10,22 +8,20 @@ export function AppContainer(props: { children: React.ReactNode }) {
|
||||
|
||||
export function TopBar(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800">
|
||||
{props.children}
|
||||
</div>
|
||||
<div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChatBody(props: { children: React.ReactNode }) {
|
||||
export function ChatContainer(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
|
||||
<div className="w-full max-w-xl h-full flex flex-col items-stretch">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function EmptyChatMessage() {
|
||||
return <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl">Start a conversation below.</div>;
|
||||
return <div className="m-auto text-sm">(Empty chat)</div>;
|
||||
}
|
||||
|
||||
export function BubbleContainer(props: {
|
||||
@@ -33,12 +29,12 @@ export function BubbleContainer(props: {
|
||||
fromMe: boolean | undefined;
|
||||
}) {
|
||||
const align = props.fromMe ? "items-end" : "items-start";
|
||||
return <div className={`${align} flex flex-col m-2`} role="row">{props.children}</div>;
|
||||
return <div className={`${align} flex flex-col`}>{props.children}</div>;
|
||||
}
|
||||
|
||||
export function BubbleBody(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
|
||||
<div className="rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
@@ -46,29 +42,22 @@ export function BubbleBody(props: { children: React.ReactNode }) {
|
||||
|
||||
export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
|
||||
return (
|
||||
<div className="text-xs text-neutral-500 mt-1.5">
|
||||
{props.by} · {props.madeAt.toLocaleTimeString()}
|
||||
<div className="text-xs text-neutral-500 ml-2">
|
||||
{props.by} {props.madeAt.toLocaleTimeString()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChatInput(props: { onSubmit: (text: string) => void }) {
|
||||
const inputId = useId();
|
||||
|
||||
return (
|
||||
<div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
|
||||
<label className="sr-only" htmlFor={inputId}>Type a message and press Enter</label>
|
||||
<input
|
||||
id={inputId}
|
||||
className="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
|
||||
placeholder="Type a message and press Enter"
|
||||
maxLength={2048}
|
||||
onKeyDown={({ key, currentTarget: input }) => {
|
||||
if (key !== "Enter" || !input.value) return;
|
||||
props.onSubmit(input.value);
|
||||
input.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
className="rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700"
|
||||
placeholder="Type a message and press Enter"
|
||||
onKeyDown={({ key, currentTarget: input }) => {
|
||||
if (key !== "Enter" || !input.value) return;
|
||||
props.onSubmit(input.value);
|
||||
input.value = "";
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,9 +69,6 @@ module.exports = {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
lineClamp: {
|
||||
10: '10',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { test } from "@playwright/test";
|
||||
import { LoginPage } from "./pages/LoginPage";
|
||||
import { ChatPage } from "./pages/ChatPage";
|
||||
|
||||
test("chat between two users", async ({ page }) => {
|
||||
const loginPage = new LoginPage(page);
|
||||
|
||||
const mario = "S. Mario";
|
||||
const luigi = "Luigi";
|
||||
|
||||
await loginPage.goto();
|
||||
await loginPage.fillUsername(mario);
|
||||
await loginPage.signup();
|
||||
|
||||
const chatPage = new ChatPage(page);
|
||||
|
||||
const message1ByMario = "Hello Luigi, are you ready to save the princess?"
|
||||
|
||||
await chatPage.sendMessage(message1ByMario);
|
||||
await chatPage.expectMessageRow(message1ByMario);
|
||||
|
||||
const roomURL = page.url();
|
||||
|
||||
await chatPage.logout();
|
||||
|
||||
await loginPage.expectLoaded();
|
||||
|
||||
await loginPage.fillUsername(luigi);
|
||||
await loginPage.signup();
|
||||
|
||||
await page.goto(roomURL);
|
||||
|
||||
await chatPage.expectMessageRow(message1ByMario);
|
||||
|
||||
const message2ByLuigi = "No, I'm not ready yet. I'm still trying to find the key to the castle."
|
||||
|
||||
await chatPage.sendMessage(message2ByLuigi);
|
||||
await chatPage.expectMessageRow(message2ByLuigi);
|
||||
|
||||
// This breaks with (Error: Error reading from peer storage, handling msg)
|
||||
// await chatPage.logout();
|
||||
// await loginPage.loginAs(mario);
|
||||
|
||||
// await chatPage.expectLoaded();
|
||||
|
||||
// await page.goto(roomURL);
|
||||
|
||||
// await chatPage.expectMessageRow(message1ByMario);
|
||||
// await chatPage.expectMessageRow(message2ByLuigi);
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Page, Locator, expect } from "@playwright/test";
|
||||
|
||||
export class ChatPage {
|
||||
readonly page: Page;
|
||||
readonly messageInput: Locator;
|
||||
readonly logoutButton: Locator;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
this.messageInput = page.getByRole("textbox", {
|
||||
name: "Type a message and press Enter"
|
||||
});
|
||||
this.logoutButton = page.getByRole("button", {
|
||||
name: "Log out",
|
||||
});
|
||||
}
|
||||
|
||||
async sendMessage(message: string) {
|
||||
await this.messageInput.fill(message);
|
||||
await this.messageInput.press("Enter");
|
||||
}
|
||||
|
||||
async expectLoaded() {
|
||||
await expect(this.messageInput).toBeVisible();
|
||||
}
|
||||
|
||||
async expectMessageRow(message: string) {
|
||||
await expect(this.page.getByText(message)).toBeVisible();
|
||||
}
|
||||
|
||||
async logout() {
|
||||
await this.logoutButton.click();
|
||||
await this.page.goto("/");
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { Page, Locator, expect } from "@playwright/test";
|
||||
|
||||
export class LoginPage {
|
||||
readonly page: Page;
|
||||
readonly usernameInput: Locator;
|
||||
readonly signupButton: Locator;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
this.usernameInput = page.getByRole("textbox");
|
||||
this.signupButton = page.getByRole("button", {
|
||||
name: "Sign up",
|
||||
});
|
||||
}
|
||||
|
||||
async goto() {
|
||||
this.page.goto("/");
|
||||
}
|
||||
|
||||
async fillUsername(value: string) {
|
||||
await this.usernameInput.clear();
|
||||
await this.usernameInput.fill(value);
|
||||
}
|
||||
|
||||
async loginAs(value: string) {
|
||||
await this.page
|
||||
.getByRole("button", {
|
||||
name: `Log in as "${value}"`,
|
||||
})
|
||||
.click();
|
||||
}
|
||||
|
||||
async signup() {
|
||||
await this.signupButton.click();
|
||||
}
|
||||
|
||||
async expectLoaded() {
|
||||
await expect(this.signupButton).toBeVisible();
|
||||
}
|
||||
}
|
||||
@@ -1,267 +1,243 @@
|
||||
# jazz-example-inspector
|
||||
|
||||
## 0.0.63
|
||||
## 0.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- cojson@0.8.5
|
||||
- cojson-transport-ws@0.8.5
|
||||
|
||||
## 0.0.62
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.61
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- cojson-transport-ws@0.8.3
|
||||
- Updated dependencies [6a147c2]
|
||||
- Updated dependencies [ad40b88]
|
||||
- cojson@0.8.0
|
||||
- cojson-transport-ws@0.8.0
|
||||
|
||||
## 0.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [6a147c2]
|
||||
- Updated dependencies [ad40b88]
|
||||
- cojson@0.8.0
|
||||
- cojson-transport-ws@0.8.0
|
||||
|
||||
## 0.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
|
||||
- Updated dependencies [35bbcd9]
|
||||
- Updated dependencies [f350e90]
|
||||
- cojson@0.7.35
|
||||
- cojson-transport-ws@0.7.35
|
||||
- 63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
|
||||
- Updated dependencies [35bbcd9]
|
||||
- Updated dependencies [f350e90]
|
||||
- cojson@0.7.35
|
||||
- cojson-transport-ws@0.7.35
|
||||
|
||||
## 0.0.59
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5d91f9f]
|
||||
- Updated dependencies [5094e6d]
|
||||
- Updated dependencies [b09589b]
|
||||
- Updated dependencies [2c3a40c]
|
||||
- Updated dependencies [406ab9b]
|
||||
- Updated dependencies [4e16575]
|
||||
- Updated dependencies [ea882ab]
|
||||
- cojson@0.7.34
|
||||
- cojson-transport-ws@0.7.34
|
||||
- Updated dependencies [5d91f9f]
|
||||
- Updated dependencies [5094e6d]
|
||||
- Updated dependencies [b09589b]
|
||||
- Updated dependencies [2c3a40c]
|
||||
- Updated dependencies [406ab9b]
|
||||
- Updated dependencies [4e16575]
|
||||
- Updated dependencies [ea882ab]
|
||||
- cojson@0.7.34
|
||||
- cojson-transport-ws@0.7.34
|
||||
|
||||
## 0.0.59-neverthrow.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.8
|
||||
- cojson-transport-ws@0.7.34-neverthrow.8
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.8
|
||||
- cojson-transport-ws@0.7.34-neverthrow.8
|
||||
|
||||
## 0.0.59-neverthrow.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.7
|
||||
- cojson-transport-ws@0.7.34-neverthrow.7
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.7
|
||||
- cojson-transport-ws@0.7.34-neverthrow.7
|
||||
|
||||
## 0.0.59-neverthrow.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.4
|
||||
- cojson-transport-ws@0.7.34-neverthrow.4
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.4
|
||||
- cojson-transport-ws@0.7.34-neverthrow.4
|
||||
|
||||
## 0.0.59-neverthrow.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.3
|
||||
- cojson-transport-ws@0.7.34-neverthrow.3
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.3
|
||||
- cojson-transport-ws@0.7.34-neverthrow.3
|
||||
|
||||
## 0.0.59-neverthrow.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.34-neverthrow.2
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.34-neverthrow.2
|
||||
|
||||
## 0.0.59-neverthrow.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.1
|
||||
- cojson-transport-ws@0.7.34-neverthrow.1
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.1
|
||||
- cojson-transport-ws@0.7.34-neverthrow.1
|
||||
|
||||
## 0.0.59-neverthrow.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.0
|
||||
- cojson-transport-ws@0.7.34-neverthrow.0
|
||||
- Updated dependencies
|
||||
- cojson@0.7.34-neverthrow.0
|
||||
- cojson-transport-ws@0.7.34-neverthrow.0
|
||||
|
||||
## 0.0.58
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [fdde8db]
|
||||
- Updated dependencies [b297c93]
|
||||
- Updated dependencies [07fe2b9]
|
||||
- Updated dependencies [3bf5127]
|
||||
- Updated dependencies [a8b74ff]
|
||||
- Updated dependencies [db53161]
|
||||
- cojson-transport-ws@0.7.33
|
||||
- cojson@0.7.33
|
||||
- Updated dependencies [fdde8db]
|
||||
- Updated dependencies [b297c93]
|
||||
- Updated dependencies [07fe2b9]
|
||||
- Updated dependencies [3bf5127]
|
||||
- Updated dependencies [a8b74ff]
|
||||
- Updated dependencies [db53161]
|
||||
- cojson-transport-ws@0.7.33
|
||||
- cojson@0.7.33
|
||||
|
||||
## 0.0.58-hotfixes.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.5
|
||||
- cojson-transport-ws@0.7.33-hotfixes.5
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.5
|
||||
- cojson-transport-ws@0.7.33-hotfixes.5
|
||||
|
||||
## 0.0.58-hotfixes.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.4
|
||||
- cojson-transport-ws@0.7.33-hotfixes.4
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.4
|
||||
- cojson-transport-ws@0.7.33-hotfixes.4
|
||||
|
||||
## 0.0.58-hotfixes.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.3
|
||||
- cojson@0.7.33-hotfixes.3
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.3
|
||||
- cojson@0.7.33-hotfixes.3
|
||||
|
||||
## 0.0.58-hotfixes.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.2
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.2
|
||||
|
||||
## 0.0.58-hotfixes.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.1
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.33-hotfixes.1
|
||||
|
||||
## 0.0.58-hotfixes.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.0
|
||||
- cojson-transport-ws@0.7.33-hotfixes.0
|
||||
- Updated dependencies
|
||||
- cojson@0.7.33-hotfixes.0
|
||||
- cojson-transport-ws@0.7.33-hotfixes.0
|
||||
|
||||
## 0.0.57
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.31
|
||||
- cojson@0.7.31
|
||||
- Updated dependencies
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.31
|
||||
- cojson@0.7.31
|
||||
|
||||
## 0.0.56
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.30
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.30
|
||||
|
||||
## 0.0.55
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.29
|
||||
- cojson-transport-ws@0.7.29
|
||||
- Updated dependencies
|
||||
- cojson@0.7.29
|
||||
- cojson-transport-ws@0.7.29
|
||||
|
||||
## 0.0.54
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.28
|
||||
- cojson-transport-ws@0.7.28
|
||||
- Updated dependencies
|
||||
- cojson@0.7.28
|
||||
- cojson-transport-ws@0.7.28
|
||||
|
||||
## 0.0.53
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.27
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.27
|
||||
|
||||
## 0.0.52
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.26
|
||||
- cojson-transport-ws@0.7.26
|
||||
- Updated dependencies
|
||||
- cojson@0.7.26
|
||||
- cojson-transport-ws@0.7.26
|
||||
|
||||
## 0.0.51
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.23
|
||||
- cojson-transport-ws@0.7.23
|
||||
- Updated dependencies
|
||||
- cojson@0.7.23
|
||||
- cojson-transport-ws@0.7.23
|
||||
|
||||
## 0.0.50
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.22
|
||||
- Updated dependencies
|
||||
- cojson-transport-ws@0.7.22
|
||||
|
||||
## 0.0.49
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.18
|
||||
- cojson-transport-ws@0.7.18
|
||||
- Updated dependencies
|
||||
- cojson@0.7.18
|
||||
- cojson-transport-ws@0.7.18
|
||||
|
||||
## 0.0.48
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.7.17
|
||||
- cojson-transport-ws@0.7.17
|
||||
- Updated dependencies
|
||||
- cojson@0.7.17
|
||||
- cojson-transport-ws@0.7.17
|
||||
|
||||
## 0.0.47
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.6.7
|
||||
- jazz-react@0.5.5
|
||||
- jazz-react-auth-local@0.4.18
|
||||
- Updated dependencies
|
||||
- cojson@0.6.7
|
||||
- jazz-react@0.5.5
|
||||
- jazz-react-auth-local@0.4.18
|
||||
|
||||
## 0.0.46
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- jazz-react@0.5.0
|
||||
- jazz-react-auth-local@0.4.16
|
||||
- Updated dependencies
|
||||
- jazz-react@0.5.0
|
||||
- jazz-react-auth-local@0.4.16
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-inspector",
|
||||
"private": true,
|
||||
"version": "0.0.63",
|
||||
"version": "0.0.60",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -15,9 +15,9 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"cojson": "workspace:0.8.5",
|
||||
"cojson-transport-ws": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"cojson-transport-ws": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"lucide-react": "^0.274.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"react": "^18.2.0",
|
||||
@@ -41,7 +41,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "3.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
|
||||
@@ -5,16 +5,16 @@ import {
|
||||
RawCoStream,
|
||||
RawCoValue,
|
||||
} from "cojson";
|
||||
import { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
|
||||
import { JsonObject, JsonValue } from "cojson/src/jsonValue";
|
||||
import { PageInfo } from "./types";
|
||||
import { base64URLtoBytes } from "cojson/src/base64url.ts";
|
||||
import { base64URLtoBytes } from "cojson/src/base64url";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ArrowDownToLine } from "lucide-react";
|
||||
import {
|
||||
BinaryStreamItem,
|
||||
BinaryStreamStart,
|
||||
CoStreamItem,
|
||||
} from "cojson/src/coValues/coStream.ts";
|
||||
} from "cojson/src/coValues/coStream";
|
||||
import { AccountOrGroupPreview } from "./value-renderer";
|
||||
|
||||
// typeguard for BinaryStreamStart
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CoID, LocalNode, RawCoValue } from "cojson";
|
||||
import { JsonObject } from "cojson/src/jsonValue.ts";
|
||||
import { JsonObject } from "cojson/src/jsonValue";
|
||||
import { CoMapPreview, ValueRenderer } from "./value-renderer";
|
||||
import clsx from "clsx";
|
||||
import { PageInfo, isCoId } from "./types";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CoID, LocalNode, RawCoValue } from "cojson";
|
||||
import { JsonObject } from "cojson/src/jsonValue.ts";
|
||||
import { JsonObject } from "cojson/src/jsonValue";
|
||||
import { PageInfo } from "./types";
|
||||
import { useMemo, useState } from "react";
|
||||
import { ValueRenderer } from "./value-renderer";
|
||||
|
||||
@@ -1,29 +1,5 @@
|
||||
# jazz-example-musicplayer
|
||||
|
||||
## 0.0.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
|
||||
## 0.0.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -10,14 +10,14 @@ Start by checking out `jazz`
|
||||
|
||||
```bash
|
||||
git clone https://github.com/gardencmp/jazz.git
|
||||
cd jazz/examples/music-player
|
||||
cd jazz/examples/musicPlayer
|
||||
pnpm pack --pack-destination /tmp
|
||||
mkdir -p ~/jazz-examples/music-player # or any other directory
|
||||
tar -xf /tmp/jazz-example-music-player-* --strip-components 1 -C ~/jazz-examples/music-player
|
||||
cd ~/jazz-examples/music-player
|
||||
mkdir -p ~/jazz-examples/musicPlayer # or any other directory
|
||||
tar -xf /tmp/jazz-example-musicPlayer-* --strip-components 1 -C ~/jazz-examples/musicPlayer
|
||||
cd ~/jazz-examples/musicPlayer
|
||||
```
|
||||
|
||||
This ensures you have the example app without git history and independent of the Jazz multi-package monorepo.
|
||||
This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
|
||||
|
||||
Install dependencies:
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"cssVariables": true
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
"components": "@/basicComponents",
|
||||
"utils": "@/basicComponents/lib/utils"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-music-player",
|
||||
"private": true,
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.4",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -15,14 +15,10 @@
|
||||
"*.{js,jsx,mdx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"jazz-react": "workspace:0.8.5",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"lucide-react": "^0.274.0",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router": "^6.16.0",
|
||||
@@ -41,7 +37,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "3.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createHashRouter, RouterProvider } from "react-router-dom";
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
import { useMediaPlayer } from "./5_useMediaPlayer";
|
||||
import { HomePage } from "./3_HomePage";
|
||||
import { InvitePage } from "./6_InvitePage";
|
||||
import { useMediaPlayer } from "./4_useMediaPlayer";
|
||||
import { HomePage } from "./5_HomePage";
|
||||
import { createNewPlaylist, uploadMusicTracks } from "./3_actions";
|
||||
import { PlaylistPage } from "./6_PlaylistPage";
|
||||
import { InvitePage } from "./7_InvitePage";
|
||||
import { Button } from "./basicComponents/Button";
|
||||
import { FileUploadButton } from "./basicComponents/FileUploadButton";
|
||||
import { PlayerControls } from "./components/PlayerControls";
|
||||
import "./index.css";
|
||||
|
||||
@@ -23,9 +25,8 @@ import { useUploadExampleData } from "./lib/useUploadExampleData";
|
||||
*
|
||||
* `<Jazz.Provider/>` also runs our account migration
|
||||
*/
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: MusicaAccount,
|
||||
AccountSchema: MusicaAccount
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
@@ -35,6 +36,31 @@ function Main() {
|
||||
|
||||
useUploadExampleData();
|
||||
|
||||
/**
|
||||
* `me` represents the current user account, which will determine
|
||||
* access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
|
||||
*/
|
||||
const { me } = useAccount();
|
||||
|
||||
async function handleFileLoad(files: FileList) {
|
||||
if (!me) return;
|
||||
|
||||
/**
|
||||
* Follow this function definition to see how we update
|
||||
* values in Jazz and manage files!
|
||||
*/
|
||||
/** Walkthrough: Continue with ./3_actions.ts */
|
||||
await uploadMusicTracks(me, files);
|
||||
}
|
||||
|
||||
async function handleCreatePlaylist() {
|
||||
if (!me) return;
|
||||
|
||||
const playlist = await createNewPlaylist(me);
|
||||
|
||||
router.navigate(`/playlist/${playlist.id}`);
|
||||
}
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
path: "/",
|
||||
@@ -42,7 +68,7 @@ function Main() {
|
||||
},
|
||||
{
|
||||
path: "/playlist/:playlistId",
|
||||
element: <HomePage mediaPlayer={mediaPlayer} />,
|
||||
element: <PlaylistPage mediaPlayer={mediaPlayer} />,
|
||||
},
|
||||
{
|
||||
path: "/invite/*",
|
||||
@@ -52,9 +78,20 @@ function Main() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center bg-gray-300">
|
||||
<img src="jazz-logo.png" className="px-3 h-[20px]" />
|
||||
<div className="text-nowrap">Jazz music player</div>
|
||||
<div className="flex w-full gap-1 justify-end">
|
||||
<FileUploadButton onFileLoad={handleFileLoad}>
|
||||
Add file
|
||||
</FileUploadButton>
|
||||
<Button onClick={handleCreatePlaylist}>
|
||||
Create new playlist
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<RouterProvider router={router} />
|
||||
<PlayerControls mediaPlayer={mediaPlayer} />
|
||||
<Toaster />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -64,10 +101,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io"
|
||||
>
|
||||
<Jazz.Provider auth={auth} peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io">
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
<DemoAuthBasicUI appName="Jazz Music Player" state={state} />
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import { useAccount, useCoState } from "./2_main";
|
||||
import { MediaPlayer } from "./5_useMediaPlayer";
|
||||
import { MusicTrackRow } from "./components/MusicTrackRow";
|
||||
import { usePlayState } from "./lib/audio/usePlayState";
|
||||
import { SidePanel } from "./components/SidePanel";
|
||||
import { FileUploadButton } from "./components/FileUploadButton";
|
||||
import { Button } from "./components/ui/button";
|
||||
import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { ID } from "jazz-tools";
|
||||
import { Playlist } from "./1_schema";
|
||||
import { createInviteLink } from "jazz-react";
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
|
||||
/**
|
||||
* `me` represents the current user account, which will determine
|
||||
* access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
|
||||
*/
|
||||
const { me } = useAccount({
|
||||
root: {
|
||||
rootPlaylist: {},
|
||||
playlists: [],
|
||||
},
|
||||
});
|
||||
|
||||
const navigate = useNavigate();
|
||||
const playState = usePlayState();
|
||||
const isPlaying = playState.value === "play";
|
||||
const { toast } = useToast()
|
||||
|
||||
async function handleFileLoad(files: FileList) {
|
||||
if (!me) return;
|
||||
|
||||
/**
|
||||
* Follow this function definition to see how we update
|
||||
* values in Jazz and manage files!
|
||||
*/
|
||||
await uploadMusicTracks(me, files);
|
||||
}
|
||||
|
||||
async function handleCreatePlaylist() {
|
||||
if (!me) return;
|
||||
|
||||
const playlist = await createNewPlaylist(me);
|
||||
|
||||
navigate(`/playlist/${playlist.id}`);
|
||||
}
|
||||
|
||||
const params = useParams<{ playlistId: ID<Playlist> }>();
|
||||
const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
|
||||
const playlist = useCoState(Playlist, playlistId, {
|
||||
tracks: [],
|
||||
});
|
||||
|
||||
const isRootPlaylist = !params.playlistId;
|
||||
const isPlaylistOwner = playlist?._owner.myRole() === "admin";
|
||||
const isActivePlaylist = playlistId === me?.root.activePlaylist?.id;
|
||||
|
||||
const handlePlaylistTitleChange = (
|
||||
evt: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
if (!playlist) return;
|
||||
|
||||
playlist.title = evt.target.value;
|
||||
};
|
||||
|
||||
const handlePlaylistShareClick = async () => {
|
||||
if (!isPlaylistOwner) return;
|
||||
|
||||
const inviteLink = createInviteLink(playlist, "reader");
|
||||
|
||||
await navigator.clipboard.writeText(inviteLink);
|
||||
|
||||
toast({
|
||||
title: "Invite link copied into the clipboard",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen text-gray-800 bg-blue-50">
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<SidePanel />
|
||||
<main className="flex-1 p-6 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
{isRootPlaylist ? (
|
||||
<h1 className="text-2xl font-bold text-blue-800">
|
||||
All tracks
|
||||
</h1>
|
||||
) : (
|
||||
<input
|
||||
value={playlist?.title ?? ""}
|
||||
onChange={handlePlaylistTitleChange}
|
||||
className="text-2xl font-bold text-blue-800 bg-transparent"
|
||||
disabled={!isPlaylistOwner}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center space-x-4">
|
||||
{isRootPlaylist && (
|
||||
<>
|
||||
<FileUploadButton
|
||||
onFileLoad={handleFileLoad}
|
||||
>
|
||||
Add file
|
||||
</FileUploadButton>
|
||||
<Button onClick={handleCreatePlaylist}>
|
||||
Create new playlist
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{!isRootPlaylist && (
|
||||
<Button onClick={handlePlaylistShareClick}>
|
||||
Share playlist
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ul className="flex flex-col">
|
||||
{playlist?.tracks?.map(
|
||||
(track) =>
|
||||
track && (
|
||||
<MusicTrackRow
|
||||
trackId={track.id}
|
||||
key={track.id}
|
||||
isLoading={
|
||||
mediaPlayer.loading === track.id
|
||||
}
|
||||
isPlaying={
|
||||
mediaPlayer.activeTrackId ===
|
||||
track.id && isActivePlaylist && isPlaying
|
||||
}
|
||||
onClick={() => {
|
||||
mediaPlayer.setActiveTrack(track, playlist);
|
||||
}}
|
||||
showAddToPlaylist={isRootPlaylist}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -92,8 +92,6 @@ export async function addTrackToPlaylist(
|
||||
) {
|
||||
if (!account) return;
|
||||
|
||||
if (playlist.tracks?.some((t) => t?._refs.sourceTrack.id === track.id)) return;
|
||||
|
||||
/**
|
||||
* Since musicTracks are created as private values (see uploadMusicTracks)
|
||||
* to make them shareable as part of the playlist we are cloning them
|
||||
@@ -1,6 +1,6 @@
|
||||
import { usePlayMedia } from "@/lib/audio/usePlayMedia";
|
||||
import { usePlayState } from "@/lib/audio/usePlayState";
|
||||
import { useAccount } from "./2_main";
|
||||
import { useAccount, useCoState } from "./2_main";
|
||||
import { MusicTrack, Playlist } from "@/1_schema";
|
||||
import { useRef, useState } from "react";
|
||||
import { getNextTrack, getPrevTrack } from "./lib/getters";
|
||||
@@ -14,7 +14,7 @@ export function useMediaPlayer() {
|
||||
|
||||
const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);
|
||||
|
||||
const activeTrackId = me?.root?._refs.activeTrack?.id
|
||||
const activeTrack = useCoState(MusicTrack, me?.root?._refs.activeTrack?.id);
|
||||
|
||||
// Reference used to avoid out-of-order track loads
|
||||
const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
|
||||
@@ -71,7 +71,7 @@ export function useMediaPlayer() {
|
||||
if (!me?.root) return;
|
||||
|
||||
if (
|
||||
activeTrackId === track.id &&
|
||||
activeTrack?.id === track.id &&
|
||||
lastLoadedTrackId.current !== null
|
||||
) {
|
||||
playState.toggle();
|
||||
@@ -88,7 +88,7 @@ export function useMediaPlayer() {
|
||||
}
|
||||
|
||||
return {
|
||||
activeTrackId,
|
||||
activeTrack,
|
||||
setActiveTrack,
|
||||
playNextTrack,
|
||||
playPrevTrack,
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user