Compare commits
3 Commits
authv2-doc
...
git-compar
| Author | SHA1 | Date | |
|---|---|---|---|
|
1baf60d660 | ||
|
|
cad1b0ea43 | ||
|
|
473da86cca |
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"cojson": patch
|
||||
---
|
||||
|
||||
Export the coValue loading config to reduce the timeout on tests
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
"jazz-react-native-auth-clerk": minor
|
||||
"jazz-react-auth-clerk": minor
|
||||
"cojson-transport-ws": minor
|
||||
"jazz-react-native": minor
|
||||
"jazz-auth-clerk": minor
|
||||
"jazz-react-core": minor
|
||||
"jazz-inspector": minor
|
||||
"jazz-browser": minor
|
||||
"jazz-nodejs": minor
|
||||
"jazz-react": minor
|
||||
"jazz-tools": minor
|
||||
"cojson": minor
|
||||
---
|
||||
|
||||
Introducing the new auth system!
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"cojson": patch
|
||||
---
|
||||
|
||||
Drop node 14 polyfill for globalThis.crypto
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"jazz-tools": patch
|
||||
---
|
||||
|
||||
Make ensureLoaded throw when the resolved value is undefined
|
||||
@@ -11,7 +11,7 @@
|
||||
"cojson-storage-sqlite",
|
||||
"cojson-transport-ws",
|
||||
"jazz-browser",
|
||||
"jazz-auth-clerk",
|
||||
"jazz-browser-auth-clerk",
|
||||
"jazz-browser-media-images",
|
||||
"jazz-nodejs",
|
||||
"jazz-react",
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"create-jazz-app": patch
|
||||
---
|
||||
|
||||
Add framework and api-key param to create-jazz-app
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
"jazz-nodejs": minor
|
||||
---
|
||||
|
||||
Remove ws dependency to use native WebSocket.
|
||||
|
||||
NodeJS versions prior to v22 will need to provide a WebSocket constructor from ws:
|
||||
|
||||
```ts
|
||||
import { WebSocket } from "ws"
|
||||
|
||||
const { worker } = await startWorker({ WebSocket, synServer });
|
||||
```
|
||||
|
||||
This makes it easier to run workers on every JS runtime.
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
"jazz-react-core": minor
|
||||
"jazz-svelte": minor
|
||||
"jazz-tools": minor
|
||||
"jazz-vue": minor
|
||||
---
|
||||
|
||||
Return null when a coValue is not found
|
||||
7
.changeset/stupid-tigers-relate.md
Normal file
7
.changeset/stupid-tigers-relate.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"jazz-react-native": patch
|
||||
---
|
||||
|
||||
Fix username key hashing in DemoAuth
|
||||
Improve error handling when loading an existing account fails
|
||||
Fix the double context creation in Reacc development mode
|
||||
5
.changeset/tiny-trains-vanish.md
Normal file
5
.changeset/tiny-trains-vanish.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"cojson": patch
|
||||
---
|
||||
|
||||
Add the assign method to RawCoMap to create bulk transactions and optimize RawCoMap init
|
||||
9
.github/workflows/build-examples.yaml
vendored
9
.github/workflows/build-examples.yaml
vendored
@@ -27,13 +27,8 @@ jobs:
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
9
.github/workflows/build-starters.yaml
vendored
9
.github/workflows/build-starters.yaml
vendored
@@ -18,13 +18,8 @@ jobs:
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
9
.github/workflows/jazz-run.yml
vendored
9
.github/workflows/jazz-run.yml
vendored
@@ -16,13 +16,8 @@ jobs:
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
11
.github/workflows/playwright.yml
vendored
11
.github/workflows/playwright.yml
vendored
@@ -13,20 +13,15 @@ jobs:
|
||||
continue-on-error: true
|
||||
strategy:
|
||||
matrix:
|
||||
project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding", "starters/react-demo-auth-tailwind"]
|
||||
project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
49
.github/workflows/pre-release.yml
vendored
49
.github/workflows/pre-release.yml
vendored
@@ -1,49 +0,0 @@
|
||||
name: Pre-Publish tagged Pull Requests
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, synchronize, reopened]
|
||||
|
||||
jobs:
|
||||
pre-release:
|
||||
if: contains(github.event.pull_request.labels.*.name, 'pre-release')
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: '.node-version'
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Get pnpm store directory
|
||||
shell: bash
|
||||
run: |
|
||||
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
|
||||
|
||||
- uses: actions/cache@v4
|
||||
name: Setup pnpm cache
|
||||
with:
|
||||
path: ${{ env.STORE_PATH }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build --filter="./packages/*"
|
||||
|
||||
- name: Pre publish
|
||||
run: pnpm exec pkg-pr-new publish "./packages/*"
|
||||
9
.github/workflows/release.yml
vendored
9
.github/workflows/release.yml
vendored
@@ -22,13 +22,8 @@ jobs:
|
||||
- name: Checkout Repo
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
12
.github/workflows/unit-test.yml
vendored
12
.github/workflows/unit-test.yml
vendored
@@ -15,13 +15,8 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Enable latestcorepack
|
||||
run: |
|
||||
echo "Before: corepack version => $(corepack --version || echo 'not installed')"
|
||||
npm install -g corepack@latest
|
||||
echo "After : corepack version => $(corepack --version)"
|
||||
corepack enable
|
||||
pnpm --version
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v4
|
||||
@@ -45,9 +40,6 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Install Playwright Browsers
|
||||
run: pnpm exec playwright install
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build --filter="./packages/*"
|
||||
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -19,5 +19,3 @@ test-results
|
||||
.husky
|
||||
|
||||
.vscode/settings.json
|
||||
|
||||
.svelte-kit
|
||||
@@ -42,15 +42,6 @@
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"include": ["**/package.json"],
|
||||
"linter": {
|
||||
"enabled": false
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"include": ["packages/**/src/**"],
|
||||
"linter": {
|
||||
|
||||
@@ -1,211 +1,5 @@
|
||||
# chat-rn-clerk
|
||||
|
||||
## 1.0.63
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.22
|
||||
- jazz-react-native-auth-clerk@0.9.22
|
||||
|
||||
## 1.0.62
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-react-native@0.9.21
|
||||
- jazz-react-native-auth-clerk@0.9.21
|
||||
- jazz-react-native-media-images@0.9.21
|
||||
|
||||
## 1.0.61
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-react-native@0.9.20
|
||||
- jazz-react-native-auth-clerk@0.9.20
|
||||
- jazz-react-native-media-images@0.9.20
|
||||
|
||||
## 1.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.19
|
||||
- jazz-react-native-auth-clerk@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-react-native-media-images@0.9.19
|
||||
|
||||
## 1.0.59
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.18
|
||||
- jazz-react-native-auth-clerk@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-react-native-media-images@0.9.18
|
||||
|
||||
## 1.0.58
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-react-native@0.9.17
|
||||
- jazz-react-native-auth-clerk@0.9.17
|
||||
- jazz-react-native-media-images@0.9.17
|
||||
|
||||
## 1.0.57
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-react-native-auth-clerk@0.9.16
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-react-native@0.9.16
|
||||
- jazz-react-native-media-images@0.9.16
|
||||
|
||||
## 1.0.56
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-react-native@0.9.15
|
||||
- jazz-react-native-auth-clerk@0.9.15
|
||||
- jazz-react-native-media-images@0.9.15
|
||||
|
||||
## 1.0.55
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-react-native@0.9.14
|
||||
- jazz-react-native-auth-clerk@0.9.14
|
||||
- jazz-react-native-media-images@0.9.14
|
||||
|
||||
## 1.0.54
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.13
|
||||
- jazz-react-native-auth-clerk@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-react-native-media-images@0.9.13
|
||||
|
||||
## 1.0.53
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.12
|
||||
- jazz-react-native-auth-clerk@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-react-native-media-images@0.9.12
|
||||
|
||||
## 1.0.52
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.11
|
||||
- jazz-react-native-auth-clerk@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-react-native-media-images@0.9.11
|
||||
|
||||
## 1.0.51
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- f76274c: Fix image handling in react-native
|
||||
- Updated dependencies [f76274c]
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react-native@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-react-native-auth-clerk@0.9.10
|
||||
- jazz-react-native-media-images@0.9.10
|
||||
|
||||
## 1.0.50
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-react-native@0.9.9
|
||||
- jazz-react-native-auth-clerk@0.9.9
|
||||
- jazz-react-native-media-images@0.9.9
|
||||
|
||||
## 1.0.49
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react-native@0.9.8
|
||||
- jazz-react-native-auth-clerk@0.9.8
|
||||
- jazz-react-native-media-images@0.9.8
|
||||
|
||||
## 1.0.48
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8a390d2]
|
||||
- jazz-react-native@0.9.6
|
||||
- jazz-react-native-auth-clerk@0.9.6
|
||||
|
||||
## 1.0.47
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c871912]
|
||||
- jazz-react-native@0.9.5
|
||||
- jazz-react-native-auth-clerk@0.9.5
|
||||
|
||||
## 1.0.46
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.4
|
||||
- jazz-react-native-auth-clerk@0.9.4
|
||||
|
||||
## 1.0.45
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7cd691f]
|
||||
- jazz-react-native@0.9.3
|
||||
- jazz-react-native-auth-clerk@0.9.3
|
||||
|
||||
## 1.0.44
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [80fd3e9]
|
||||
- jazz-react-native@0.9.2
|
||||
- jazz-react-native-auth-clerk@0.9.2
|
||||
|
||||
## 1.0.43
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-react-native@0.9.1
|
||||
- jazz-react-native-auth-clerk@0.9.1
|
||||
- jazz-react-native-media-images@0.9.1
|
||||
|
||||
## 1.0.42
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1da4d55]
|
||||
- Updated dependencies [8eda792]
|
||||
- Updated dependencies [1e5e3a1]
|
||||
- jazz-react-native@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-react-native-auth-clerk@0.9.0
|
||||
- jazz-react-native-media-images@0.9.0
|
||||
|
||||
## 1.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -37,13 +37,7 @@
|
||||
],
|
||||
"expo-secure-store",
|
||||
"expo-font",
|
||||
"expo-router",
|
||||
[
|
||||
"expo-image-picker",
|
||||
{
|
||||
"photosPermission": "The app accesses your photos to let you share them with your friends."
|
||||
}
|
||||
]
|
||||
"expo-router"
|
||||
],
|
||||
"extra": {
|
||||
"eas": {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Redirect, Stack } from "expo-router";
|
||||
import { useIsAuthenticated } from "jazz-react-native";
|
||||
import React from "react";
|
||||
import { useAuth } from "../../src/auth-context";
|
||||
|
||||
export default function HomeLayout() {
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Redirect href={"/chat"} />;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Redirect, Stack } from "expo-router";
|
||||
import { useIsAuthenticated } from "jazz-react-native";
|
||||
import { useAuth } from "../../src/auth-context";
|
||||
|
||||
export default function UnAuthenticatedLayout() {
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Redirect href={"/chat"} />;
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { useAccount, useCoState } from "@/src/jazz";
|
||||
import { Chat, Message } from "@/src/schema";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { useFocusEffect, useNavigation } from "@react-navigation/native";
|
||||
import clsx from "clsx";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useAccount, useCoState } from "jazz-react-native";
|
||||
import { ProgressiveImg } from "jazz-react-native";
|
||||
import { createImage } from "jazz-react-native-media-images";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { useEffect, useLayoutEffect, useState } from "react";
|
||||
import React, {
|
||||
@@ -19,8 +16,6 @@ import React, {
|
||||
KeyboardAvoidingView,
|
||||
TextInput,
|
||||
Button,
|
||||
Image,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
|
||||
export default function Conversation() {
|
||||
@@ -30,7 +25,6 @@ export default function Conversation() {
|
||||
const [message, setMessage] = useState("");
|
||||
const loadedChat = useCoState(Chat, chat?.id, [{}]);
|
||||
const navigation = useNavigation();
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (chat) return;
|
||||
@@ -87,32 +81,6 @@ export default function Conversation() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = async () => {
|
||||
try {
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
base64: true,
|
||||
quality: 0.7,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets[0].base64 && chat) {
|
||||
setIsUploading(true);
|
||||
const base64Uri = `data:image/jpeg;base64,${result.assets[0].base64}`;
|
||||
|
||||
const image = await createImage(base64Uri, {
|
||||
owner: chat._owner,
|
||||
maxSize: 2048,
|
||||
});
|
||||
|
||||
chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert("Error", "Failed to upload image");
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessageItem = ({ item }: { item: Message }) => {
|
||||
const isMe = item._edits.text.by?.isMe;
|
||||
return (
|
||||
@@ -138,27 +106,14 @@ export default function Conversation() {
|
||||
isMe ? "flex-row" : "flex-row",
|
||||
)}
|
||||
>
|
||||
{item.image && (
|
||||
<ProgressiveImg image={item.image} maxWidth={1024}>
|
||||
{({ src, res, originalSize }) => (
|
||||
<Image
|
||||
source={{ uri: src }}
|
||||
className="w-48 h-48 rounded-lg mb-2"
|
||||
resizeMode="cover"
|
||||
/>
|
||||
)}
|
||||
</ProgressiveImg>
|
||||
)}
|
||||
{item.text && (
|
||||
<Text
|
||||
className={clsx(
|
||||
!isMe ? "text-black" : "text-gray-200",
|
||||
`text-md max-w-[85%]`,
|
||||
)}
|
||||
>
|
||||
{item.text}
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
className={clsx(
|
||||
!isMe ? "text-black" : "text-gray-200",
|
||||
`text-md max-w-[85%]`,
|
||||
)}
|
||||
>
|
||||
{item.text}
|
||||
</Text>
|
||||
<Text
|
||||
className={clsx(
|
||||
"text-[10px] text-right ml-2",
|
||||
@@ -192,17 +147,6 @@ export default function Conversation() {
|
||||
className="p-3 bg-white border-t border-gray-300"
|
||||
>
|
||||
<SafeAreaView className="flex-row items-center gap-2">
|
||||
<TouchableOpacity
|
||||
onPress={handleImageUpload}
|
||||
disabled={isUploading}
|
||||
className="h-10 w-10 items-center justify-center"
|
||||
>
|
||||
{isUploading ? (
|
||||
<ActivityIndicator size="small" color="#0000ff" />
|
||||
) : (
|
||||
<Text className="text-2xl">🖼️</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<TextInput
|
||||
className="flex-1 rounded-full h-10 px-4 bg-gray-100 border border-gray-300 focus:border-blue-500 focus:bg-white"
|
||||
value={message}
|
||||
|
||||
@@ -11,7 +11,7 @@ import React, {
|
||||
} from "react-native";
|
||||
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import { useAccount } from "jazz-react-native";
|
||||
import { useAccount } from "../../src/jazz";
|
||||
import { Chat } from "../../src/schema";
|
||||
|
||||
export default function ChatScreen() {
|
||||
@@ -20,15 +20,10 @@ export default function ChatScreen() {
|
||||
const navigation = useNavigation();
|
||||
const { user } = useUser();
|
||||
|
||||
function handleLogOut() {
|
||||
logOut();
|
||||
router.navigate("/");
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerTitle: "Chat",
|
||||
headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
|
||||
headerRight: () => <Button onPress={logOut} title="Logout" />,
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "chat-rn-clerk",
|
||||
"main": "index.js",
|
||||
"version": "1.0.63",
|
||||
"version": "1.0.41",
|
||||
"scripts": {
|
||||
"build": "expo export -p ios",
|
||||
"start": "expo start",
|
||||
@@ -20,7 +20,6 @@
|
||||
"@bam.tech/react-native-image-resizer": "^3.0.11",
|
||||
"@clerk/clerk-expo": "^2.2.21",
|
||||
"@expo/vector-icons": "^14.0.2",
|
||||
"@op-engineering/op-sqlite": "^11.2.12",
|
||||
"@react-native-community/netinfo": "^11.4.1",
|
||||
"@react-navigation/native": "^7.0.13",
|
||||
"@react-navigation/native-stack": "^7.1.14",
|
||||
@@ -35,7 +34,6 @@
|
||||
"expo-dev-client": "~5.0.5",
|
||||
"expo-file-system": "^18.0.4",
|
||||
"expo-font": "~13.0.1",
|
||||
"expo-image-picker": "~16.0.4",
|
||||
"expo-linking": "~7.0.3",
|
||||
"expo-router": "~4.0.11",
|
||||
"expo-secure-store": "~14.0.0",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "chat-rn-clerk-example-jazz@garden.co";
|
||||
@@ -1,21 +1,62 @@
|
||||
import { useClerk } from "@clerk/clerk-expo";
|
||||
import { JazzProviderWithClerk } from "jazz-react-native-auth-clerk";
|
||||
import React, { PropsWithChildren } from "react";
|
||||
import { apiKey } from "./apiKey";
|
||||
import { useClerk, useUser } from "@clerk/clerk-expo";
|
||||
import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
|
||||
import React, {
|
||||
createContext,
|
||||
PropsWithChildren,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { Jazz, kvStore } from "./jazz";
|
||||
|
||||
const AuthContext = createContext<{
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
}>({
|
||||
isAuthenticated: false,
|
||||
isLoading: true,
|
||||
});
|
||||
|
||||
export function useAuth() {
|
||||
return useContext(AuthContext);
|
||||
}
|
||||
|
||||
export function JazzAndAuth({ children }: PropsWithChildren) {
|
||||
const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
|
||||
const clerk = useClerk();
|
||||
const [auth, state] = useJazzClerkAuth(clerk, kvStore);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSignedIn && isClerkLoaded && auth) {
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
}, [isSignedIn, isClerkLoaded, auth]);
|
||||
|
||||
return (
|
||||
<JazzProviderWithClerk
|
||||
clerk={clerk}
|
||||
storage="sqlite"
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
when: "signedUp", // This makes the app work in local mode when the user is not authenticated
|
||||
}}
|
||||
<AuthContext.Provider
|
||||
value={{ isAuthenticated, isLoading: !isClerkLoaded || !auth }}
|
||||
>
|
||||
{children}
|
||||
</JazzProviderWithClerk>
|
||||
{state?.errors?.length > 0 &&
|
||||
state.errors.map((error) => (
|
||||
<View key={error}>
|
||||
<Text style={{ color: "red" }}>{error}</Text>
|
||||
</View>
|
||||
))}
|
||||
{auth && clerk.user ? (
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
|
||||
storage={undefined}
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
4
examples/chat-rn-clerk/src/jazz.tsx
Normal file
4
examples/chat-rn-clerk/src/jazz.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createJazzRNApp } from "jazz-react-native";
|
||||
|
||||
export const Jazz = createJazzRNApp();
|
||||
export const { useAccount, useCoState, useAcceptInvite, kvStore } = Jazz;
|
||||
@@ -1,8 +1,7 @@
|
||||
import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
|
||||
import { CoList, CoMap, co } from "jazz-tools";
|
||||
|
||||
export class Message extends CoMap {
|
||||
text = co.string;
|
||||
image = co.optional.ref(ImageDefinition);
|
||||
}
|
||||
|
||||
export class Chat extends CoList.Of(co.ref(Message)) {}
|
||||
|
||||
@@ -1,172 +1,5 @@
|
||||
# chat-rn
|
||||
|
||||
## 1.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.22
|
||||
|
||||
## 1.0.59
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-react-native@0.9.21
|
||||
|
||||
## 1.0.58
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-react-native@0.9.20
|
||||
|
||||
## 1.0.57
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
|
||||
## 1.0.56
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
|
||||
## 1.0.55
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-react-native@0.9.17
|
||||
|
||||
## 1.0.54
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-react-native@0.9.16
|
||||
|
||||
## 1.0.53
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-react-native@0.9.15
|
||||
|
||||
## 1.0.52
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-react-native@0.9.14
|
||||
|
||||
## 1.0.51
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
|
||||
## 1.0.50
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
|
||||
## 1.0.49
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
|
||||
## 1.0.48
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [f76274c]
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react-native@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
|
||||
## 1.0.47
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-react-native@0.9.9
|
||||
|
||||
## 1.0.46
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react-native@0.9.8
|
||||
|
||||
## 1.0.45
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8a390d2]
|
||||
- jazz-react-native@0.9.6
|
||||
|
||||
## 1.0.44
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c871912]
|
||||
- jazz-react-native@0.9.5
|
||||
|
||||
## 1.0.43
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.9.4
|
||||
|
||||
## 1.0.42
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7cd691f]
|
||||
- jazz-react-native@0.9.3
|
||||
|
||||
## 1.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [80fd3e9]
|
||||
- jazz-react-native@0.9.2
|
||||
|
||||
## 1.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-react-native@0.9.1
|
||||
|
||||
## 1.0.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1da4d55]
|
||||
- Updated dependencies [8eda792]
|
||||
- Updated dependencies [1e5e3a1]
|
||||
- jazz-react-native@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
|
||||
## 1.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chat-rn",
|
||||
"version": "1.0.60",
|
||||
"version": "1.0.38",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "expo export -p ios",
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@azure/core-asynciterator-polyfill": "^1.0.2",
|
||||
"@op-engineering/op-sqlite": "^11.2.12",
|
||||
"@react-native-community/netinfo": "^11.4.1",
|
||||
"@react-navigation/native": "^7.0.13",
|
||||
"@react-navigation/native-stack": "^7.1.14",
|
||||
|
||||
@@ -9,9 +9,9 @@ import * as Linking from "expo-linking";
|
||||
import React, { StrictMode, useEffect, useState } from "react";
|
||||
import HandleInviteScreen from "./invite";
|
||||
|
||||
import { JazzProvider } from "jazz-react-native";
|
||||
import { apiKey } from "./apiKey";
|
||||
import { DemoAuthBasicUI, useDemoAuth } from "jazz-react-native";
|
||||
import ChatScreen from "./chat";
|
||||
import { Jazz } from "./jazz";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
|
||||
@@ -29,10 +29,12 @@ const linking = {
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [auth, state] = useDemoAuth();
|
||||
const [initialRoute, setInitialRoute] = useState<
|
||||
"ChatScreen" | "HandleInviteScreen"
|
||||
>("ChatScreen");
|
||||
const navigationRef = useNavigationContainerRef();
|
||||
|
||||
useEffect(() => {
|
||||
Linking.getInitialURL().then((url) => {
|
||||
if (url) {
|
||||
@@ -43,13 +45,16 @@ function App() {
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!auth) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<JazzProvider
|
||||
storage="sqlite"
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
}}
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
|
||||
storage={undefined}
|
||||
>
|
||||
<NavigationContainer linking={linking} ref={navigationRef}>
|
||||
<Stack.Navigator initialRouteName={initialRoute}>
|
||||
@@ -65,7 +70,10 @@ function App() {
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
{state.state !== "signedIn" ? (
|
||||
<DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
) : null}
|
||||
</StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "chat-rn-example-jazz@garden.co";
|
||||
@@ -1,6 +1,6 @@
|
||||
import clsx from "clsx";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
import { Group, ID, Profile } from "jazz-tools";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { useEffect, useState } from "react";
|
||||
import React, {
|
||||
Button,
|
||||
@@ -14,7 +14,7 @@ import React, {
|
||||
Alert,
|
||||
} from "react-native";
|
||||
|
||||
import { useAccount, useCoState } from "jazz-react-native";
|
||||
import { useAccount, useCoState } from "./jazz";
|
||||
import { Chat, Message } from "./schema";
|
||||
|
||||
export default function ChatScreen({ navigation }: { navigation: any }) {
|
||||
@@ -22,16 +22,10 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
|
||||
const [chatId, setChatId] = useState<ID<Chat>>();
|
||||
const loadedChat = useCoState(Chat, chatId, [{}]);
|
||||
const [message, setMessage] = useState("");
|
||||
const profile = useCoState(Profile, me._refs.profile?.id, {});
|
||||
|
||||
function handleLogOut() {
|
||||
setChatId(undefined);
|
||||
logOut();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
|
||||
headerRight: () => <Button onPress={logOut} title="Logout" />,
|
||||
headerLeft: () =>
|
||||
loadedChat ? (
|
||||
<Button
|
||||
@@ -137,18 +131,6 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
|
||||
<View className="flex flex-col h-full">
|
||||
{!loadedChat ? (
|
||||
<View className="flex flex-col h-full items-center justify-center">
|
||||
<Text className="text-m font-bold mb-6">Username</Text>
|
||||
<TextInput
|
||||
className="rounded h-12 p-2 mb-12 w-40 border border-gray-200 block"
|
||||
value={profile?.name ?? ""}
|
||||
onChangeText={(value) => {
|
||||
if (profile) {
|
||||
profile.name = value;
|
||||
}
|
||||
}}
|
||||
textAlignVertical="center"
|
||||
onSubmitEditing={sendMessage}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={createChat}
|
||||
className="bg-blue-500 p-4 rounded-md"
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { useAcceptInvite } from "jazz-react-native";
|
||||
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,
|
||||
}: {
|
||||
|
||||
4
examples/chat-rn/src/jazz.tsx
Normal file
4
examples/chat-rn/src/jazz.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createJazzRNApp } from "jazz-react-native";
|
||||
|
||||
export const Jazz = createJazzRNApp();
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
@@ -1,154 +1,5 @@
|
||||
# chat-vue
|
||||
|
||||
## 0.0.47
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.22
|
||||
- jazz-vue@0.9.22
|
||||
|
||||
## 0.0.46
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-browser@0.9.21
|
||||
- jazz-vue@0.9.21
|
||||
|
||||
## 0.0.45
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-browser@0.9.20
|
||||
- jazz-vue@0.9.20
|
||||
|
||||
## 0.0.44
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-vue@0.9.19
|
||||
|
||||
## 0.0.43
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-vue@0.9.18
|
||||
|
||||
## 0.0.42
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-browser@0.9.17
|
||||
- jazz-vue@0.9.17
|
||||
|
||||
## 0.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-browser@0.9.16
|
||||
- jazz-vue@0.9.16
|
||||
|
||||
## 0.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-browser@0.9.15
|
||||
- jazz-vue@0.9.15
|
||||
|
||||
## 0.0.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-browser@0.9.14
|
||||
- jazz-vue@0.9.14
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-vue@0.9.13
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-vue@0.9.12
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-vue@0.9.11
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-browser@0.9.10
|
||||
- jazz-vue@0.9.10
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-browser@0.9.9
|
||||
- jazz-vue@0.9.9
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-browser@0.9.8
|
||||
- jazz-vue@0.9.8
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- Updated dependencies [5d98189]
|
||||
- jazz-browser@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-vue@0.9.1
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [9dd8d95]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-vue@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-browser@0.9.0
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,55 +1,29 @@
|
||||
# Chat example with Jazz and Vue
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example chat-vue --project-name chat-vue
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the todo-vue example directory:
|
||||
```bash
|
||||
cd chat-vue
|
||||
cd jazz/examples/chat-vue
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/chat-vue/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chat-vue",
|
||||
"version": "0.0.47",
|
||||
"version": "0.0.30",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -32,7 +32,7 @@
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-vue-devtools": "^7.4.6",
|
||||
"vue-tsc": "^2.1.6"
|
||||
}
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAccount } from "jazz-vue";
|
||||
import AppContainer from "./components/AppContainer.vue";
|
||||
import TopBar from "./components/TopBar.vue";
|
||||
import { useAccount } from "./main";
|
||||
|
||||
const { me, logOut } = useAccount();
|
||||
</script>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "chat-example-jazz@garden.co";
|
||||
@@ -1,31 +1,36 @@
|
||||
import { DemoAuthBasicUI, JazzProvider } from "jazz-vue";
|
||||
import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
|
||||
import { createApp, defineComponent, h } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./index.css";
|
||||
import { apiKey } from "@/apiKey";
|
||||
import router from "./router";
|
||||
|
||||
const Jazz = createJazzVueApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
const { JazzProvider } = Jazz;
|
||||
|
||||
const RootComponent = defineComponent({
|
||||
name: "RootComponent",
|
||||
setup() {
|
||||
return () =>
|
||||
const { authMethod, state } = useDemoAuth();
|
||||
|
||||
return () => [
|
||||
h(
|
||||
JazzProvider,
|
||||
{
|
||||
sync: {
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
},
|
||||
auth: authMethod.value,
|
||||
peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
|
||||
},
|
||||
h(
|
||||
DemoAuthBasicUI,
|
||||
{
|
||||
appName: "Jazz Vue Chat",
|
||||
},
|
||||
{
|
||||
default: () => h(App),
|
||||
},
|
||||
),
|
||||
);
|
||||
{
|
||||
default: () => h(App),
|
||||
},
|
||||
),
|
||||
|
||||
state.state !== "signedIn" &&
|
||||
h(DemoAuthBasicUI, {
|
||||
appName: "Jazz Chat",
|
||||
state,
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -26,12 +26,12 @@
|
||||
|
||||
<script lang="ts">
|
||||
import type { ID } from "jazz-tools";
|
||||
import { useCoState } from "jazz-vue";
|
||||
import { type PropType, computed, defineComponent, ref } from "vue";
|
||||
import ChatBody from "../components/ChatBody.vue";
|
||||
import ChatBubble from "../components/ChatBubble.vue";
|
||||
import ChatInput from "../components/ChatInput.vue";
|
||||
import EmptyChatMessage from "../components/EmptyChatMessage.vue";
|
||||
import { useCoState } from "../main";
|
||||
import { Chat, Message } from "../schema";
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Group } from "jazz-tools";
|
||||
import { useAccount } from "jazz-vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useAccount } from "../main";
|
||||
import { Chat } from "../schema";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@@ -1,160 +1,5 @@
|
||||
# jazz-example-chat
|
||||
|
||||
## 0.0.143
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser-media-images@0.9.22
|
||||
- jazz-react@0.9.22
|
||||
|
||||
## 0.0.142
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-browser-media-images@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.141
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-browser-media-images@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.140
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-browser-media-images@0.9.19
|
||||
|
||||
## 0.0.139
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-browser-media-images@0.9.18
|
||||
|
||||
## 0.0.138
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-browser-media-images@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
|
||||
## 0.0.137
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-browser-media-images@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.136
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-browser-media-images@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.135
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-browser-media-images@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.134
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-browser-media-images@0.9.13
|
||||
|
||||
## 0.0.133
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-browser-media-images@0.9.12
|
||||
|
||||
## 0.0.132
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-browser-media-images@0.9.11
|
||||
|
||||
## 0.0.131
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- f76274c: Fix image handling in react-native
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-browser-media-images@0.9.10
|
||||
|
||||
## 0.0.130
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-browser-media-images@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.129
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
- jazz-browser-media-images@0.9.8
|
||||
|
||||
## 0.0.128
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.127
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-browser-media-images@0.9.1
|
||||
|
||||
## 0.0.126
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-browser-media-images@0.9.0
|
||||
|
||||
## 0.0.125
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -2,56 +2,30 @@
|
||||
|
||||
Live version: [https://chat.jazz.tools](https://chat.jazz.tools)
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example chat --project-name chat
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the chat example directory:
|
||||
```bash
|
||||
cd chat
|
||||
cd jazz/examples/chat
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/chat/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
@@ -60,4 +34,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
|
||||
|
||||
By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.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 `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
|
||||
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/main.tsx](./src/main.tsx).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-chat",
|
||||
"private": true,
|
||||
"version": "0.0.143",
|
||||
"version": "0.0.125",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -23,7 +23,7 @@
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.50.1",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
@@ -32,6 +32,6 @@
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "chat-example-jazz@garden.co";
|
||||
@@ -1,13 +1,9 @@
|
||||
import { apiKey } from "@/apiKey.ts";
|
||||
import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
|
||||
import { inIframe, onChatLoad } from "@/util.ts";
|
||||
import { useIframeHashRouter } from "hash-slash";
|
||||
import { JazzProvider, useAccount } from "jazz-react";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { ChatScreen } from "./chatScreen.tsx";
|
||||
import { useAccount } from "./main.tsx";
|
||||
import { Chat } from "./schema.ts";
|
||||
import { ThemeProvider } from "./themeProvider.tsx";
|
||||
import { AppContainer, TopBar } from "./ui.tsx";
|
||||
|
||||
export function App() {
|
||||
@@ -16,9 +12,9 @@ export function App() {
|
||||
|
||||
const createChat = () => {
|
||||
if (!me) return;
|
||||
const group = Group.create();
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], group);
|
||||
const chat = Chat.create([], { owner: group });
|
||||
router.navigate("/#/chat/" + chat.id);
|
||||
|
||||
// for https://jazz.tools marketing site demo only
|
||||
@@ -28,15 +24,7 @@ export function App() {
|
||||
return (
|
||||
<AppContainer>
|
||||
<TopBar>
|
||||
<input
|
||||
type="text"
|
||||
value={me?.profile?.name ?? ""}
|
||||
onChange={(e) => {
|
||||
if (!me?.profile) return;
|
||||
me.profile.name = e.target.value;
|
||||
}}
|
||||
placeholder="Set username"
|
||||
/>
|
||||
<p>{me?.profile?.name}</p>
|
||||
{!inIframe && <button onClick={logOut}>Log out</button>}
|
||||
</TopBar>
|
||||
{router.route({
|
||||
@@ -46,21 +34,3 @@ export function App() {
|
||||
</AppContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const url = new URL(window.location.href);
|
||||
const defaultProfileName = url.searchParams.get("user") ?? getRandomUsername();
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<ThemeProvider>
|
||||
<StrictMode>
|
||||
<JazzProvider
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
}}
|
||||
defaultProfileName={defaultProfileName}
|
||||
>
|
||||
<App />
|
||||
</JazzProvider>
|
||||
</StrictMode>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
import { useAccount, useCoState } from "./main.tsx";
|
||||
import { Chat, Message } from "./schema.ts";
|
||||
import {
|
||||
BubbleBody,
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
|
||||
export function ChatScreen(props: { chatID: ID<Chat> }) {
|
||||
const chat = useCoState(Chat, props.chatID, [{}]);
|
||||
const { me } = useAccount();
|
||||
const [showNLastMessages, setShowNLastMessages] = useState(30);
|
||||
|
||||
if (!chat)
|
||||
@@ -26,6 +27,8 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
|
||||
);
|
||||
|
||||
const sendImage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (!me?.profile) return;
|
||||
|
||||
const file = event.currentTarget.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
@@ -36,7 +39,12 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
|
||||
}
|
||||
|
||||
createImage(file, { owner: chat._owner }).then((image) => {
|
||||
chat.push(Message.create({ text: file.name, image: image }, chat._owner));
|
||||
chat.push(
|
||||
Message.create(
|
||||
{ text: file.name, image: image },
|
||||
{ owner: chat._owner },
|
||||
),
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
36
examples/chat/src/main.tsx
Normal file
36
examples/chat/src/main.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { ThemeProvider } from "@/themeProvider.tsx";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./app.tsx";
|
||||
|
||||
const Jazz = createJazzReactApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, state] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
{state.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<ThemeProvider>
|
||||
<StrictMode>
|
||||
<JazzAndAuth>
|
||||
<App />
|
||||
</JazzAndAuth>
|
||||
</StrictMode>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
@@ -15,20 +15,3 @@ export function onChatLoad(chat: Chat) {
|
||||
}
|
||||
|
||||
export const inIframe = window.self !== window.top;
|
||||
|
||||
const animals = [
|
||||
"elephant",
|
||||
"penguin",
|
||||
"giraffe",
|
||||
"octopus",
|
||||
"kangaroo",
|
||||
"dolphin",
|
||||
"cheetah",
|
||||
"koala",
|
||||
"platypus",
|
||||
"pangolin",
|
||||
];
|
||||
|
||||
export function getRandomUsername() {
|
||||
return `Anonymous ${animals[Math.floor(Math.random() * animals.length)]}`;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,48 @@
|
||||
import { test } from "@playwright/test";
|
||||
import { ChatPage } from "./pages/ChatPage";
|
||||
import { LoginPage } from "./pages/LoginPage";
|
||||
|
||||
test("chat between two users", async ({ page: marioPage, browser }) => {
|
||||
const context = await browser.newContext();
|
||||
const luigiPage = await context.newPage();
|
||||
test("chat between two users", async ({ page }) => {
|
||||
const loginPage = new LoginPage(page);
|
||||
|
||||
await marioPage.goto("/");
|
||||
const mario = "S. Mario";
|
||||
const luigi = "Luigi";
|
||||
|
||||
const marioChat = new ChatPage(marioPage);
|
||||
const luigiChat = new ChatPage(luigiPage);
|
||||
await loginPage.goto();
|
||||
await loginPage.fillUsername(mario);
|
||||
await loginPage.signup();
|
||||
|
||||
await marioChat.setUsername("Mario");
|
||||
const chatPage = new ChatPage(page);
|
||||
|
||||
const message1ByMario = "Hello Luigi, are you ready to save the princess?";
|
||||
|
||||
await marioChat.sendMessage(message1ByMario);
|
||||
await marioChat.expectMessageRow(message1ByMario);
|
||||
await chatPage.sendMessage(message1ByMario);
|
||||
await chatPage.expectMessageRow(message1ByMario);
|
||||
|
||||
const roomURL = marioPage.url();
|
||||
await luigiPage.goto(roomURL);
|
||||
const roomURL = page.url();
|
||||
|
||||
await luigiChat.setUsername("Luigi");
|
||||
await chatPage.logout();
|
||||
|
||||
await luigiChat.expectMessageRow(message1ByMario);
|
||||
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 luigiChat.sendMessage(message2ByLuigi);
|
||||
await luigiChat.expectMessageRow(message2ByLuigi);
|
||||
await chatPage.sendMessage(message2ByLuigi);
|
||||
await chatPage.expectMessageRow(message2ByLuigi);
|
||||
|
||||
await marioChat.expectMessageRow(message1ByMario);
|
||||
await luigiChat.expectMessageRow(message2ByLuigi);
|
||||
await chatPage.logout();
|
||||
await loginPage.loginAs(mario);
|
||||
|
||||
await page.goto(roomURL);
|
||||
|
||||
await chatPage.expectMessageRow(message1ByMario);
|
||||
await chatPage.expectMessageRow(message2ByLuigi);
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@ export class ChatPage {
|
||||
readonly page: Page;
|
||||
readonly messageInput: Locator;
|
||||
readonly logoutButton: Locator;
|
||||
readonly usernameInput: Locator;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
this.messageInput = page.getByRole("textbox", {
|
||||
@@ -13,11 +13,6 @@ export class ChatPage {
|
||||
this.logoutButton = page.getByRole("button", {
|
||||
name: "Log out",
|
||||
});
|
||||
this.usernameInput = page.getByPlaceholder("Set username");
|
||||
}
|
||||
|
||||
async setUsername(username: string) {
|
||||
await this.usernameInput.fill(username);
|
||||
}
|
||||
|
||||
async sendMessage(message: string) {
|
||||
|
||||
40
examples/chat/tests/pages/LoginPage.ts
Normal file
40
examples/chat/tests/pages/LoginPage.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Locator, Page, 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: value,
|
||||
})
|
||||
.click();
|
||||
}
|
||||
|
||||
async signup() {
|
||||
await this.signupButton.click();
|
||||
}
|
||||
|
||||
async expectLoaded() {
|
||||
await expect(this.signupButton).toBeVisible();
|
||||
}
|
||||
}
|
||||
@@ -1,160 +1,5 @@
|
||||
# minimal-auth-clerk
|
||||
|
||||
## 0.0.42
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.22
|
||||
- jazz-react-auth-clerk@0.9.22
|
||||
|
||||
## 0.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
- jazz-react-auth-clerk@0.9.21
|
||||
|
||||
## 0.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
- jazz-react-auth-clerk@0.9.20
|
||||
|
||||
## 0.0.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-react-auth-clerk@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-react-auth-clerk@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
- jazz-react-auth-clerk@0.9.17
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-react-auth-clerk@0.9.16
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
- jazz-react-auth-clerk@0.9.15
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
- jazz-react-auth-clerk@0.9.14
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-react-auth-clerk@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-react-auth-clerk@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-react-auth-clerk@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-react-auth-clerk@0.9.10
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
- jazz-react-auth-clerk@0.9.9
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
- jazz-react-auth-clerk@0.9.8
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
- jazz-react-auth-clerk@0.9.4
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-react-auth-clerk@0.9.1
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-react-auth-clerk@0.9.0
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -4,56 +4,30 @@ This is an example of how to use clerk authentication with Jazz.
|
||||
|
||||
Live version: https://clerk-demo.jazz.tools
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example clerk --project-name clerk
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the clerk example directory:
|
||||
```bash
|
||||
cd clerk
|
||||
cd jazz/examples/clerk
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/clerk/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "clerk",
|
||||
"private": true,
|
||||
"version": "0.0.42",
|
||||
"version": "0.0.24",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -13,7 +13,7 @@
|
||||
"dependencies": {
|
||||
"@clerk/clerk-react": "^5.4.1",
|
||||
"jazz-react": "workspace:*",
|
||||
"jazz-react-auth-clerk": "workspace:0.9.22",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.51",
|
||||
"jazz-tools": "workspace:*",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
@@ -25,6 +25,6 @@
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"globals": "^15.11.0",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,13 @@
|
||||
import { SignInButton } from "@clerk/clerk-react";
|
||||
import { useAccount, useIsAuthenticated } from "jazz-react";
|
||||
import { useAccount } from "./main";
|
||||
|
||||
function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>You're logged in</h1>
|
||||
<p>Welcome back, {me?.profile?.name}</p>
|
||||
<button onClick={() => logOut()}>Logout</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>You're not logged in</h1>
|
||||
<SignInButton />
|
||||
<h1>You're logged in</h1>
|
||||
<p>Welcome back, {me?.profile?.name}</p>
|
||||
<button onClick={() => logOut()}>Logout</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "minimal-auth-clerk-example@garden.co";
|
||||
@@ -62,7 +62,7 @@ button {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { ClerkProvider, useClerk } from "@clerk/clerk-react";
|
||||
import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
|
||||
import { createJazzReactApp } from "jazz-react";
|
||||
import { useJazzClerkAuth } from "jazz-react-auth-clerk";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
|
||||
import { apiKey } from "./apiKey";
|
||||
|
||||
// Import your publishable key
|
||||
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
|
||||
@@ -13,28 +13,38 @@ if (!PUBLISHABLE_KEY) {
|
||||
throw new Error("Add your Clerk publishable key to the .env.local file");
|
||||
}
|
||||
|
||||
function JazzProvider({ children }: { children: React.ReactNode }) {
|
||||
const Jazz = createJazzReactApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const clerk = useClerk();
|
||||
const [auth, state] = useJazzClerkAuth(clerk);
|
||||
|
||||
return (
|
||||
<JazzProviderWithClerk
|
||||
clerk={clerk}
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
when: "signedUp", // This makes the app work in local mode when the user is not authenticated
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</JazzProviderWithClerk>
|
||||
<main className="container">
|
||||
{state?.errors?.map((error) => (
|
||||
<div key={error}>{error}</div>
|
||||
))}
|
||||
{clerk.user && auth ? (
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
) : (
|
||||
<SignInButton />
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
|
||||
<JazzProvider>
|
||||
<JazzAndAuth>
|
||||
<App />
|
||||
</JazzProvider>
|
||||
</JazzAndAuth>
|
||||
</ClerkProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,136 +1,5 @@
|
||||
# file-share-svelte
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.22
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-svelte@0.9.21
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-svelte@0.9.20
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
|
||||
## 0.0.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
|
||||
## 0.0.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-svelte@0.9.17
|
||||
|
||||
## 0.0.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-svelte@0.9.16
|
||||
|
||||
## 0.0.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-svelte@0.9.15
|
||||
|
||||
## 0.0.19
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-svelte@0.9.14
|
||||
|
||||
## 0.0.18
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
|
||||
## 0.0.17
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
|
||||
## 0.0.16
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
|
||||
## 0.0.15
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-svelte@0.9.10
|
||||
|
||||
## 0.0.14
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-svelte@0.9.9
|
||||
|
||||
## 0.0.13
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-svelte@0.9.8
|
||||
|
||||
## 0.0.12
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-svelte@0.9.1
|
||||
|
||||
## 0.0.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [9dd8d95]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-svelte@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
|
||||
## 0.0.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "file-share-svelte",
|
||||
"version": "0.0.27",
|
||||
"version": "0.0.10",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -19,7 +19,7 @@
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-vercel": "^5.5.0",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.1",
|
||||
"@types/is-ci": "^3.0.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.7.0",
|
||||
@@ -35,7 +35,7 @@
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.0.0",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "file-share-svelte@garden.co"
|
||||
@@ -3,7 +3,7 @@
|
||||
import { SharedFile } from '$lib/schema';
|
||||
import { FileStream } from 'jazz-tools';
|
||||
import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
|
||||
import { useAccount } from 'jazz-svelte';
|
||||
import { useAccount } from '$lib/jazz';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { formatFileSize } from '$lib/utils';
|
||||
|
||||
|
||||
7
examples/file-share-svelte/src/lib/jazz.ts
Normal file
7
examples/file-share-svelte/src/lib/jazz.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createJazzApp } from 'jazz-svelte';
|
||||
import { FileShareAccount } from './schema';
|
||||
|
||||
export const { useAccount, useCoState, useAcceptInvite, useAccountOrGuest, Provider } =
|
||||
createJazzApp({
|
||||
AccountSchema: FileShareAccount
|
||||
});
|
||||
@@ -17,6 +17,6 @@ export function formatFileSize(bytes: number): string {
|
||||
* @param createdAt The creation date
|
||||
* @returns A unique file ID string
|
||||
*/
|
||||
export function generateTempFileId(fileName: string | undefined, createdAt: Date | undefined): string {
|
||||
return `file-${fileName ?? 'unknown'}-${createdAt?.getTime() ?? 0}`;
|
||||
export function generateTempFileId(fileName: string, createdAt: Date): string {
|
||||
return `file-${fileName}-${createdAt.getTime()}`;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,13 @@
|
||||
<script lang="ts" module>
|
||||
declare module 'jazz-svelte' {
|
||||
interface Register {
|
||||
Account: FileShareAccount;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { JazzProvider } from 'jazz-svelte';
|
||||
import { Provider } from '$lib/jazz';
|
||||
import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
|
||||
import { Toaster } from 'svelte-sonner';
|
||||
import '../app.css';
|
||||
import { FileShareAccount } from '$lib/schema';
|
||||
import {apiKey} from '../apiKey';
|
||||
|
||||
let { children } = $props();
|
||||
const auth = usePasskeyAuth({
|
||||
appName: 'File Share'
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -23,16 +16,17 @@
|
||||
|
||||
<Toaster richColors />
|
||||
|
||||
<JazzProvider
|
||||
AccountSchema={FileShareAccount}
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
when: "signedUp",
|
||||
}}
|
||||
>
|
||||
<PasskeyAuthBasicUI appName="File Share">
|
||||
{#if auth.state.state === 'ready'}
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
|
||||
<div class="rounded-lg bg-white p-8 shadow-lg">
|
||||
<PasskeyAuthBasicUI state={auth.state} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if auth.current}
|
||||
<Provider auth={auth.current} peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co">
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
{@render children()}
|
||||
</div>
|
||||
</PasskeyAuthBasicUI>
|
||||
</JazzProvider>
|
||||
</Provider>
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { useAccount, useCoState } from 'jazz-svelte';
|
||||
import { useAccount, useCoState } from '$lib/jazz';
|
||||
import { SharedFile, ListOfSharedFiles } from '$lib/schema';
|
||||
import { createInviteLink } from 'jazz-svelte';
|
||||
import { FileStream } from 'jazz-tools';
|
||||
@@ -28,7 +28,7 @@
|
||||
const input = event.target as HTMLInputElement;
|
||||
const files = input.files;
|
||||
|
||||
if (!files || !files.length || !me.root?.sharedFiles || !me.root.publicGroup) return;
|
||||
if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
|
||||
|
||||
const file = files[0];
|
||||
const fileName = file.name;
|
||||
@@ -129,14 +129,12 @@
|
||||
{#if sharedFiles.current}
|
||||
{#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
|
||||
{#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
|
||||
{#if file}
|
||||
<FileItem
|
||||
{file}
|
||||
loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
|
||||
onShare={shareFile}
|
||||
onDelete={deleteFile}
|
||||
/>
|
||||
{/if}
|
||||
<FileItem
|
||||
{file}
|
||||
loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
|
||||
onShare={shareFile}
|
||||
onDelete={deleteFile}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
<p class="text-center text-gray-500">No files yet</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { useAccount, useCoState } from 'jazz-svelte';
|
||||
import { useAccount, useCoState } from '$lib/jazz';
|
||||
import { SharedFile } from '$lib/schema';
|
||||
import { File, FileDown, Link2 } from 'lucide-svelte';
|
||||
import type { ID } from 'jazz-tools';
|
||||
|
||||
@@ -1,159 +1,5 @@
|
||||
# form
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser-media-images@0.9.22
|
||||
- jazz-react@0.9.22
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-browser-media-images@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-browser-media-images@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-browser-media-images@0.9.19
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-browser-media-images@0.9.18
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-browser-media-images@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-browser-media-images@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-browser-media-images@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-browser-media-images@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-browser-media-images@0.9.13
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-browser-media-images@0.9.12
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-browser-media-images@0.9.11
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-browser-media-images@0.9.10
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-browser-media-images@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
- jazz-browser-media-images@0.9.8
|
||||
|
||||
## 0.0.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-browser-media-images@0.9.1
|
||||
|
||||
## 0.0.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-browser-media-images@0.9.0
|
||||
|
||||
## 0.0.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -17,56 +17,30 @@ converting it into a `BubbleTeaOrder`.
|
||||
|
||||
[See the full guide here.](https://jazz.tools/docs/react/design-patterns/form)
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example form --project-name form
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the form example directory:
|
||||
```bash
|
||||
cd form
|
||||
cd jazz/examples/form
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/form/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
@@ -75,4 +49,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
|
||||
|
||||
By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.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 `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
|
||||
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/main.tsx](./src/main.tsx).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "form",
|
||||
"private": true,
|
||||
"version": "0.0.38",
|
||||
"version": "0.0.20",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -20,7 +20,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@playwright/test": "^1.50.1",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
@@ -31,6 +31,6 @@
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useIframeHashRouter } from "hash-slash";
|
||||
import { useAccount } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { CreateOrder } from "./CreateOrder.tsx";
|
||||
import { EditOrder } from "./EditOrder.tsx";
|
||||
import { Orders } from "./Orders.tsx";
|
||||
import { useAccount } from "./main";
|
||||
import { BubbleTeaOrder } from "./schema.ts";
|
||||
|
||||
function App() {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useIframeHashRouter } from "hash-slash";
|
||||
import { useAccount, useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
import { Errors } from "./Errors.tsx";
|
||||
import { LinkToHome } from "./LinkToHome.tsx";
|
||||
import { OrderForm } from "./OrderForm.tsx";
|
||||
import { useAccount, useCoState } from "./main.tsx";
|
||||
import {
|
||||
BubbleTeaOrder,
|
||||
DraftBubbleTeaOrder,
|
||||
@@ -30,9 +30,12 @@ export function CreateOrder() {
|
||||
me.root.orders.push(draft as BubbleTeaOrder);
|
||||
|
||||
// reset the draft
|
||||
me.root.draft = DraftBubbleTeaOrder.create({
|
||||
addOns: ListOfBubbleTeaAddOns.create([]),
|
||||
});
|
||||
me.root.draft = DraftBubbleTeaOrder.create(
|
||||
{
|
||||
addOns: ListOfBubbleTeaAddOns.create([], me),
|
||||
},
|
||||
me,
|
||||
);
|
||||
|
||||
router.navigate("/");
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { useAccount } from "./main.tsx";
|
||||
|
||||
export function DraftIndicator() {
|
||||
const { me } = useAccount({
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { LinkToHome } from "./LinkToHome.tsx";
|
||||
import { OrderForm } from "./OrderForm.tsx";
|
||||
import { OrderThumbnail } from "./OrderThumbnail.tsx";
|
||||
import { useCoState } from "./main.tsx";
|
||||
import { BubbleTeaOrder } from "./schema.ts";
|
||||
|
||||
export function EditOrder(props: { id: ID<BubbleTeaOrder> }) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { DraftIndicator } from "./DraftIndicator.tsx";
|
||||
import { OrderThumbnail } from "./OrderThumbnail.tsx";
|
||||
import { useAccount } from "./main.tsx";
|
||||
|
||||
export function Orders() {
|
||||
const { me } = useAccount({
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "form-example@garden.co";
|
||||
@@ -1,26 +1,39 @@
|
||||
import { JazzProvider } from "jazz-react";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { apiKey } from "./apiKey";
|
||||
import { JazzAccount } from "./schema.ts";
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: JazzAccount;
|
||||
}
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Form" state={authState} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<JazzProvider
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
}}
|
||||
AccountSchema={JazzAccount}
|
||||
>
|
||||
<JazzAndAuth>
|
||||
<App />
|
||||
</JazzProvider>
|
||||
</JazzAndAuth>
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { LoginPage } from "./pages/LoginPage";
|
||||
|
||||
test("create and edit an order", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
const loginPage = new LoginPage(page);
|
||||
|
||||
await loginPage.goto();
|
||||
await loginPage.fillUsername("Alice");
|
||||
await loginPage.signup();
|
||||
|
||||
// start an order
|
||||
await page.getByRole("link", { name: "Add new order" }).click();
|
||||
await page.getByLabel("Base tea").selectOption("Oolong");
|
||||
|
||||
40
examples/form/tests/pages/LoginPage.ts
Normal file
40
examples/form/tests/pages/LoginPage.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Locator, Page, 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: value,
|
||||
})
|
||||
.click();
|
||||
}
|
||||
|
||||
async signup() {
|
||||
await this.signupButton.click();
|
||||
}
|
||||
|
||||
async expectLoaded() {
|
||||
await expect(this.signupButton).toBeVisible();
|
||||
}
|
||||
}
|
||||
@@ -1,159 +1,5 @@
|
||||
# image-upload
|
||||
|
||||
## 0.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser-media-images@0.9.22
|
||||
- jazz-react@0.9.22
|
||||
|
||||
## 0.0.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-browser-media-images@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-browser-media-images@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-browser-media-images@0.9.19
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-browser-media-images@0.9.18
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-browser-media-images@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-browser-media-images@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-browser-media-images@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-browser-media-images@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-browser-media-images@0.9.13
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-browser-media-images@0.9.12
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-browser-media-images@0.9.11
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-browser-media-images@0.9.10
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-browser-media-images@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
- jazz-browser-media-images@0.9.8
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-browser-media-images@0.9.1
|
||||
|
||||
## 0.0.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
- jazz-browser-media-images@0.9.0
|
||||
|
||||
## 0.0.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -4,56 +4,30 @@ This is an example of how to upload and render images with Jazz.
|
||||
|
||||
Live version: https://image-upload-demo.jazz.tools
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example image-upload --project-name image-upload
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the image-upload example directory:
|
||||
```bash
|
||||
cd image-upload
|
||||
cd jazz/examples/image-upload
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/image-upload/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "image-upload",
|
||||
"private": true,
|
||||
"version": "0.0.40",
|
||||
"version": "0.0.22",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -24,6 +24,6 @@
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"globals": "^15.11.0",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import ImageUpload from "./ImageUpload.tsx";
|
||||
import { useAccount } from "./main";
|
||||
|
||||
function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { ProgressiveImg, useAccount } from "jazz-react";
|
||||
import { ProgressiveImg } from "jazz-react";
|
||||
import { ImageDefinition } from "jazz-tools";
|
||||
import { ChangeEvent, useRef } from "react";
|
||||
import { useAccount } from "./main.tsx";
|
||||
|
||||
function Image({ image }: { image: ImageDefinition }) {
|
||||
return (
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "image-upload-example@garden.co";
|
||||
@@ -1,26 +1,39 @@
|
||||
import { JazzProvider } from "jazz-react";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { apiKey } from "./apiKey.ts";
|
||||
import { JazzAccount } from "./schema.ts";
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: JazzAccount;
|
||||
}
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Image upload" state={authState} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<JazzProvider
|
||||
sync={{
|
||||
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
|
||||
}}
|
||||
AccountSchema={JazzAccount}
|
||||
>
|
||||
<JazzAndAuth>
|
||||
<App />
|
||||
</JazzProvider>
|
||||
</JazzAndAuth>
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,78 +1,5 @@
|
||||
# jazz-example-inspector
|
||||
|
||||
## 0.0.101
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [14b6149]
|
||||
- cojson-transport-ws@0.9.22
|
||||
|
||||
## 0.0.100
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [6ad0a9f]
|
||||
- cojson@0.9.19
|
||||
- cojson-transport-ws@0.9.19
|
||||
|
||||
## 0.0.99
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8898b10]
|
||||
- cojson@0.9.18
|
||||
- cojson-transport-ws@0.9.18
|
||||
|
||||
## 0.0.98
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8d29e50]
|
||||
- cojson-transport-ws@0.9.13
|
||||
- cojson@0.9.13
|
||||
|
||||
## 0.0.97
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [15d4b2a]
|
||||
- cojson-transport-ws@0.9.12
|
||||
- cojson@0.9.12
|
||||
|
||||
## 0.0.96
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [efbf3d8]
|
||||
- Updated dependencies [5863bad]
|
||||
- cojson@0.9.11
|
||||
- cojson-transport-ws@0.9.11
|
||||
|
||||
## 0.0.95
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [4aa377d]
|
||||
- cojson@0.9.10
|
||||
- cojson-transport-ws@0.9.10
|
||||
|
||||
## 0.0.94
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- cojson@0.9.9
|
||||
- cojson-transport-ws@0.9.9
|
||||
|
||||
## 0.0.93
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eda792]
|
||||
- Updated dependencies [1ef3226]
|
||||
- cojson@0.9.0
|
||||
- cojson-transport-ws@0.9.0
|
||||
|
||||
## 0.0.92
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-inspector-app",
|
||||
"name": "jazz-inspector",
|
||||
"private": true,
|
||||
"version": "0.0.101",
|
||||
"version": "0.0.92",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -16,8 +16,8 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"cojson": "workspace:0.9.19",
|
||||
"cojson-transport-ws": "workspace:0.9.22",
|
||||
"cojson": "workspace:0.8.50",
|
||||
"cojson-transport-ws": "workspace:0.8.50",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"lucide-react": "^0.274.0",
|
||||
"qrcode": "^1.5.3",
|
||||
@@ -39,6 +39,6 @@
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const apiKey = "";
|
||||
@@ -1,160 +1,5 @@
|
||||
# jazz-example-musicplayer
|
||||
|
||||
## 0.0.64
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.22
|
||||
|
||||
## 0.0.63
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-inspector@0.9.22
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.62
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-inspector@0.9.21
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.61
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-inspector@0.9.20
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
|
||||
## 0.0.60
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [2faf22f]
|
||||
- jazz-inspector@0.9.19
|
||||
|
||||
## 0.0.59
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-inspector@0.9.18
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
|
||||
## 0.0.58
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-inspector@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
|
||||
## 0.0.57
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-inspector@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.56
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-inspector@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.55
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-inspector@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.54
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-inspector@0.9.13
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
|
||||
## 0.0.53
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-inspector@0.9.12
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
|
||||
## 0.0.52
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-inspector@0.9.11
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
|
||||
## 0.0.51
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
|
||||
## 0.0.50
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.49
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
|
||||
## 0.0.48
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.47
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
|
||||
## 0.0.46
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
|
||||
## 0.0.45
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -2,56 +2,30 @@
|
||||
|
||||
Live version: https://music-demo.jazz.tools
|
||||
|
||||
## Getting started
|
||||
## Installing & running the example locally
|
||||
|
||||
You can either
|
||||
1. Clone the jazz repository, and run the app within the monorepo.
|
||||
2. Or create a new Jazz project using this example as a template.
|
||||
(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
|
||||
```bash
|
||||
npx create-jazz-app@latest --example music-player --project-name music-player
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the music-player example directory:
|
||||
```bash
|
||||
cd music-player
|
||||
cd jazz/examples/music-player
|
||||
```
|
||||
|
||||
Run the dev server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Using the monorepo
|
||||
|
||||
This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
|
||||
|
||||
Clone the jazz repository.
|
||||
```bash
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
Install and build dependencies:
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/music-player/
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
Start the dev server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
|
||||
## 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.
|
||||
@@ -60,4 +34,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
|
||||
|
||||
By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
|
||||
|
||||
You can also run a local sync server by running `npx cojson-simple-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 `<JazzProvider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
|
||||
You can also run a local sync server by running `npx cojson-simple-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/2_main.tsx](./src/2_main.tsx).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-music-player",
|
||||
"private": true,
|
||||
"version": "0.0.64",
|
||||
"version": "0.0.45",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -13,17 +13,13 @@
|
||||
"test:ui": "playwright test --ui"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-label": "^2.1.1",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"@radix-ui/react-tooltip": "^1.1.6",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"jazz-react": "workspace:0.9.22",
|
||||
"jazz-tools": "workspace:0.9.21",
|
||||
"jazz-inspector": "workspace:*",
|
||||
"jazz-react": "workspace:0.8.51",
|
||||
"jazz-tools": "workspace:0.8.51",
|
||||
"lucide-react": "^0.274.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
@@ -33,7 +29,7 @@
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.50.1",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
@@ -41,6 +37,6 @@
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.11"
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,8 +36,6 @@ export class MusicTrack extends CoMap {
|
||||
*/
|
||||
file = co.ref(FileStream);
|
||||
waveform = co.ref(MusicTrackWaveform);
|
||||
|
||||
isExampleTrack = co.optional.boolean;
|
||||
}
|
||||
|
||||
export class MusicTrackWaveform extends CoMap {
|
||||
@@ -88,20 +86,28 @@ export class MusicaAccount extends Account {
|
||||
* You can use it to set up the account root and any other initial CoValues you need.
|
||||
*/
|
||||
migrate() {
|
||||
if (this.root === undefined) {
|
||||
const tracks = ListOfTracks.create([]);
|
||||
const rootPlaylist = Playlist.create({
|
||||
tracks,
|
||||
title: "",
|
||||
});
|
||||
if (!this._refs.root) {
|
||||
const ownership = { owner: this };
|
||||
|
||||
this.root = MusicaAccountRoot.create({
|
||||
rootPlaylist,
|
||||
playlists: ListOfPlaylists.create([]),
|
||||
activeTrack: null,
|
||||
activePlaylist: rootPlaylist,
|
||||
exampleDataLoaded: false,
|
||||
});
|
||||
const tracks = ListOfTracks.create([], ownership);
|
||||
const rootPlaylist = Playlist.create(
|
||||
{
|
||||
tracks,
|
||||
title: "",
|
||||
},
|
||||
ownership,
|
||||
);
|
||||
|
||||
this.root = MusicaAccountRoot.create(
|
||||
{
|
||||
rootPlaylist,
|
||||
playlists: ListOfPlaylists.create([], ownership),
|
||||
activeTrack: null,
|
||||
activePlaylist: rootPlaylist,
|
||||
exampleDataLoaded: false,
|
||||
},
|
||||
ownership,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { JazzInspector } from "jazz-inspector";
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
@@ -11,22 +10,26 @@ import { PlayerControls } from "./components/PlayerControls";
|
||||
import "./index.css";
|
||||
|
||||
import { MusicaAccount } from "@/1_schema";
|
||||
import { apiKey } from "@/apiKey.ts";
|
||||
import { JazzProvider } from "jazz-react";
|
||||
import { onAnonymousAccountDiscarded } from "./4_actions";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { useUploadExampleData } from "./lib/useUploadExampleData";
|
||||
|
||||
/**
|
||||
* Walkthrough: The top-level provider `<JazzProvider/>`
|
||||
* Walkthrough: The top-level provider `<Jazz.Provider/>`
|
||||
*
|
||||
* This shows how to use the top-level provider `<JazzProvider/>`,
|
||||
* This shows how to use the top-level provider `<Jazz.Provider/>`,
|
||||
* which provides the rest of the app with a controlled account (used through `useAccount` later).
|
||||
* Here we use `DemoAuth` which is great for prototyping you app without wasting time on figuring out
|
||||
* the best way to do auth.
|
||||
*
|
||||
* `<JazzProvider/>` also runs our account migration
|
||||
* `<Jazz.Provider/>` also runs our account migration
|
||||
*/
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: MusicaAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
|
||||
function Main() {
|
||||
const mediaPlayer = useMediaPlayer();
|
||||
|
||||
@@ -56,31 +59,33 @@ function Main() {
|
||||
);
|
||||
}
|
||||
|
||||
const peer =
|
||||
(new URL(window.location.href).searchParams.get(
|
||||
"peer",
|
||||
) as `ws://${string}`) ?? `wss://cloud.jazz.tools/?key=${apiKey}`;
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, state] = useDemoAuth();
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: MusicaAccount;
|
||||
}
|
||||
const peer =
|
||||
(new URL(window.location.href).searchParams.get(
|
||||
"peer",
|
||||
) as `ws://${string}`) ??
|
||||
"wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
storage={["singleTabOPFS", "indexedDB"]}
|
||||
auth={auth}
|
||||
peer={peer}
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
<DemoAuthBasicUI appName="Jazz Music Player" state={state} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<JazzProvider
|
||||
sync={{
|
||||
peer,
|
||||
when: "signedUp", // This makes the app work in local mode when the user is anonymous
|
||||
}}
|
||||
storage="indexedDB"
|
||||
AccountSchema={MusicaAccount}
|
||||
defaultProfileName="Anonymous unicorn"
|
||||
onAnonymousAccountDiscarded={onAnonymousAccountDiscarded}
|
||||
>
|
||||
<JazzAndAuth>
|
||||
<Main />
|
||||
<JazzInspector />
|
||||
</JazzProvider>
|
||||
</JazzAndAuth>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
createInviteLink,
|
||||
useAccount,
|
||||
useCoState,
|
||||
useIsAuthenticated,
|
||||
} from "jazz-react";
|
||||
import { createInviteLink } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { Playlist } from "./1_schema";
|
||||
import { useAccount, useCoState } from "./2_main";
|
||||
import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
|
||||
import { MediaPlayer } from "./5_useMediaPlayer";
|
||||
import { AuthButton } from "./components/AuthButton";
|
||||
import { FileUploadButton } from "./components/FileUploadButton";
|
||||
import { LogoutButton } from "./components/LogoutButton";
|
||||
import { MusicTrackRow } from "./components/MusicTrackRow";
|
||||
import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
|
||||
import { SidePanel } from "./components/SidePanel";
|
||||
@@ -36,15 +32,19 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
|
||||
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(files);
|
||||
await uploadMusicTracks(me, files);
|
||||
}
|
||||
|
||||
async function handleCreatePlaylist() {
|
||||
const playlist = await createNewPlaylist();
|
||||
if (!me) return;
|
||||
|
||||
const playlist = await createNewPlaylist(me);
|
||||
|
||||
navigate(`/playlist/${playlist.id}`);
|
||||
}
|
||||
@@ -71,8 +71,6 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
|
||||
});
|
||||
};
|
||||
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen text-gray-800 bg-blue-50">
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
@@ -93,12 +91,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
|
||||
<Button onClick={handleCreatePlaylist}>New playlist</Button>
|
||||
</>
|
||||
)}
|
||||
{!isRootPlaylist && isAuthenticated && (
|
||||
{!isRootPlaylist && (
|
||||
<Button onClick={handlePlaylistShareClick}>
|
||||
Share playlist
|
||||
</Button>
|
||||
)}
|
||||
<AuthButton />
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
<ul className="flex flex-col">
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user