Skip to content

Commit

Permalink
First glance at new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@camilovegag
camilovegag committed Aug 1, 2024
1 parent 9fbcf68 commit 98a91bc
Showing 1 changed file with 196 additions and 33 deletions.
229 changes: 196 additions & 33 deletions packages/berlin/src/pages/Results.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
// React and third party libraries
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { useMemo } from 'react';

// API
import { fetchCycle, fetchQuestionFunding, fetchQuestionStatistics } from 'api';
import {
fetchCycle,
fetchOptionUsers,
fetchQuestionFunding,
fetchQuestionStatistics,
fetchRegistrationData,
fetchRegistrationFields,
} from 'api';

// Components
import { Column } from '../components/tables/results-table/ResultsTable.styled';
import { FINAL_QUESTION_TITLE } from '../utils/constants';
import { FlexColumn } from '../components/containers/FlexColumn.styled';
import { resultsSteps } from '@/components/onboarding/Steps';
import { Subtitle } from '../components/typography/Subtitle.styled';
import BackButton from '../components/back-button';
import Onboarding from '@/components/onboarding';
import ResultsColumns from '../components/columns/results-columns';
import ResultsTable from '../components/tables/results-table';
import StatsColumns from '../components/columns/stats-columns';
import StatsTable from '../components/tables/stats-table';
import { Body } from '@/components/typography/Body.styled';
import { Bold } from '@/components/typography/Bold.styled';
import { Heart, Radical } from 'lucide-react';
import Markdown from 'react-markdown';
import Link from '@/components/link';
import { useAppStore } from '@/store';

function Results() {
const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

const { eventId, cycleId } = useParams();

const { data: cycle } = useQuery({
Expand Down Expand Up @@ -53,28 +59,28 @@ function Results() {
enabled: !!cycle?.id && cycle?.questions?.[0].title === FINAL_QUESTION_TITLE,
});

const overallStatistics = [
{
id: 0,
title: 'Number of proposals',
data: statistics?.numProposals,
},
{
id: 1,
title: 'Allocated hearts',
data: statistics?.sumNumOfHearts,
},
{
id: 2,
title: 'Number of participants',
data: statistics?.numOfParticipants,
},
{
id: 3,
title: 'Number of groups',
data: statistics?.numOfGroups,
},
];
// const overallStatistics = [
// {
// id: 0,
// title: 'Number of proposals',
// data: statistics?.numProposals,
// },
// {
// id: 1,
// title: 'Allocated hearts',
// data: statistics?.sumNumOfHearts,
// },
// {
// id: 2,
// title: 'Number of participants',
// data: statistics?.numOfParticipants,
// },
// {
// id: 3,
// title: 'Number of groups',
// data: statistics?.numOfGroups,
// },
// ];

const optionStatsArray = Object.entries(statistics?.optionStats || {})
.map(([id, stats]) => ({
Expand All @@ -91,7 +97,10 @@ function Results() {
<FlexColumn $gap="2rem" className="welcome icons expand">
<BackButton fallbackRoute={`/events/${eventId}/cycles`} />
<Subtitle>Results for: {cycle?.questions?.[0].title}</Subtitle>
<Column>
{optionStatsArray.map((option) => {
return <Option key={option.id} option={option} />;
})}
{/* <Column>
<ResultsColumns $showFunding={!!funding} />
{optionStatsArray.map((option, index) => (
<ResultsTable
Expand All @@ -110,10 +119,164 @@ function Results() {
{overallStatistics.map((stat) => (
<StatsTable key={stat.id} title={stat.title} number={stat.data} />
))}
</FlexColumn>
</FlexColumn> */}
</FlexColumn>
</>
);
}

function Option({
option,
}: {
option: {
allocatedFunding: number | null;
allocatedHearts: number;
distinctGroups: number;
distinctUsers: number;
id: string;
listOfGroupNames: string[];
pluralityScore: string;
quadraticScore: string;
subTitle: string;
title: string;
};
}) {
console.log('option:', option);
console.log('option.distinctUsers:', option.distinctUsers);
const theme = useAppStore((state) => state.theme);
const { eventId } = useParams();
const { data: optionUsers } = useQuery({
queryKey: ['option', option.id, 'users'],
queryFn: () =>
fetchOptionUsers({ optionId: option.id || '', serverUrl: import.meta.env.VITE_SERVER_URL }),
enabled: !!option.id,
});

const { data: registrationFields } = useQuery({
queryKey: ['event', eventId, 'registrations', 'fields'],
queryFn: () =>
fetchRegistrationFields({
eventId: eventId || '',
serverUrl: import.meta.env.VITE_SERVER_URL,
}),
enabled: !!eventId,
});

const { data: registrationData } = useQuery({
queryKey: ['registrations', optionUsers?.registrationId, 'registration-data'],
queryFn: () =>
fetchRegistrationData({
registrationId: optionUsers?.registrationId || '',
serverUrl: import.meta.env.VITE_SERVER_URL,
}),
enabled: !!optionUsers?.registrationId,
});

const author = useMemo(() => {
if (optionUsers?.user) {
return `${optionUsers.user?.firstName} ${optionUsers.user?.lastName}`;
}
return null;
}, [optionUsers]);

const pluralityScore = useMemo(() => {
const score = parseFloat(String(option.pluralityScore));
return score % 1 === 0 ? score.toFixed(0) : score.toFixed(1);
}, [option.pluralityScore]);

const quadraticScore = useMemo(() => {
const score = parseFloat(option.quadraticScore);
return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
}, [option.quadraticScore]);

const researchOutputField = useMemo(
() => registrationFields?.find((field) => field.name === 'Select research output:'),
[registrationFields],
);

const researchOutputValue = useMemo(() => {
if (researchOutputField) {
return registrationData?.find((data) => data.registrationFieldId === researchOutputField.id)
?.value;
}
return undefined;
}, [researchOutputField, registrationData]);

const collaborators = useMemo(() => {
return optionUsers?.group?.users
?.filter(
(user) =>
user.firstName !== optionUsers?.user?.firstName ||
user.lastName !== optionUsers?.user?.lastName,
)
.map((user) => `${user.firstName} ${user.lastName}`);
}, [optionUsers]);

return (
<article className="border-secondary flex w-full flex-col gap-4 border p-4">
<Body>{option.title}</Body>
{author && (
<Body>
<Bold>Creator: </Bold>
{author}
</Body>
)}
{pluralityScore && (
<span className="flex items-center gap-2">
<img src="/icons/plurality-score.svg" width={24} height={24} />
<Body>{pluralityScore}</Body>
</span>
)}
{quadraticScore && (
<span className="flex items-center gap-2">
<Radical />
<Body>{quadraticScore}</Body>
</span>
)}
<span className="flex items-center gap-2">
<Heart fill="#ff0000" />
<Body>{option.allocatedHearts}</Body>
</span>
{option.allocatedFunding && (
<span className="flex items-center gap-2">
<img src={`/logos/arbitrum-${theme}.svg`} width={24} height={24} />
<Body>{pluralityScore}</Body>
</span>
)}
{option.distinctUsers !== 0 && (
<Body className="flex items-center gap-2">
<Bold>Distinct Voters: </Bold>
{option.distinctUsers}
</Body>
)}
{option.listOfGroupNames && option.listOfGroupNames.length > 0 && (
<Body className="flex items-center gap-2">
<Bold>Voter affiliations:</Bold> {option.listOfGroupNames.join(', ')}
</Body>
)}
{researchOutputValue && (
<Body className="flex items-center gap-2">
<Bold>Research Output:</Bold> {researchOutputValue}
</Body>
)}
{collaborators && collaborators.length > 0 && (
<Body>
<Bold>Collaborators: </Bold>
{collaborators.join(', ')}
</Body>
)}
{option.subTitle && (
<Markdown
components={{
a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
p: ({ node, ...props }) => <Body>{props.children}</Body>,
}}
>
{option.subTitle}
</Markdown>
)}
</article>
);
}

export default Results;

0 comments on commit 98a91bc

Please sign in to comment.