merge conflicts with develop

lexicongovernance · Jun 24, 2024 · a7679c1 · a7679c1
1 parent 85c263a
commit a7679c1
Show file tree

Hide file tree

Showing 13 changed files with 340 additions and 228 deletions.
diff --git a/packages/api/src/types/CycleType.ts b/packages/api/src/types/CycleType.ts
@@ -24,11 +24,11 @@ export type GetCycleResponse = {
       accepted: boolean;
       voteScore?: number;
       fundingRequest: string;
-      user: {
-        groups: {
+      user?: {
+        groups?: {
           id: string;
           name: string;
-          groupCategory: {
+          groupCategory?: {
             id: string;
             name: string | null;
             createdAt: Date;

diff --git a/packages/berlin/public/logos/lexicon-light.svg b/packages/berlin/public/logos/lexicon-light.svg
diff --git a/packages/berlin/src/components/columns/cycle-columns/CycleColumns.styled.tsx b/packages/berlin/src/components/columns/cycle-columns/CycleColumns.styled.tsx
@@ -58,6 +58,6 @@ export const Hearts = styled(FlexRow)`
 `;
 
 export const Plurality = styled(FlexRow)`
-  max-width: 5.5rem;
+  max-width: 5rem;
   padding: 1.5rem;
 `;
diff --git a/packages/berlin/src/components/dots/Dots.tsx b/packages/berlin/src/components/dots/Dots.tsx
@@ -4,14 +4,14 @@ import { Dot } from './Dots.styled';
 type DotsProps = {
   dots: number;
   activeDotIndex: number;
-  setStep: React.Dispatch<React.SetStateAction<number>>;
+  handleClick: (index: number) => void;
 };
 
-function Dots({ dots, activeDotIndex, setStep }: DotsProps) {
+function Dots({ dots, activeDotIndex, handleClick }: DotsProps) {
   return (
     <FlexRow>
       {Array.from({ length: dots }).map((_, index) => (
-        <Dot key={index} $active={index === activeDotIndex} onClick={() => setStep(index)} />
+        <Dot key={index} $active={index === activeDotIndex} onClick={() => handleClick(index)} />
       ))}
     </FlexRow>
   );

diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -1,7 +1,7 @@
 // React and third-party libraries
-import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 // Store
 import { useAppStore } from '../../store';
@@ -21,13 +21,13 @@ import NavButton from '../nav-button';
 import ZupassLoginButton from '../zupass-button/ZupassLoginButton';
 
 // Styled components
+import IconButton from '../icon-button';
 import {
   Bar,
   BurgerMenuContainer,
   DesktopButtons,
   HeaderContainer,
   LogoContainer,
-  LogoImage,
   LogoSubtitle,
   LogoTextContainer,
   LogoTitle,
@@ -38,12 +38,10 @@ import {
   StyledHeader,
   ThemeButton,
 } from './Header.styled';
-import IconButton from '../icon-button';
 
 function Header() {
   const queryClient = useQueryClient();
   const { user } = useUser();
-  const location = useLocation();
   const theme = useAppStore((state) => state.theme);
   const toggleTheme = useAppStore((state) => state.toggleTheme);
   const navigate = useNavigate();
@@ -64,13 +62,11 @@ function Header() {
     <StyledHeader>
       <HeaderContainer>
         <LogoContainer onClick={() => navigate('/')}>
-          <LogoImage src={header.logo.src} alt={header.logo.alt} height={96} width={96} />
-          {location.pathname === '/' && (
-            <LogoTextContainer>
-              <LogoTitle>{header.title}</LogoTitle>
-              <LogoSubtitle>{header.subtitle}</LogoSubtitle>
-            </LogoTextContainer>
-          )}
+          <img src={`/logos/lexicon-${theme}.svg`} alt="Lexicon Logo" height={64} width={64} />
+          <LogoTextContainer>
+            <LogoTitle>{header.title}</LogoTitle>
+            <LogoSubtitle>{header.subtitle}</LogoSubtitle>
+          </LogoTextContainer>
         </LogoContainer>
         <NavContainer>
           <NavButtons>

diff --git a/packages/berlin/src/components/option-card/OptionCard.tsx b/packages/berlin/src/components/option-card/OptionCard.tsx
@@ -55,17 +55,17 @@ function OptionCard({
 
   const [expanded, setExpanded] = useState(false);
 
-  const author = `${option.user.firstName} ${option.user.lastName}`;
+  const author = option.user ? `${option.user?.firstName} ${option.user?.lastName}` : 'Anonymous';
 
   const handleCommentsClick = () => {
     navigate(`/events/${eventId}/cycles/${cycleId}/options/${option.id}`);
   };
 
   const coauthors = useMemo(() => {
     return optionUsers?.group?.users?.filter(
-      (optionUser) => optionUser.username !== option.user.username,
+      (optionUser) => optionUser.username !== option.user?.username,
     );
-  }, [optionUsers, option.user.username]);
+  }, [optionUsers, option.user?.username]);
 
   return (
     <Card $expanded={expanded}>
@@ -89,7 +89,10 @@ function OptionCard({
           </Author>
           <Affiliation>
             <Field>Affiliation:</Field>
-            <Body>{option.user?.groups.find((group) => group.groupCategory.required)?.name}</Body>
+            <Body>
+              {option.user?.groups?.find((group) => group.groupCategory?.required)?.name ??
+                'No affiliation'}
+            </Body>
           </Affiliation>
           <Votes $showScore={showScore}>
             <VotesIcon $gap="-4px">

diff --git a/packages/berlin/src/components/tables/results-table/ResultsTable.tsx b/packages/berlin/src/components/tables/results-table/ResultsTable.tsx
@@ -1,21 +1,28 @@
 // React and third-party libraries
+import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
+// API
+import { fetchOptionUsers, fetchRegistrationData, fetchRegistrationFields } from 'api';
+
 // Store
 import { useAppStore } from '../../../store';
 
 // Components
-import { Body } from '../../typography/Body.styled';
-import { Bold } from '../../typography/Bold.styled';
 import { FlexColumn } from '../../containers/FlexColumn.styled';
 import { FlexRow } from '../../containers/FlexRow.styled';
 import IconButton from '../../icon-button';
+import { Body } from '../../typography/Body.styled';
+import { Bold } from '../../typography/Bold.styled';
 
 // Styled Components
+import { useNavigate } from 'react-router-dom';
 import { Card, Funding, Icon, Plurality, TitleContainer } from './ResultsTable.styled';
 
 type ResultsTableProps = {
   $expanded: boolean;
+  eventId?: string;
+  cycleId?: string;
   option: {
     optionTitle: string;
     pluralityScore: string;
@@ -31,9 +38,9 @@ type ResultsTableProps = {
   onClick: () => void;
 };
 
-function ResultsTable({ $expanded, option, onClick }: ResultsTableProps) {
+function ResultsTable({ $expanded, option, onClick, cycleId, eventId }: ResultsTableProps) {
   const theme = useAppStore((state) => state.theme);
-
+  const navigate = useNavigate();
   const formattedQuadraticScore = useMemo(() => {
     const score = parseFloat(option.quadraticScore);
     return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
@@ -44,6 +51,44 @@ function ResultsTable({ $expanded, option, onClick }: ResultsTableProps) {
     return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
   }, [option.pluralityScore]);
 
+  const { data: optionUsers } = useQuery({
+    queryKey: ['option', option.id, 'users'],
+    queryFn: () => fetchOptionUsers(option.id || ''),
+    enabled: !!option.id,
+  });
+
+  const { data: registrationFields } = useQuery({
+    queryKey: ['event', eventId, 'registrations', 'fields'],
+    queryFn: () => fetchRegistrationFields(eventId || ''),
+    enabled: !!eventId,
+  });
+
+  const { data: registrationData } = useQuery({
+    queryKey: ['registrations', optionUsers?.registrationId, 'registration-data'],
+    queryFn: () => fetchRegistrationData(optionUsers?.registrationId || ''),
+    enabled: !!optionUsers?.registrationId,
+  });
+
+  const researchOutputField = registrationFields?.find(
+    (field) => field.name === 'Select research output:',
+  );
+
+  const researchOutputValue = registrationData?.find(
+    (data) => data.registrationFieldId === researchOutputField?.id,
+  )?.value;
+
+  const collaborators = optionUsers?.group?.users
+    ?.filter(
+      (user) =>
+        user.firstName !== optionUsers?.user?.firstName ||
+        user.lastName !== optionUsers?.user?.lastName,
+    )
+    .map((user) => `${user.firstName} ${user.lastName}`);
+
+  const handleCommentsClick = () => {
+    navigate(`/events/${eventId}/cycles/${cycleId}/options/${option.id}`);
+  };
+
   return (
     <Card $expanded={$expanded} $showFunding={option.allocatedFunding !== null} $rowgap="2rem">
       <TitleContainer>
@@ -116,14 +161,31 @@ function ResultsTable({ $expanded, option, onClick }: ResultsTableProps) {
       <FlexColumn className="description">
         <Body>{option.optionSubTitle}</Body>
         <Body>
-          <Bold>Distinct voters:</Bold> {option.distinctUsers}
+          <Bold>Research Output:</Bold> {researchOutputValue}
+        </Body>
+        <Body>
+          <Bold>Lead Author:</Bold> {optionUsers?.user?.firstName} {optionUsers?.user?.lastName}
         </Body>
         <Body>
-          <Bold>Distinct groups:</Bold> {option.distinctGroups}
+          <Bold>Collaborators:</Bold>{' '}
+          {collaborators && collaborators.length > 0 ? collaborators.join(', ') : 'None'}
+        </Body>
+        <Body>
+          <Bold>Distinct voters:</Bold> {option.distinctUsers}
         </Body>
         <Body>
           <Bold>Voter affiliations:</Bold> {option.listOfGroupNames.join(', ')}
         </Body>
+        <Body>
+          <IconButton
+            $padding={0}
+            $color="secondary"
+            icon={{ src: `/icons/comments-${theme}.svg`, alt: 'Comments icon' }}
+            onClick={handleCommentsClick}
+            $width={24}
+            $height={24}
+          />
+        </Body>
       </FlexColumn>
     </Card>
   );