frontend client for gemstone. decentralised workplace app

refactor: abstract query into own hook

serenity cbd3a9ff f943d117

Changed files
+131 -110
src
+3 -55
src/components/Settings/LatticeSettings.tsx
···
import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";
import { useFacet } from "@/lib/facet";
import { fade, lighten } from "@/lib/facet/src/lib/colors";
-
import type { AtUri } from "@/lib/types/atproto";
-
import { stringToAtUri } from "@/lib/utils/atproto";
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
import { useCurrentPalette } from "@/providers/ThemeProvider";
-
import { getUserLattices } from "@/queries/get-lattices-from-pds";
-
import type { OAuthSession } from "@atproto/oauth-client";
-
import { useQuery } from "@tanstack/react-query";
+
import { useLatticesQuery } from "@/queries/hooks/useLatticesQuery";
import { Gem, Plus, Waypoints } from "lucide-react-native";
import { useState } from "react";
import { Modal, Pressable, View } from "react-native";
···
const { atoms, typography } = useFacet();
const session = useOAuthSessionGuaranteed();
const [showRegisterModal, setShowRegisterModal] = useState(false);
+
const { useQuery } = useLatticesQuery(session)
-
const { data: lattices, isLoading } = useQuery({
-
queryKey: ["lattice", session.did],
-
queryFn: async () => {
-
return await latticeQueryFn(session);
-
},
-
});
+
const { data: lattices, isLoading } = useQuery()
return isLoading ? (
<Loading />
···
</View>
);
};
-
-
const latticeQueryFn = async (session: OAuthSession) => {
-
const lattices = await getUserLattices({
-
pdsEndpoint: session.serverMetadata.issuer,
-
did: session.did,
-
});
-
-
if (!lattices.ok) {
-
console.error("latticeQueryFn error.", lattices.error);
-
throw new Error(
-
`Something went wrong while getting the user's lattice records.}`,
-
);
-
}
-
-
const results = lattices.data
-
.map((record) => {
-
const convertResult = stringToAtUri(record.uri);
-
if (!convertResult.ok) {
-
console.error(
-
"Could not convert",
-
record,
-
"into at:// URI object.",
-
convertResult.error,
-
);
-
return;
-
}
-
if (!convertResult.data.collection || !convertResult.data.rKey) {
-
console.error(
-
record,
-
"did not convert to a full at:// URI with collection and rkey.",
-
);
-
return;
-
}
-
const uri: Required<AtUri> = {
-
authority: convertResult.data.authority,
-
collection: convertResult.data.collection,
-
rKey: convertResult.data.rKey,
-
};
-
return { uri, value: record.value };
-
})
-
.filter((atUri) => atUri !== undefined);
-
-
return results;
-
};
+3 -55
src/components/Settings/ShardSettings.tsx
···
import { ShardInfo } from "@/components/Settings/ShardInfo";
import { useFacet } from "@/lib/facet";
import { fade, lighten } from "@/lib/facet/src/lib/colors";
-
import type { AtUri } from "@/lib/types/atproto";
-
import { stringToAtUri } from "@/lib/utils/atproto";
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
import { useCurrentPalette } from "@/providers/ThemeProvider";
-
import { getUserShards } from "@/queries/get-shards-from-pds";
-
import type { OAuthSession } from "@atproto/oauth-client";
-
import { useQuery } from "@tanstack/react-query";
+
import { useShardsQuery } from "@/queries/hooks/useShardsQuery";
import { Gem, HardDrive, Plus } from "lucide-react-native";
import { useState } from "react";
import { Modal, Pressable, View } from "react-native";
···
const { atoms, typography } = useFacet();
const session = useOAuthSessionGuaranteed();
const [showRegisterModal, setShowRegisterModal] = useState(false);
+
const { useQuery } = useShardsQuery(session)
-
const { data: shards, isLoading } = useQuery({
-
queryKey: ["shard", session.did],
-
queryFn: async () => {
-
return await shardsQueryFn(session);
-
},
-
});
+
const { data: shards, isLoading } = useQuery()
return isLoading ? (
<Loading />
···
</View>
);
};
-
-
const shardsQueryFn = async (session: OAuthSession) => {
-
const shards = await getUserShards({
-
pdsEndpoint: session.serverMetadata.issuer,
-
did: session.did,
-
});
-
-
if (!shards.ok) {
-
console.error("shardQueryFn error.", shards.error);
-
throw new Error(
-
`Something went wrong while getting the user's shard records.}`,
-
);
-
}
-
-
const results = shards.data
-
.map((record) => {
-
const convertResult = stringToAtUri(record.uri);
-
if (!convertResult.ok) {
-
console.error(
-
"Could not convert",
-
record,
-
"into at:// URI object.",
-
convertResult.error,
-
);
-
return;
-
}
-
if (!convertResult.data.collection || !convertResult.data.rKey) {
-
console.error(
-
record,
-
"did not convert to a full at:// URI with collection and rkey.",
-
);
-
return;
-
}
-
const uri: Required<AtUri> = {
-
authority: convertResult.data.authority,
-
collection: convertResult.data.collection,
-
rKey: convertResult.data.rKey,
-
};
-
return { uri, value: record.value };
-
})
-
.filter((atUri) => atUri !== undefined);
-
-
return results;
-
};
+63
src/queries/hooks/useLatticesQuery.ts
···
+
import type { AtUri } from "@/lib/types/atproto";
+
import { stringToAtUri } from "@/lib/utils/atproto";
+
import { getUserLattices } from "@/queries/get-lattices-from-pds";
+
import type { OAuthSession } from "@atproto/oauth-client";
+
import { useQuery } from "@tanstack/react-query";
+
+
export const useLatticesQuery = (session: OAuthSession) => {
+
const queryKey = ["lattice", session.did];
+
return {
+
queryKey,
+
useQuery: () =>
+
useQuery({
+
queryKey: queryKey,
+
queryFn: async () => {
+
return await latticeQueryFn(session);
+
},
+
}),
+
};
+
};
+
+
const latticeQueryFn = async (session: OAuthSession) => {
+
const lattices = await getUserLattices({
+
pdsEndpoint: session.serverMetadata.issuer,
+
did: session.did,
+
});
+
+
if (!lattices.ok) {
+
console.error("latticeQueryFn error.", lattices.error);
+
throw new Error(
+
`Something went wrong while getting the user's lattice records.}`,
+
);
+
}
+
+
const results = lattices.data
+
.map((record) => {
+
const convertResult = stringToAtUri(record.uri);
+
if (!convertResult.ok) {
+
console.error(
+
"Could not convert",
+
record,
+
"into at:// URI object.",
+
convertResult.error,
+
);
+
return;
+
}
+
if (!convertResult.data.collection || !convertResult.data.rKey) {
+
console.error(
+
record,
+
"did not convert to a full at:// URI with collection and rkey.",
+
);
+
return;
+
}
+
const uri: Required<AtUri> = {
+
authority: convertResult.data.authority,
+
collection: convertResult.data.collection,
+
rKey: convertResult.data.rKey,
+
};
+
return { uri, value: record.value };
+
})
+
.filter((atUri) => atUri !== undefined);
+
+
return results;
+
};
+62
src/queries/hooks/useShardsQuery.ts
···
+
import type { AtUri } from "@/lib/types/atproto";
+
import { stringToAtUri } from "@/lib/utils/atproto";
+
import { getUserShards } from "@/queries/get-shards-from-pds";
+
import type { OAuthSession } from "@atproto/oauth-client";
+
import { useQuery } from "@tanstack/react-query";
+
+
export const useShardsQuery = (session: OAuthSession) => {
+
const queryKey = ["shard", session.did];
+
return {
+
queryKey,
+
useQuery: () => useQuery({
+
queryKey: queryKey,
+
queryFn: async () => {
+
return await shardsQueryFn(session);
+
},
+
}),
+
};
+
};
+
+
const shardsQueryFn = async (session: OAuthSession) => {
+
const shards = await getUserShards({
+
pdsEndpoint: session.serverMetadata.issuer,
+
did: session.did,
+
});
+
+
if (!shards.ok) {
+
console.error("shardQueryFn error.", shards.error);
+
throw new Error(
+
`Something went wrong while getting the user's shard records.}`,
+
);
+
}
+
+
const results = shards.data
+
.map((record) => {
+
const convertResult = stringToAtUri(record.uri);
+
if (!convertResult.ok) {
+
console.error(
+
"Could not convert",
+
record,
+
"into at:// URI object.",
+
convertResult.error,
+
);
+
return;
+
}
+
if (!convertResult.data.collection || !convertResult.data.rKey) {
+
console.error(
+
record,
+
"did not convert to a full at:// URI with collection and rkey.",
+
);
+
return;
+
}
+
const uri: Required<AtUri> = {
+
authority: convertResult.data.authority,
+
collection: convertResult.data.collection,
+
rKey: convertResult.data.rKey,
+
};
+
return { uri, value: record.value };
+
})
+
.filter((atUri) => atUri !== undefined);
+
+
return results;
+
};