Closed rivendare closed 7 months ago
ignore! feelin' silly now in hindsight, but got it working-- marking this issue as Closed
in case anyone else bumps into similar in the future, my solution:
import { Map } from "@react-facet/core";
import { sharedFacet, sharedDynamicSelector, useSharedFacet, sharedSelector } from "@react-facet/shared-facet";
interface Member {
name: string
rank: number
health: number
}
interface TeamFacet {
members: Member[]
}
const membersArray: Member[] = [
{
name: "Zeus",
rank: 3,
health: 90
},
{
name: "Demeter",
rank: 2,
health: 100
},
{
name: "Poseidon",
rank: 1,
health: 85
}
];
const teamFacet = sharedFacet<TeamFacet>("data.team", {
members: membersArray
});
const membersSelector = sharedSelector(({ members }) => members, [teamFacet]);
const memberNameSelector = sharedDynamicSelector((index: number) => [
(members) => members[index].name,
[membersSelector]
]);
const memberRankSelector = sharedDynamicSelector((index: number) => [
(members) => members[index].rank,
[membersSelector]
]);
const memberHealthSelector = sharedDynamicSelector((index: number) => [
(members) => members[index].health,
[membersSelector]
]);
const Member = ({ index }: { index: number }) => {
return (
<span>
<b>Name: </b><fast-text text={useSharedFacet(memberNameSelector(index))}/>
<br/>
<b>Rank: </b><fast-text text={useSharedFacet(memberRankSelector(index))}/>
<br/>
<b>HP: </b><fast-text text={useSharedFacet(memberHealthSelector(index))}/>
<br/>
<hr/>
</span>
);
};
export const Team = () => {
const members = useSharedFacet(membersSelector);
return (
<Map array={members}>
{(_, index) => <Member index={index} />}
</Map>
);
};
e.g., in this example:
the type error returned on Map's "array" prop:
I've tried digging through the docs, attempting to map from a SharedFacet to a Facet (couldn't seem to get that working), so figured I'd ask here. Thanks!