frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Loading } from "@/components/primitives/Loading";
2import { Text } from "@/components/primitives/Text";
3import { useFacet } from "@/lib/facet";
4import { lighten } from "@/lib/facet/src/lib/colors";
5import { registerNewShard } from "@/lib/utils/gmstn";
6import {
7 useOAuthAgentGuaranteed,
8 useOAuthSessionGuaranteed,
9} from "@/providers/OAuthProvider";
10import { useCurrentPalette } from "@/providers/ThemeProvider";
11import { useShardsQuery } from "@/queries/hooks/useShardsQuery";
12import { useMutation, useQueryClient } from "@tanstack/react-query";
13import type { Dispatch, SetStateAction } from "react";
14import { useState } from "react";
15import { Pressable, TextInput, View } from "react-native";
16
17export const RegisterShardModalContent = ({
18 setShowRegisterModal,
19}: {
20 setShowRegisterModal: Dispatch<SetStateAction<boolean>>;
21}) => {
22 const { semantic } = useCurrentPalette();
23 const { atoms, typography } = useFacet();
24 const [inputText, setInputText] = useState("");
25 const [registerError, setRegisterError] = useState<string | undefined>(
26 undefined,
27 );
28 const agent = useOAuthAgentGuaranteed();
29 const session = useOAuthSessionGuaranteed();
30 const queryClient = useQueryClient();
31 const { queryKey: shardsQueryKey } = useShardsQuery(session);
32 const { mutate: newShardMutation, isPending: mutationPending } =
33 useMutation({
34 mutationFn: async () => {
35 const registerResult = await registerNewShard({
36 shardDomain: inputText,
37 agent,
38 });
39 if (!registerResult.ok) {
40 console.error(
41 "Something went wrong when registering the shard.",
42 registerResult.error,
43 );
44 throw new Error(
45 `Something went wrong when registering the shard. ${registerResult.error}`,
46 );
47 }
48 setShowRegisterModal(false);
49 },
50 onSuccess: async () => {
51 await queryClient.invalidateQueries({
52 queryKey: shardsQueryKey,
53 });
54 setShowRegisterModal(false);
55 },
56 onError: (err) => {
57 console.error(
58 "Something went wrong when registering the shard.",
59 err,
60 );
61 setRegisterError(err.message);
62 },
63 });
64
65 const readyToSubmit = !!inputText.trim();
66
67 return (
68 <View
69 style={{
70 backgroundColor: semantic.surface,
71 borderRadius: atoms.radii.lg,
72 display: "flex",
73 gap: 12,
74 padding: 16,
75 }}
76 >
77 <View style={{ gap: 4 }}>
78 <Text>Shard domain:</Text>
79 <TextInput
80 style={[
81 {
82 flex: 1,
83 borderWidth: 1,
84 borderColor: semantic.borderVariant,
85 borderRadius: 8,
86 paddingHorizontal: 10,
87 paddingVertical: 10,
88 color: semantic.text,
89 outline: "0",
90 fontFamily: typography.families.primary,
91 width: 256,
92 },
93 typography.weights.byName.extralight,
94 typography.sizes.sm,
95 ]}
96 value={inputText}
97 onChangeText={setInputText}
98 placeholder="shard.gmstn.systems"
99 placeholderTextColor={semantic.textPlaceholder}
100 />
101 </View>
102 <Pressable
103 disabled={!readyToSubmit}
104 onPress={() => {
105 newShardMutation();
106 }}
107 >
108 {({ hovered }) =>
109 mutationPending ? (
110 <Loading size="small" />
111 ) : (
112 <View
113 style={{
114 backgroundColor: readyToSubmit
115 ? hovered
116 ? lighten(semantic.primary, 7)
117 : semantic.primary
118 : registerError
119 ? semantic.error
120 : semantic.textPlaceholder,
121 borderRadius: atoms.radii.lg,
122 alignItems: "center",
123 paddingVertical: 10,
124 }}
125 >
126 <Text
127 style={[
128 typography.weights.byName.normal,
129 { color: semantic.textInverse },
130 ]}
131 >
132 Add
133 </Text>
134 </View>
135 )
136 }
137 </Pressable>
138 </View>
139 );
140};