Skip to content

Commit

Permalink
Merge pull request #12 from bitbeckers/fix/ui_tweaks_bugs
Browse files Browse the repository at this point in the history
WIP: Fix/UI tweaks bugs
  • Loading branch information
bitbeckers authored Dec 6, 2022
2 parents 12729c0 + 21de212 commit 8746a57
Show file tree
Hide file tree
Showing 33 changed files with 1,898 additions and 224 deletions.
28 changes: 24 additions & 4 deletions app/.graphclient/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1631,20 +1631,31 @@ export type WorkstreamEvaluationsQueryVariables = Exact<{

export type WorkstreamEvaluationsQuery = { userWorkstreams: Array<{ workstream: (
Pick<Workstream, 'id' | 'name' | 'deadline' | 'funding' | 'resolved'>
& { contributors?: Maybe<Array<Pick<UserWorkstream, 'id'>>>, coordinator?: Maybe<Pick<User, 'id'>>, evaluations?: Maybe<Array<(
& { contributors?: Maybe<Array<(
Pick<UserWorkstream, 'id'>
& { user: Pick<User, 'id'> }
)>>, coordinator?: Maybe<Pick<User, 'id'>>, evaluations?: Maybe<Array<(
Pick<Evaluation, 'ratings'>
& { creator: Pick<User, 'id'>, contributors: Array<Pick<User, 'id'>> }
)>> }
) }> };

export type WorkstreamFragmentFragment = (
Pick<Workstream, 'id' | 'name' | 'deadline' | 'funding' | 'resolved'>
& { contributors?: Maybe<Array<Pick<UserWorkstream, 'id'>>>, coordinator?: Maybe<Pick<User, 'id'>>, evaluations?: Maybe<Array<(
& { contributors?: Maybe<Array<(
Pick<UserWorkstream, 'id'>
& { user: Pick<User, 'id'> }
)>>, coordinator?: Maybe<Pick<User, 'id'>>, evaluations?: Maybe<Array<(
Pick<Evaluation, 'ratings'>
& { creator: Pick<User, 'id'>, contributors: Array<Pick<User, 'id'>> }
)>> }
);

export type ContributorFragmentFragment = (
Pick<UserWorkstream, 'id'>
& { user: Pick<User, 'id'> }
);

export type EvaluationFragmentFragment = (
Pick<Evaluation, 'ratings'>
& { creator: Pick<User, 'id'>, contributors: Array<Pick<User, 'id'>> }
Expand Down Expand Up @@ -1746,6 +1757,14 @@ export type WorkstreamVFuxQueryVariables = Exact<{

export type WorkstreamVFuxQuery = { vfuxWorkstreams: Array<Pick<VFuxWorkstream, 'balance'>> };

export const ContributorFragmentFragmentDoc = gql`
fragment ContributorFragment on UserWorkstream {
id
user {
id
}
}
` as unknown as DocumentNode<ContributorFragmentFragment, unknown>;
export const EvaluationFragmentFragmentDoc = gql`
fragment EvaluationFragment on Evaluation {
creator {
Expand All @@ -1762,7 +1781,7 @@ export const WorkstreamFragmentFragmentDoc = gql`
id
name
contributors {
id
...ContributorFragment
}
coordinator {
id
Expand All @@ -1774,7 +1793,8 @@ export const WorkstreamFragmentFragmentDoc = gql`
...EvaluationFragment
}
}
${EvaluationFragmentFragmentDoc}` as unknown as DocumentNode<WorkstreamFragmentFragment, unknown>;
${ContributorFragmentFragmentDoc}
${EvaluationFragmentFragmentDoc}` as unknown as DocumentNode<WorkstreamFragmentFragment, unknown>;
export const UserWorkstreamFragmentFragmentDoc = gql`
fragment UserWorkstreamFragment on UserWorkstream {
workstream {
Expand Down
19 changes: 16 additions & 3 deletions app/components/FUX/ContributorRow/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,31 @@
import { HStack, Avatar, Text } from "@chakra-ui/react";
import { HStack, Avatar, Text, Button, useToast } from "@chakra-ui/react";
import { formatAddress, useENS } from "@raidguild/quiver";

export const ContributorRow: React.FC<{ address: string }> = ({ address }) => {
const { address: _address, ens, avatar } = useENS({ address });
const toast = useToast();

const handleClick = () => {
navigator.clipboard.writeText(address);
toast({
title: `Copied address to clipboard`,
status: "success",
});
};

return ens ? (
<HStack>
<Avatar name={ens} src={avatar} />
<Text>{ens}</Text>
<Button variant={"link"} onClick={() => handleClick()}>
<Text>{ens}</Text>
</Button>
</HStack>
) : (
<HStack>
<Avatar name={address} src={avatar} />
<Text>{formatAddress(address)}</Text>
<Button variant={"link"} onClick={() => handleClick()}>
<Text>{formatAddress(address)}</Text>
</Button>
</HStack>
);
};
90 changes: 90 additions & 0 deletions app/components/FUX/SoloResolutionForm/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { WorkstreamFragmentFragment } from "../../../.graphclient";
import { useResolveSoloWorkstream } from "../../../hooks/resolution";
import { ContributorRow } from "../ContributorRow";
import {
Button,
FormControl,
Grid,
GridItem,
Text,
VStack,
useToast,
} from "@chakra-ui/react";
import { useWallet } from "@raidguild/quiver";
import _ from "lodash";
import React, { Fragment } from "react";
import { useForm } from "react-hook-form";

const SoloResolutionForm: React.FC<{
workstream?: WorkstreamFragmentFragment;
}> = ({ workstream }) => {
if (!workstream) {
<Text>Loading...</Text>;
}

const toast = useToast();
const { address: user } = useWallet();

const resolveSolo = useResolveSoloWorkstream();

const {
handleSubmit,
formState: { isSubmitting },
} = useForm({});

const onSubmit = () => {
if (
workstream?.contributors?.length === 1 &&
workstream.contributors[0].user.id.toLowerCase() ===
user?.toLowerCase() &&
workstream?.id
) {
resolveSolo(Number(workstream.id));
}
};

const contributors = workstream?.contributors;

const reviewForm =
contributors && contributors?.length > 0 && user ? (
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl>
<Grid gap={2} templateColumns="repeat(10, 1fr)">
<Fragment>
<GridItem
display={"flex"}
alignItems={"center"}
bg="#301A3A"
colSpan={6}
borderLeftRadius="3xl"
>
<ContributorRow address={contributors[0].user.id} />
</GridItem>
<GridItem
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
colSpan={3}
>
<Button h={"100%"} isLoading={isSubmitting} type="submit">
Close workstream
</Button>
</GridItem>
</Fragment>
</Grid>
</FormControl>

<VStack w={"100%"} pt={4}>
<Text paddingBottom={"2em"} paddingTop={"2em"} textAlign={"center"}>
You are the sole contributor.
</Text>
</VStack>
</form>
) : (
<Text>No contributors found</Text>
);

return reviewForm;
};

export { SoloResolutionForm };
2 changes: 1 addition & 1 deletion app/components/FUX/ValueHeader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const ValueHeader: React.FC<{}> = ({}) => {
>
<Heading>Evaluate value add</Heading>
<Text w={"50%"} textAlign="center">
Allocate vFUX based on how well you think collaborators executed on
Allocate points based on how well you think collaborators executed on
their commitment.
</Text>
</VStack>
Expand Down
89 changes: 64 additions & 25 deletions app/components/FUX/ValueResolutionForm/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
WorkstreamFragmentFragment,
} from "../../../.graphclient";
import { WorkstreamFragmentFragment } from "../../../.graphclient";
import {
useMintVFux,
useVFuxBalanceForWorkstreamEvaluation,
} from "../../../hooks/fux";
import { useResolveValueEvaluation } from "../../../hooks/resolution";
import {
useResolveValueEvaluation,
} from "../../../hooks/resolution";
import { ContributorRow } from "../ContributorRow";
import {
Button,
Expand Down Expand Up @@ -36,28 +36,36 @@ type FormData = {
const ValueResolutionForm: React.FC<{
workstream?: WorkstreamFragmentFragment;
}> = ({ workstream }) => {
if (!workstream) {
<Text>Loading...</Text>;
}

const toast = useToast();
const { address: user } = useWallet();
const mintVFux = useMintVFux();

const mintVFux = useMintVFux();
const resolveEvaluation = useResolveValueEvaluation();
const vFuxAvailable = useVFuxBalanceForWorkstreamEvaluation(
Number(workstream?.id)
);

const [ratings, setRatings] = useState<{ [address: string]: BigNumberish }>();
const [total, setTotal] = useState(0);

const {
handleSubmit,
reset,
watch,
control,
formState: { errors, isSubmitting },
} = useForm<FormData>({
defaultValues: {
ratings: ratings || {},
ratings: ratings,
},
});

const formData = watch();

useEffect(() => {
if (!workstream?.evaluations || !user) {
return;
Expand All @@ -67,17 +75,38 @@ const ValueResolutionForm: React.FC<{
(evaluation) => evaluation.creator.id.toLowerCase() === user.toLowerCase()
);

if (currentEvaluation) {
const addresses = currentEvaluation?.contributors.map(
(contributor) => contributor.id
);
if (!currentEvaluation) {
return;
}

const addresses = currentEvaluation?.contributors.map(
(contributor) => contributor.id
);

const merged = _.zipObject(addresses, currentEvaluation.ratings);
const merged = _.zipObject(addresses, currentEvaluation.ratings);

setRatings(merged);
}
setRatings(merged);
}, [user, workstream]);

//TODO cleanup useEffect with all the !!!!
useEffect(() => {
if (!formData.ratings) {
return;
}

const values = Object.values(formData.ratings);

if (!values) {
return;
}

const totalVFux = values
.map((rating) => (rating ? +rating : 0))
.reduce((_total, value) => _total + value, 0);

if (totalVFux) setTotal(totalVFux);
}, [formData]);

const onSubmit = (data: FormData) => {
if (!workstream?.id || Object.values(data.ratings).length == 0) {
toast({
Expand All @@ -87,13 +116,9 @@ const ValueResolutionForm: React.FC<{
return;
}

const totalVFux = Object.values(data.ratings)
.map((rating) => Number(rating))
.reduce((total, value) => +total + value, 0);

if (totalVFux != 100) {
if (total != 100) {
toast({
title: `Not enough vFUX: ${totalVFux.toString()}/100`,
title: `Not enough: ${total || "..."}/100`,
status: "error",
});
return;
Expand Down Expand Up @@ -129,7 +154,7 @@ const ValueResolutionForm: React.FC<{
<FormControl>
<Grid gap={2} templateColumns="repeat(10, 1fr)">
{contributors.map((contributor, index) => {
return contributor.id.toLowerCase() ===
return contributor.user.id.toLowerCase() ===
user.toLowerCase() ? undefined : (
<Fragment key={index}>
<GridItem
Expand All @@ -139,7 +164,7 @@ const ValueResolutionForm: React.FC<{
colSpan={6}
borderLeftRadius="3xl"
>
<ContributorRow address={contributor.id} />
<ContributorRow address={contributor.user.id} />
</GridItem>
<GridItem
bg="#301A3A"
Expand All @@ -149,16 +174,24 @@ const ValueResolutionForm: React.FC<{
colSpan={3}
>
<Controller
name={`ratings.${contributor.id}`}
name={`ratings.${contributor.user.id}`}
control={control}
rules={{ required: true }}
key={`ratings.${contributor.id}`}
key={`ratings.${contributor.user.id}`}
render={({ field }) => (
<NumberInput {...field}>
<NumberInputField
ref={field.ref}
name={field.name}
borderRadius={0}
max={100}
placeholder={
ratings
? ratings[
contributor.user.id.toLowerCase()
].toString()
: "0"
}
/>
<NumberInputStepper>
<NumberIncrementStepper />
Expand Down Expand Up @@ -187,8 +220,14 @@ const ValueResolutionForm: React.FC<{
Reset
</Button>
<Spacer />
<Button isLoading={isSubmitting} type="submit">
Finalize workstream
<Button
isDisabled={total != 100}
isLoading={isSubmitting}
type="submit"
>
{total && total != 100
? `${100 - total} / 100`
: "Finalize workstream"}
</Button>
</ButtonGroup>
</VStack>
Expand Down
Loading

1 comment on commit 8746a57

@vercel
Copy link

@vercel vercel bot commented on 8746a57 Dec 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.