Compare commits
3 Commits
jazz-react
...
git-compar
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1baf60d660 | ||
|
|
cad1b0ea43 | ||
|
|
473da86cca |
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
|
||||
2
.github/workflows/playwright.yml
vendored
2
.github/workflows/playwright.yml
vendored
@@ -13,7 +13,7 @@ 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
|
||||
|
||||
@@ -1,204 +1,5 @@
|
||||
# chat-rn-clerk
|
||||
|
||||
## 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,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() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "chat-rn-clerk",
|
||||
"main": "index.js",
|
||||
"version": "1.0.62",
|
||||
"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,8 +1,15 @@
|
||||
import { useClerk, useUser } from "@clerk/clerk-expo";
|
||||
import { JazzProvider, setupKvStore } from "jazz-react-native";
|
||||
import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
|
||||
import React, { createContext, PropsWithChildren, useContext } from "react";
|
||||
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;
|
||||
@@ -15,13 +22,19 @@ export function useAuth() {
|
||||
return useContext(AuthContext);
|
||||
}
|
||||
|
||||
const kvStore = setupKvStore();
|
||||
|
||||
export function JazzAndAuth({ children }: PropsWithChildren) {
|
||||
const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
|
||||
const clerk = useClerk();
|
||||
const [auth, state] = useJazzClerkAuth(clerk, kvStore);
|
||||
const isAuthenticated = Boolean(isSignedIn && isClerkLoaded && auth);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSignedIn && isClerkLoaded && auth) {
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
}, [isSignedIn, isClerkLoaded, auth]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
@@ -34,13 +47,13 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
|
||||
</View>
|
||||
))}
|
||||
{auth && clerk.user ? (
|
||||
<JazzProvider
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
storage="sqlite"
|
||||
peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
|
||||
storage={undefined}
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
|
||||
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,166 +1,5 @@
|
||||
# chat-rn
|
||||
|
||||
## 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.59",
|
||||
"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,8 +9,9 @@ import * as Linking from "expo-linking";
|
||||
import React, { StrictMode, useEffect, useState } from "react";
|
||||
import HandleInviteScreen from "./invite";
|
||||
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react-native";
|
||||
import { DemoAuthBasicUI, useDemoAuth } from "jazz-react-native";
|
||||
import ChatScreen from "./chat";
|
||||
import { Jazz } from "./jazz";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
|
||||
@@ -33,6 +34,7 @@ function App() {
|
||||
"ChatScreen" | "HandleInviteScreen"
|
||||
>("ChatScreen");
|
||||
const navigationRef = useNavigationContainerRef();
|
||||
|
||||
useEffect(() => {
|
||||
Linking.getInitialURL().then((url) => {
|
||||
if (url) {
|
||||
@@ -49,10 +51,10 @@ function App() {
|
||||
|
||||
return (
|
||||
<StrictMode>
|
||||
<JazzProvider
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
storage="sqlite"
|
||||
peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
|
||||
storage={undefined}
|
||||
>
|
||||
<NavigationContainer linking={linking} ref={navigationRef}>
|
||||
<Stack.Navigator initialRouteName={initialRoute}>
|
||||
@@ -68,7 +70,7 @@ function App() {
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
{state.state !== "signedIn" ? (
|
||||
<DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
) : null}
|
||||
|
||||
@@ -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 }) {
|
||||
|
||||
@@ -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,147 +1,5 @@
|
||||
# chat-vue
|
||||
|
||||
## 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.46",
|
||||
"version": "0.0.30",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -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,9 +1,13 @@
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } 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 router from "./router";
|
||||
|
||||
const Jazz = createJazzVueApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
const { JazzProvider } = Jazz;
|
||||
|
||||
const RootComponent = defineComponent({
|
||||
name: "RootComponent",
|
||||
setup() {
|
||||
|
||||
@@ -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,153 +1,5 @@
|
||||
# jazz-example-chat
|
||||
|
||||
## 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.142",
|
||||
"version": "0.0.125",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import { inIframe, onChatLoad } from "@/util.ts";
|
||||
import { useIframeHashRouter } from "hash-slash";
|
||||
import { 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 { JazzAndAuth } from "./jazz.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
|
||||
@@ -38,13 +34,3 @@ export function App() {
|
||||
</AppContainer>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<ThemeProvider>
|
||||
<StrictMode>
|
||||
<JazzAndAuth>
|
||||
<App />
|
||||
</JazzAndAuth>
|
||||
</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 },
|
||||
),
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
|
||||
|
||||
export function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, state] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<JazzProvider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
{state.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Jazz Chat" state={state} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
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>,
|
||||
);
|
||||
@@ -1,153 +1,5 @@
|
||||
# minimal-auth-clerk
|
||||
|
||||
## 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.41",
|
||||
"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.21",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.51",
|
||||
"jazz-tools": "workspace:*",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { useAccount } from "./main";
|
||||
|
||||
function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
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 { JazzProvider } from "jazz-react";
|
||||
|
||||
// Import your publishable key
|
||||
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
|
||||
@@ -13,6 +13,9 @@ if (!PUBLISHABLE_KEY) {
|
||||
throw new Error("Add your Clerk publishable key to the .env.local file");
|
||||
}
|
||||
|
||||
const Jazz = createJazzReactApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const clerk = useClerk();
|
||||
const [auth, state] = useJazzClerkAuth(clerk);
|
||||
@@ -23,12 +26,12 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
<div key={error}>{error}</div>
|
||||
))}
|
||||
{clerk.user && auth ? (
|
||||
<JazzProvider
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
) : (
|
||||
<SignInButton />
|
||||
)}
|
||||
|
||||
@@ -1,130 +1,5 @@
|
||||
# file-share-svelte
|
||||
|
||||
## 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.26",
|
||||
"version": "0.0.10",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -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
|
||||
});
|
||||
@@ -1,17 +1,8 @@
|
||||
<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';
|
||||
|
||||
let { children } = $props();
|
||||
const auth = usePasskeyAuth({
|
||||
@@ -33,13 +24,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
{#if auth.current}
|
||||
<JazzProvider
|
||||
AccountSchema={FileShareAccount}
|
||||
auth={auth.current}
|
||||
peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co"
|
||||
>
|
||||
<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>
|
||||
</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';
|
||||
|
||||
@@ -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,152 +1,5 @@
|
||||
# form
|
||||
|
||||
## 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.37",
|
||||
"version": "0.0.20",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -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,22 +1,27 @@
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } 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 { JazzAccount } from "./schema.ts";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<JazzProvider
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
|
||||
AccountSchema={JazzAccount}
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Form" state={authState} />
|
||||
@@ -25,12 +30,6 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: JazzAccount;
|
||||
}
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<JazzAndAuth>
|
||||
|
||||
@@ -1,152 +1,5 @@
|
||||
# image-upload
|
||||
|
||||
## 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.39",
|
||||
"version": "0.0.22",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -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,22 +1,27 @@
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } 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 { JazzAccount } from "./schema.ts";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<JazzProvider
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
|
||||
AccountSchema={JazzAccount}
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Image upload" state={authState} />
|
||||
@@ -25,12 +30,6 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: JazzAccount;
|
||||
}
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<JazzAndAuth>
|
||||
|
||||
@@ -1,71 +1,5 @@
|
||||
# jazz-example-inspector
|
||||
|
||||
## 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.100",
|
||||
"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.19",
|
||||
"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",
|
||||
|
||||
@@ -1,154 +1,5 @@
|
||||
# jazz-example-musicplayer
|
||||
|
||||
## 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.63",
|
||||
"version": "0.0.45",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -18,9 +18,8 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"jazz-react": "workspace:0.9.21",
|
||||
"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",
|
||||
|
||||
@@ -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,20 +10,26 @@ import { PlayerControls } from "./components/PlayerControls";
|
||||
import "./index.css";
|
||||
|
||||
import { MusicaAccount } from "@/1_schema";
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
|
||||
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();
|
||||
|
||||
@@ -65,26 +70,18 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<JazzProvider
|
||||
storage="indexedDB"
|
||||
<Jazz.Provider
|
||||
storage={["singleTabOPFS", "indexedDB"]}
|
||||
auth={auth}
|
||||
peer={peer}
|
||||
AccountSchema={MusicaAccount}
|
||||
>
|
||||
{children}
|
||||
<JazzInspector />
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
<DemoAuthBasicUI appName="Jazz Music Player" state={state} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: MusicaAccount;
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<JazzAndAuth>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { createInviteLink, useAccount, useCoState } 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 { FileUploadButton } from "./components/FileUploadButton";
|
||||
@@ -31,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}`);
|
||||
}
|
||||
|
||||
@@ -22,22 +22,14 @@ import {
|
||||
* pattern that best fits your app.
|
||||
*/
|
||||
|
||||
export async function uploadMusicTracks(files: Iterable<File>) {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
rootPlaylist: {
|
||||
tracks: [],
|
||||
},
|
||||
playlists: [],
|
||||
},
|
||||
});
|
||||
|
||||
if (!me) return;
|
||||
|
||||
export async function uploadMusicTracks(
|
||||
account: MusicaAccount,
|
||||
files: Iterable<File>,
|
||||
) {
|
||||
for (const file of files) {
|
||||
// The ownership object defines the user that owns the created coValues
|
||||
// We are creating a group for each CoValue in order to be able to share them via Playlist
|
||||
const group = Group.create();
|
||||
const group = Group.create(account);
|
||||
|
||||
const data = await getAudioFileData(file);
|
||||
|
||||
@@ -58,23 +50,15 @@ export async function uploadMusicTracks(files: Iterable<File>) {
|
||||
|
||||
// The newly created musicTrack can be associated to the
|
||||
// user track list using a simple push call
|
||||
me.root.rootPlaylist.tracks.push(musicTrack);
|
||||
account.root?.rootPlaylist?.tracks?.push(musicTrack);
|
||||
}
|
||||
}
|
||||
|
||||
export async function createNewPlaylist() {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
playlists: [],
|
||||
},
|
||||
});
|
||||
|
||||
if (!me) throw new Error("Current playlist not resolved");
|
||||
|
||||
export async function createNewPlaylist(account: MusicaAccount) {
|
||||
// Since playlists are meant to be shared we associate them
|
||||
// to a group which will contain the keys required to get
|
||||
// access to the "owned" values
|
||||
const playlistGroup = Group.create();
|
||||
const playlistGroup = Group.create(account);
|
||||
|
||||
const playlist = Playlist.create(
|
||||
{
|
||||
@@ -86,7 +70,7 @@ export async function createNewPlaylist() {
|
||||
|
||||
// Again, we associate the new playlist to the
|
||||
// user by pushing it into the playlists CoList
|
||||
me.root.playlists.push(playlist);
|
||||
account.root?.playlists?.push(playlist);
|
||||
|
||||
return playlist;
|
||||
}
|
||||
@@ -94,7 +78,10 @@ export async function createNewPlaylist() {
|
||||
export async function addTrackToPlaylist(
|
||||
playlist: Playlist,
|
||||
track: MusicTrack,
|
||||
account: MusicaAccount | undefined,
|
||||
) {
|
||||
if (!account) return;
|
||||
|
||||
const alreadyAdded = playlist.tracks?.some(
|
||||
(t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
|
||||
);
|
||||
@@ -121,8 +108,12 @@ export async function addTrackToPlaylist(
|
||||
*
|
||||
* Doing this for backwards compatibility for when the Group inheritance wasn't possible
|
||||
*/
|
||||
const blob = await FileStream.loadAsBlob(track._refs.file.id);
|
||||
const waveform = await MusicTrackWaveform.load(track._refs.waveform.id, {});
|
||||
const blob = await FileStream.loadAsBlob(track._refs.file.id, account);
|
||||
const waveform = await MusicTrackWaveform.load(
|
||||
track._refs.waveform.id,
|
||||
account,
|
||||
{},
|
||||
);
|
||||
|
||||
if (!blob || !waveform) return;
|
||||
|
||||
@@ -151,25 +142,13 @@ export async function updateMusicTrackTitle(track: MusicTrack, title: string) {
|
||||
track.title = title;
|
||||
}
|
||||
|
||||
export async function updateActivePlaylist(playlist?: Playlist) {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
activePlaylist: {},
|
||||
rootPlaylist: {},
|
||||
},
|
||||
});
|
||||
|
||||
if (!me) return;
|
||||
|
||||
me.root.activePlaylist = playlist ?? me.root.rootPlaylist;
|
||||
export async function updateActivePlaylist(
|
||||
playlist: Playlist,
|
||||
me: MusicaAccount,
|
||||
) {
|
||||
me.root!.activePlaylist = playlist ?? me.root!.rootPlaylist;
|
||||
}
|
||||
|
||||
export async function updateActiveTrack(track: MusicTrack) {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {},
|
||||
});
|
||||
|
||||
if (!me) return;
|
||||
|
||||
me.root.activeTrack = track;
|
||||
export async function updateActiveTrack(track: MusicTrack, me: MusicaAccount) {
|
||||
me.root!.activeTrack = track;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
import { MusicTrack, Playlist } from "@/1_schema";
|
||||
import { usePlayMedia } from "@/lib/audio/usePlayMedia";
|
||||
import { usePlayState } from "@/lib/audio/usePlayState";
|
||||
import { useAccount } from "jazz-react";
|
||||
import { FileStream, ID } from "jazz-tools";
|
||||
import { useRef, useState } from "react";
|
||||
import { useAccount } from "./2_main";
|
||||
import { updateActivePlaylist, updateActiveTrack } from "./4_actions";
|
||||
import { getNextTrack, getPrevTrack } from "./lib/getters";
|
||||
|
||||
export function useMediaPlayer() {
|
||||
const { me } = useAccount({
|
||||
root: {},
|
||||
});
|
||||
const { me } = useAccount();
|
||||
|
||||
const playState = usePlayState();
|
||||
const playMedia = usePlayMedia();
|
||||
|
||||
const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);
|
||||
|
||||
const activeTrackId = me?.root._refs.activeTrack?.id;
|
||||
const activeTrackId = me?.root?._refs.activeTrack?.id;
|
||||
|
||||
// Reference used to avoid out-of-order track loads
|
||||
const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
|
||||
|
||||
async function loadTrack(track: MusicTrack) {
|
||||
if (!me.root) return;
|
||||
|
||||
lastLoadedTrackId.current = track.id;
|
||||
|
||||
setLoading(track.id);
|
||||
|
||||
const file = await FileStream.loadAsBlob(track._refs.file.id);
|
||||
const file = await FileStream.loadAsBlob(track._refs.file.id, me);
|
||||
|
||||
if (!file) {
|
||||
setLoading(null);
|
||||
@@ -40,7 +40,7 @@ export function useMediaPlayer() {
|
||||
return;
|
||||
}
|
||||
|
||||
updateActiveTrack(track);
|
||||
updateActiveTrack(track, me);
|
||||
|
||||
await playMedia(file);
|
||||
|
||||
@@ -48,16 +48,20 @@ export function useMediaPlayer() {
|
||||
}
|
||||
|
||||
async function playNextTrack() {
|
||||
const track = await getNextTrack();
|
||||
if (!me?.root) return;
|
||||
|
||||
const track = await getNextTrack(me);
|
||||
|
||||
if (track) {
|
||||
updateActiveTrack(track);
|
||||
updateActiveTrack(track, me);
|
||||
await loadTrack(track);
|
||||
}
|
||||
}
|
||||
|
||||
async function playPrevTrack() {
|
||||
const track = await getPrevTrack();
|
||||
if (!me?.root) return;
|
||||
|
||||
const track = await getPrevTrack(me);
|
||||
|
||||
if (track) {
|
||||
await loadTrack(track);
|
||||
@@ -65,12 +69,14 @@ export function useMediaPlayer() {
|
||||
}
|
||||
|
||||
async function setActiveTrack(track: MusicTrack, playlist?: Playlist) {
|
||||
if (!me?.root) return;
|
||||
|
||||
if (activeTrackId === track.id && lastLoadedTrackId.current !== null) {
|
||||
playState.toggle();
|
||||
return;
|
||||
}
|
||||
|
||||
updateActivePlaylist(playlist);
|
||||
updateActivePlaylist(playlist!, me);
|
||||
|
||||
await loadTrack(track);
|
||||
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { useAcceptInvite } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { MusicaAccount, Playlist } from "./1_schema";
|
||||
import { Playlist } from "./1_schema";
|
||||
import { useAcceptInvite, useAccount } from "./2_main";
|
||||
|
||||
export function InvitePage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { me } = useAccount({
|
||||
root: {
|
||||
playlists: [],
|
||||
},
|
||||
});
|
||||
|
||||
useAcceptInvite({
|
||||
invitedObjectSchema: Playlist,
|
||||
onAccept: useCallback(
|
||||
async (playlistId: ID<Playlist>) => {
|
||||
const playlist = await Playlist.load(playlistId, {});
|
||||
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
playlists: [],
|
||||
},
|
||||
});
|
||||
|
||||
if (!me) return;
|
||||
|
||||
const playlist = await Playlist.load(playlistId, me, {});
|
||||
|
||||
if (
|
||||
playlist &&
|
||||
!me.root.playlists.some((item) => playlist.id === item?.id)
|
||||
@@ -30,7 +30,7 @@ export function InvitePage() {
|
||||
|
||||
navigate("/playlist/" + playlistId);
|
||||
},
|
||||
[navigate],
|
||||
[navigate, me],
|
||||
),
|
||||
});
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { useAccount } from "@/2_main";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export function LogoutButton() {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { MusicTrack, Playlist } from "@/1_schema";
|
||||
import { useAccount, useCoState } from "@/2_main";
|
||||
import { addTrackToPlaylist } from "@/4_actions";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -7,7 +8,6 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useAccount, useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { MoreHorizontal } from "lucide-react";
|
||||
import { MusicTrackTitleInput } from "./MusicTrackTitleInput";
|
||||
@@ -43,7 +43,7 @@ export function MusicTrackRow({
|
||||
|
||||
function handleAddToPlaylist(playlist: Playlist) {
|
||||
if (!track) return;
|
||||
addTrackToPlaylist(playlist, track);
|
||||
addTrackToPlaylist(playlist, track, me);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { MusicTrack } from "@/1_schema";
|
||||
import { useCoState } from "@/2_main";
|
||||
import { updateMusicTrackTitle } from "@/4_actions";
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { MusicTrack } from "@/1_schema";
|
||||
import { useAccount, useCoState } from "@/2_main";
|
||||
import { MediaPlayer } from "@/5_useMediaPlayer";
|
||||
import { useMediaEndListener } from "@/lib/audio/useMediaEndListener";
|
||||
import { usePlayState } from "@/lib/audio/usePlayState";
|
||||
import { useKeyboardListener } from "@/lib/useKeyboardListener";
|
||||
import { useAccount, useCoState } from "jazz-react";
|
||||
import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
|
||||
import { Waveform } from "./Waveform";
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Playlist } from "@/1_schema";
|
||||
import { useCoState } from "@/2_main";
|
||||
import { updatePlaylistTitle } from "@/4_actions";
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { useAccount } from "@/2_main";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
|
||||
export function SidePanel() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { MusicTrack, MusicTrackWaveform } from "@/1_schema";
|
||||
import { useCoState } from "@/2_main";
|
||||
import { usePlayerCurrentTime } from "@/lib/audio/usePlayerCurrentTime";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useCoState } from "jazz-react";
|
||||
|
||||
export function Waveform(props: { track: MusicTrack; height: number }) {
|
||||
const { track, height } = props;
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
import { MusicaAccount } from "../1_schema";
|
||||
|
||||
export async function getNextTrack() {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
activePlaylist: {
|
||||
tracks: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
export async function getNextTrack(account: MusicaAccount) {
|
||||
if (!account.root?.activePlaylist?.tracks) return;
|
||||
|
||||
if (!me) return;
|
||||
|
||||
const tracks = me.root.activePlaylist.tracks;
|
||||
const activeTrack = me.root._refs.activeTrack;
|
||||
const tracks = account.root.activePlaylist.tracks;
|
||||
const activeTrack = account.root._refs.activeTrack;
|
||||
|
||||
const currentIndex = tracks.findIndex((item) => item?.id === activeTrack.id);
|
||||
|
||||
@@ -21,19 +13,11 @@ export async function getNextTrack() {
|
||||
return tracks[nextIndex];
|
||||
}
|
||||
|
||||
export async function getPrevTrack() {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
root: {
|
||||
activePlaylist: {
|
||||
tracks: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
export async function getPrevTrack(account: MusicaAccount) {
|
||||
if (!account.root?.activePlaylist?.tracks) return;
|
||||
|
||||
if (!me) return;
|
||||
|
||||
const tracks = me.root.activePlaylist.tracks;
|
||||
const activeTrack = me.root._refs.activeTrack;
|
||||
const tracks = account.root.activePlaylist.tracks;
|
||||
const activeTrack = account.root._refs.activeTrack;
|
||||
|
||||
const currentIndex = tracks.findIndex((item) => item?.id === activeTrack.id);
|
||||
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import { MusicaAccount } from "@/1_schema";
|
||||
// eslint-disable-next-line react-compiler/react-compiler
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect } from "react";
|
||||
import { MusicaAccount } from "../1_schema";
|
||||
import { useAccount } from "../2_main";
|
||||
import { uploadMusicTracks } from "../4_actions";
|
||||
|
||||
export function useUploadExampleData() {
|
||||
useEffect(() => {
|
||||
uploadOnboardingData();
|
||||
}, []);
|
||||
}
|
||||
|
||||
async function uploadOnboardingData() {
|
||||
const me = await MusicaAccount.getMe().ensureLoaded({
|
||||
const { me } = useAccount({
|
||||
root: {},
|
||||
});
|
||||
|
||||
if (!me) throw new Error("Me not resolved");
|
||||
const shouldUploadOnboardingData = me?.root?.exampleDataLoaded === false;
|
||||
|
||||
if (me.root.exampleDataLoaded) return;
|
||||
useEffect(() => {
|
||||
if (me?.root && shouldUploadOnboardingData) {
|
||||
me.root.exampleDataLoaded = true;
|
||||
|
||||
me.root.exampleDataLoaded = true;
|
||||
|
||||
try {
|
||||
const trackFile = await (await fetch("/example.mp3")).blob();
|
||||
|
||||
await uploadMusicTracks([new File([trackFile], "Example song")]);
|
||||
} catch (error) {
|
||||
me.root.exampleDataLoaded = false;
|
||||
throw error;
|
||||
}
|
||||
uploadOnboardingData(me).then(() => {
|
||||
me.root.exampleDataLoaded = true;
|
||||
});
|
||||
}
|
||||
}, [shouldUploadOnboardingData]);
|
||||
}
|
||||
|
||||
async function uploadOnboardingData(me: MusicaAccount) {
|
||||
const trackFile = await (await fetch("/example.mp3")).blob();
|
||||
|
||||
return uploadMusicTracks(me, [new File([trackFile], "Example song")]);
|
||||
}
|
||||
|
||||
@@ -1,152 +1,5 @@
|
||||
# jazz-example-onboarding
|
||||
|
||||
## 0.0.43
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-browser-media-images@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.42
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-browser-media-images@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
- jazz-browser-media-images@0.9.19
|
||||
|
||||
## 0.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
- jazz-browser-media-images@0.9.18
|
||||
|
||||
## 0.0.39
|
||||
|
||||
### 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.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-browser-media-images@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-browser-media-images@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-browser-media-images@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
- jazz-browser-media-images@0.9.13
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
- jazz-browser-media-images@0.9.12
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
- jazz-browser-media-images@0.9.11
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
- jazz-browser-media-images@0.9.10
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-browser-media-images@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
- jazz-browser-media-images@0.9.8
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
- jazz-browser-media-images@0.9.1
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### 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.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,54 +1,29 @@
|
||||
# Onboarding example with Jazz and React
|
||||
|
||||
## 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 onboarding --project-name onboarding
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the onboarding example directory:
|
||||
```bash
|
||||
cd onboarding
|
||||
cd jazz/examples/onboarding
|
||||
```
|
||||
|
||||
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/onboarding/
|
||||
```
|
||||
|
||||
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.
|
||||
@@ -57,4 +32,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/main.tsx](./src/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/main.tsx](./src/main.tsx).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-onboarding",
|
||||
"private": true,
|
||||
"version": "0.0.43",
|
||||
"version": "0.0.26",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Button } from "@/components/Button.tsx";
|
||||
import { useAcceptInvite, useAccount, useCoState } from "@/main.tsx";
|
||||
import { EmployeeList } from "@/pages/EmployeeList.tsx";
|
||||
import { EmployeeOnboading } from "@/pages/EmployeeOnboarding.tsx";
|
||||
import { NewEmployee } from "@/pages/NewEmployee.tsx";
|
||||
import { CoEmployee, EmployeeCoList } from "@/schema.ts";
|
||||
import { useAcceptInvite, useAccount, useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import App from "@/App.tsx";
|
||||
import "@/index.css";
|
||||
import { HRAccount } from "@/schema.ts";
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: HRAccount,
|
||||
});
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
|
||||
const peer =
|
||||
(new URL(window.location.href).searchParams.get(
|
||||
"peer",
|
||||
@@ -15,9 +20,9 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
return (
|
||||
<>
|
||||
<JazzProvider AccountSchema={HRAccount} auth={auth} peer={peer}>
|
||||
<Jazz.Provider auth={auth} peer={peer}>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Jazz Onboarding" state={authState} />
|
||||
)}
|
||||
@@ -25,12 +30,6 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: HRAccount;
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<JazzAndAuth>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { NavLink } from "@/components/NavLink.tsx";
|
||||
import { NavigateButton } from "@/components/NavigateBack.tsx";
|
||||
import { Stack } from "@/components/Stack.tsx";
|
||||
import { useCoState } from "@/main.tsx";
|
||||
import { CoEmployee, EmployeeCoList } from "@/schema.ts";
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
|
||||
export function EmployeeList({
|
||||
|
||||
@@ -2,8 +2,8 @@ import { Button } from "@/components/Button.tsx";
|
||||
import { NavigateBack } from "@/components/NavigateBack.tsx";
|
||||
import { Stack } from "@/components/Stack.tsx";
|
||||
import { TextInput } from "@/components/TextInput.tsx";
|
||||
import { useCoState } from "@/main.tsx";
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ProgressiveImg, createInviteLink } from "jazz-react";
|
||||
import { CoMap, ID } from "jazz-tools";
|
||||
import { ChangeEvent, ReactNode, useCallback } from "react";
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Button } from "@/components/Button.tsx";
|
||||
import { NavigateBack } from "@/components/NavigateBack.tsx";
|
||||
import { Stack } from "@/components/Stack.tsx";
|
||||
import { TextInput } from "@/components/TextInput.tsx";
|
||||
import { useAccount, useCoState } from "jazz-react";
|
||||
import { useAccount, useCoState } from "@/main.tsx";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
@@ -1,136 +1,5 @@
|
||||
# organization
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1be017d]
|
||||
- jazz-tools@0.9.21
|
||||
- jazz-react@0.9.21
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b01cc1f]
|
||||
- jazz-tools@0.9.20
|
||||
- jazz-react@0.9.20
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.19
|
||||
- jazz-tools@0.9.19
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.18
|
||||
- jazz-tools@0.9.18
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c2ca1fe]
|
||||
- Updated dependencies [1227047]
|
||||
- jazz-tools@0.9.17
|
||||
- jazz-react@0.9.17
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [24b3b6a]
|
||||
- jazz-tools@0.9.16
|
||||
- jazz-react@0.9.16
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7491711]
|
||||
- jazz-tools@0.9.15
|
||||
- jazz-react@0.9.15
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3df93cc]
|
||||
- jazz-tools@0.9.14
|
||||
- jazz-react@0.9.14
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.13
|
||||
- jazz-tools@0.9.13
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.12
|
||||
- jazz-tools@0.9.12
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.11
|
||||
- jazz-tools@0.9.11
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5e83864]
|
||||
- jazz-react@0.9.10
|
||||
- jazz-tools@0.9.10
|
||||
|
||||
## 0.0.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8eb9247]
|
||||
- jazz-tools@0.9.9
|
||||
- jazz-react@0.9.9
|
||||
|
||||
## 0.0.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d1d773b]
|
||||
- jazz-tools@0.9.8
|
||||
- jazz-react@0.9.8
|
||||
|
||||
## 0.0.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.9.4
|
||||
|
||||
## 0.0.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1b71969]
|
||||
- jazz-react@0.9.1
|
||||
- jazz-tools@0.9.1
|
||||
|
||||
## 0.0.19
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [956a4d1]
|
||||
- Updated dependencies [8eda792]
|
||||
- jazz-react@0.9.0
|
||||
- jazz-tools@0.9.0
|
||||
|
||||
## 0.0.18
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -5,56 +5,30 @@ Different apps have different names for this concept, such as "teams" or "worksp
|
||||
|
||||
Refer to the [documentation](https://jazz.tools/docs/react/design-patterns/organization) for more information.
|
||||
|
||||
## 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 organization --project-name organization
|
||||
npx degit gardencmp/jazz jazz
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
Go to the organization example directory:
|
||||
```bash
|
||||
cd organization
|
||||
cd jazz/examples/organization
|
||||
```
|
||||
|
||||
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/organization/
|
||||
```
|
||||
|
||||
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.
|
||||
@@ -63,4 +37,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": "organization",
|
||||
"private": true,
|
||||
"version": "0.0.35",
|
||||
"version": "0.0.18",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useAcceptInvite, useAccount } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useAcceptInvite, useAccount } from "./main.tsx";
|
||||
import { Organization } from "./schema.ts";
|
||||
|
||||
export function AcceptInvitePage() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { Layout } from "./Layout.tsx";
|
||||
import { CreateOrganization } from "./components/CreateOrganization.tsx";
|
||||
import { Heading } from "./components/Heading.tsx";
|
||||
import { useAccount } from "./main.tsx";
|
||||
|
||||
export function HomePage() {
|
||||
const { me } = useAccount({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { UserIcon } from "lucide-react";
|
||||
import { useAccount } from "./main.tsx";
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
const { me, logOut } = useAccount({
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { useCoState } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useParams } from "react-router";
|
||||
import { Layout } from "./Layout.tsx";
|
||||
@@ -6,6 +5,7 @@ import { CreateProject } from "./components/CreateProject.tsx";
|
||||
import { Heading } from "./components/Heading.tsx";
|
||||
import { InviteLink } from "./components/InviteLink.tsx";
|
||||
import { OrganizationMembers } from "./components/OrganizationMembers.tsx";
|
||||
import { useCoState } from "./main.tsx";
|
||||
import { Organization } from "./schema.ts";
|
||||
|
||||
export function OrganizationPage() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useAccount, useCoState } from "jazz-react";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useAccount, useCoState } from "../main.tsx";
|
||||
import { DraftOrganization, ListOfProjects, Organization } from "../schema.ts";
|
||||
import { Errors } from "./Errors.tsx";
|
||||
import { OrganizationForm } from "./OrganizationForm.tsx";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCoState } from "jazz-react";
|
||||
import { Account, Group, ID } from "jazz-tools";
|
||||
import { useCoState } from "../main.tsx";
|
||||
import { Organization } from "../schema.ts";
|
||||
|
||||
export function OrganizationMembers({
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useAccount } from "jazz-react";
|
||||
import { ID } from "jazz-tools";
|
||||
import { UsersIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { useAccount } from "../main.tsx";
|
||||
import { Organization } from "../schema.ts";
|
||||
|
||||
export function OrganizationSelector({ className }: { className?: string }) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
|
||||
import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
@@ -8,6 +8,11 @@ import { HomePage } from "./HomePage.tsx";
|
||||
import { OrganizationPage } from "./OrganizationPage.tsx";
|
||||
import { JazzAccount } from "./schema.ts";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
function Router() {
|
||||
const router = createHashRouter([
|
||||
{
|
||||
@@ -32,13 +37,12 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<JazzProvider
|
||||
AccountSchema={JazzAccount}
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://cloud.jazz.tools/?key=organization-example@garden.co"
|
||||
>
|
||||
{children}
|
||||
</JazzProvider>
|
||||
</Jazz.Provider>
|
||||
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Organization" state={authState} />
|
||||
@@ -47,12 +51,6 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
declare module "jazz-react" {
|
||||
interface Register {
|
||||
Account: JazzAccount;
|
||||
}
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<JazzAndAuth>
|
||||
|
||||
@@ -1,102 +1,5 @@
|
||||
# passkey-svelte
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.21
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.20
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.19
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.18
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.17
|
||||
|
||||
## 0.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.16
|
||||
|
||||
## 0.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.15
|
||||
|
||||
## 0.0.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.14
|
||||
|
||||
## 0.0.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.13
|
||||
|
||||
## 0.0.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.12
|
||||
|
||||
## 0.0.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.11
|
||||
|
||||
## 0.0.19
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.10
|
||||
|
||||
## 0.0.18
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.9
|
||||
|
||||
## 0.0.17
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.8
|
||||
|
||||
## 0.0.16
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-svelte@0.9.1
|
||||
|
||||
## 0.0.15
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [9dd8d95]
|
||||
- jazz-svelte@0.9.0
|
||||
|
||||
## 0.0.14
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -10,55 +10,34 @@ This example showcases how to:
|
||||
- Manage authentication state
|
||||
- Implement secure login/logout flows
|
||||
|
||||
## Getting started
|
||||
## Getting Started
|
||||
|
||||
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.
|
||||
1. Clone the repository:
|
||||
|
||||
|
||||
### Using the example as a template
|
||||
|
||||
Create a new Jazz project, and use this example as a template.
|
||||
```bash
|
||||
npx create-jazz-app@latest --example passkey-svelte --project-name passkey-svelte
|
||||
```
|
||||
|
||||
Go to the new project directory.
|
||||
```bash
|
||||
cd passkey-svelte
|
||||
```
|
||||
|
||||
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
|
||||
```sh
|
||||
git clone https://github.com/garden-co/jazz.git
|
||||
```
|
||||
|
||||
Install and build dependencies.
|
||||
```bash
|
||||
pnpm i && npx turbo build
|
||||
2. Navigate to the example directory:
|
||||
|
||||
```sh
|
||||
cd examples/passkey-svelte
|
||||
```
|
||||
|
||||
Go to the example directory.
|
||||
```bash
|
||||
cd jazz/examples/passkey-svelte/
|
||||
3. Install dependencies:
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Start the dev server.
|
||||
```bash
|
||||
4. Start the development server:
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
||||
5. Open your browser and visit [http://localhost:5173](http://localhost:5173)
|
||||
|
||||
|
||||
## Learn More
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "passkey-svelte",
|
||||
"version": "0.0.30",
|
||||
"version": "0.0.14",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
3
examples/passkey-svelte/src/lib/jazz.ts
Normal file
3
examples/passkey-svelte/src/lib/jazz.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { createJazzApp } from 'jazz-svelte';
|
||||
|
||||
export const { useAccount, useCoState, Provider } = createJazzApp();
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user