frontend client for gemstone. decentralised workplace app
refactor: abstract query into own hook
+131
-110
+3
-55
src/components/Settings/LatticeSettings.tsx
+3
-55
src/components/Settings/LatticeSettings.tsx
···
4
4
import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";
5
5
import { useFacet } from "@/lib/facet";
6
6
import { fade, lighten } from "@/lib/facet/src/lib/colors";
7
-
import type { AtUri } from "@/lib/types/atproto";
8
-
import { stringToAtUri } from "@/lib/utils/atproto";
9
7
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
10
8
import { useCurrentPalette } from "@/providers/ThemeProvider";
11
-
import { getUserLattices } from "@/queries/get-lattices-from-pds";
12
-
import type { OAuthSession } from "@atproto/oauth-client";
13
-
import { useQuery } from "@tanstack/react-query";
9
+
import { useLatticesQuery } from "@/queries/hooks/useLatticesQuery";
14
10
import { Gem, Plus, Waypoints } from "lucide-react-native";
15
11
import { useState } from "react";
16
12
import { Modal, Pressable, View } from "react-native";
···
20
16
const { atoms, typography } = useFacet();
21
17
const session = useOAuthSessionGuaranteed();
22
18
const [showRegisterModal, setShowRegisterModal] = useState(false);
19
+
const { useQuery } = useLatticesQuery(session)
23
20
24
-
const { data: lattices, isLoading } = useQuery({
25
-
queryKey: ["lattice", session.did],
26
-
queryFn: async () => {
27
-
return await latticeQueryFn(session);
28
-
},
29
-
});
21
+
const { data: lattices, isLoading } = useQuery()
30
22
31
23
return isLoading ? (
32
24
<Loading />
···
167
159
</View>
168
160
);
169
161
};
170
-
171
-
const latticeQueryFn = async (session: OAuthSession) => {
172
-
const lattices = await getUserLattices({
173
-
pdsEndpoint: session.serverMetadata.issuer,
174
-
did: session.did,
175
-
});
176
-
177
-
if (!lattices.ok) {
178
-
console.error("latticeQueryFn error.", lattices.error);
179
-
throw new Error(
180
-
`Something went wrong while getting the user's lattice records.}`,
181
-
);
182
-
}
183
-
184
-
const results = lattices.data
185
-
.map((record) => {
186
-
const convertResult = stringToAtUri(record.uri);
187
-
if (!convertResult.ok) {
188
-
console.error(
189
-
"Could not convert",
190
-
record,
191
-
"into at:// URI object.",
192
-
convertResult.error,
193
-
);
194
-
return;
195
-
}
196
-
if (!convertResult.data.collection || !convertResult.data.rKey) {
197
-
console.error(
198
-
record,
199
-
"did not convert to a full at:// URI with collection and rkey.",
200
-
);
201
-
return;
202
-
}
203
-
const uri: Required<AtUri> = {
204
-
authority: convertResult.data.authority,
205
-
collection: convertResult.data.collection,
206
-
rKey: convertResult.data.rKey,
207
-
};
208
-
return { uri, value: record.value };
209
-
})
210
-
.filter((atUri) => atUri !== undefined);
211
-
212
-
return results;
213
-
};
+3
-55
src/components/Settings/ShardSettings.tsx
+3
-55
src/components/Settings/ShardSettings.tsx
···
4
4
import { ShardInfo } from "@/components/Settings/ShardInfo";
5
5
import { useFacet } from "@/lib/facet";
6
6
import { fade, lighten } from "@/lib/facet/src/lib/colors";
7
-
import type { AtUri } from "@/lib/types/atproto";
8
-
import { stringToAtUri } from "@/lib/utils/atproto";
9
7
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
10
8
import { useCurrentPalette } from "@/providers/ThemeProvider";
11
-
import { getUserShards } from "@/queries/get-shards-from-pds";
12
-
import type { OAuthSession } from "@atproto/oauth-client";
13
-
import { useQuery } from "@tanstack/react-query";
9
+
import { useShardsQuery } from "@/queries/hooks/useShardsQuery";
14
10
import { Gem, HardDrive, Plus } from "lucide-react-native";
15
11
import { useState } from "react";
16
12
import { Modal, Pressable, View } from "react-native";
···
20
16
const { atoms, typography } = useFacet();
21
17
const session = useOAuthSessionGuaranteed();
22
18
const [showRegisterModal, setShowRegisterModal] = useState(false);
19
+
const { useQuery } = useShardsQuery(session)
23
20
24
-
const { data: shards, isLoading } = useQuery({
25
-
queryKey: ["shard", session.did],
26
-
queryFn: async () => {
27
-
return await shardsQueryFn(session);
28
-
},
29
-
});
21
+
const { data: shards, isLoading } = useQuery()
30
22
31
23
return isLoading ? (
32
24
<Loading />
···
167
159
</View>
168
160
);
169
161
};
170
-
171
-
const shardsQueryFn = async (session: OAuthSession) => {
172
-
const shards = await getUserShards({
173
-
pdsEndpoint: session.serverMetadata.issuer,
174
-
did: session.did,
175
-
});
176
-
177
-
if (!shards.ok) {
178
-
console.error("shardQueryFn error.", shards.error);
179
-
throw new Error(
180
-
`Something went wrong while getting the user's shard records.}`,
181
-
);
182
-
}
183
-
184
-
const results = shards.data
185
-
.map((record) => {
186
-
const convertResult = stringToAtUri(record.uri);
187
-
if (!convertResult.ok) {
188
-
console.error(
189
-
"Could not convert",
190
-
record,
191
-
"into at:// URI object.",
192
-
convertResult.error,
193
-
);
194
-
return;
195
-
}
196
-
if (!convertResult.data.collection || !convertResult.data.rKey) {
197
-
console.error(
198
-
record,
199
-
"did not convert to a full at:// URI with collection and rkey.",
200
-
);
201
-
return;
202
-
}
203
-
const uri: Required<AtUri> = {
204
-
authority: convertResult.data.authority,
205
-
collection: convertResult.data.collection,
206
-
rKey: convertResult.data.rKey,
207
-
};
208
-
return { uri, value: record.value };
209
-
})
210
-
.filter((atUri) => atUri !== undefined);
211
-
212
-
return results;
213
-
};
+63
src/queries/hooks/useLatticesQuery.ts
+63
src/queries/hooks/useLatticesQuery.ts
···
1
+
import type { AtUri } from "@/lib/types/atproto";
2
+
import { stringToAtUri } from "@/lib/utils/atproto";
3
+
import { getUserLattices } from "@/queries/get-lattices-from-pds";
4
+
import type { OAuthSession } from "@atproto/oauth-client";
5
+
import { useQuery } from "@tanstack/react-query";
6
+
7
+
export const useLatticesQuery = (session: OAuthSession) => {
8
+
const queryKey = ["lattice", session.did];
9
+
return {
10
+
queryKey,
11
+
useQuery: () =>
12
+
useQuery({
13
+
queryKey: queryKey,
14
+
queryFn: async () => {
15
+
return await latticeQueryFn(session);
16
+
},
17
+
}),
18
+
};
19
+
};
20
+
21
+
const latticeQueryFn = async (session: OAuthSession) => {
22
+
const lattices = await getUserLattices({
23
+
pdsEndpoint: session.serverMetadata.issuer,
24
+
did: session.did,
25
+
});
26
+
27
+
if (!lattices.ok) {
28
+
console.error("latticeQueryFn error.", lattices.error);
29
+
throw new Error(
30
+
`Something went wrong while getting the user's lattice records.}`,
31
+
);
32
+
}
33
+
34
+
const results = lattices.data
35
+
.map((record) => {
36
+
const convertResult = stringToAtUri(record.uri);
37
+
if (!convertResult.ok) {
38
+
console.error(
39
+
"Could not convert",
40
+
record,
41
+
"into at:// URI object.",
42
+
convertResult.error,
43
+
);
44
+
return;
45
+
}
46
+
if (!convertResult.data.collection || !convertResult.data.rKey) {
47
+
console.error(
48
+
record,
49
+
"did not convert to a full at:// URI with collection and rkey.",
50
+
);
51
+
return;
52
+
}
53
+
const uri: Required<AtUri> = {
54
+
authority: convertResult.data.authority,
55
+
collection: convertResult.data.collection,
56
+
rKey: convertResult.data.rKey,
57
+
};
58
+
return { uri, value: record.value };
59
+
})
60
+
.filter((atUri) => atUri !== undefined);
61
+
62
+
return results;
63
+
};
+62
src/queries/hooks/useShardsQuery.ts
+62
src/queries/hooks/useShardsQuery.ts
···
1
+
import type { AtUri } from "@/lib/types/atproto";
2
+
import { stringToAtUri } from "@/lib/utils/atproto";
3
+
import { getUserShards } from "@/queries/get-shards-from-pds";
4
+
import type { OAuthSession } from "@atproto/oauth-client";
5
+
import { useQuery } from "@tanstack/react-query";
6
+
7
+
export const useShardsQuery = (session: OAuthSession) => {
8
+
const queryKey = ["shard", session.did];
9
+
return {
10
+
queryKey,
11
+
useQuery: () => useQuery({
12
+
queryKey: queryKey,
13
+
queryFn: async () => {
14
+
return await shardsQueryFn(session);
15
+
},
16
+
}),
17
+
};
18
+
};
19
+
20
+
const shardsQueryFn = async (session: OAuthSession) => {
21
+
const shards = await getUserShards({
22
+
pdsEndpoint: session.serverMetadata.issuer,
23
+
did: session.did,
24
+
});
25
+
26
+
if (!shards.ok) {
27
+
console.error("shardQueryFn error.", shards.error);
28
+
throw new Error(
29
+
`Something went wrong while getting the user's shard records.}`,
30
+
);
31
+
}
32
+
33
+
const results = shards.data
34
+
.map((record) => {
35
+
const convertResult = stringToAtUri(record.uri);
36
+
if (!convertResult.ok) {
37
+
console.error(
38
+
"Could not convert",
39
+
record,
40
+
"into at:// URI object.",
41
+
convertResult.error,
42
+
);
43
+
return;
44
+
}
45
+
if (!convertResult.data.collection || !convertResult.data.rKey) {
46
+
console.error(
47
+
record,
48
+
"did not convert to a full at:// URI with collection and rkey.",
49
+
);
50
+
return;
51
+
}
52
+
const uri: Required<AtUri> = {
53
+
authority: convertResult.data.authority,
54
+
collection: convertResult.data.collection,
55
+
rKey: convertResult.data.rKey,
56
+
};
57
+
return { uri, value: record.value };
58
+
})
59
+
.filter((atUri) => atUri !== undefined);
60
+
61
+
return results;
62
+
};