From 95471f06eedfb107d58b00d7a1f9544089cbae73 Mon Sep 17 00:00:00 2001 From: Camilo Vega <59750365+camilovegag@users.noreply.github.com> Date: Tue, 6 Aug 2024 11:41:22 -0500 Subject: [PATCH 1/3] Add skeleton to events main (#745) * Create skeleton * Add skeleton to events --- .../berlin/src/components/skeleton/Skeleton.tsx | 8 ++++++++ packages/berlin/src/components/skeleton/index.ts | 1 + packages/berlin/src/pages/Event.tsx | 16 +++++++++++++++- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 packages/berlin/src/components/skeleton/Skeleton.tsx create mode 100644 packages/berlin/src/components/skeleton/index.ts diff --git a/packages/berlin/src/components/skeleton/Skeleton.tsx b/packages/berlin/src/components/skeleton/Skeleton.tsx new file mode 100644 index 00000000..619fc126 --- /dev/null +++ b/packages/berlin/src/components/skeleton/Skeleton.tsx @@ -0,0 +1,8 @@ +import { useAppStore } from '@/store'; + +export default function Skeleton({ className }: React.HTMLAttributes) { + const theme = useAppStore((state) => state.theme); + return ( +
+ ); +} diff --git a/packages/berlin/src/components/skeleton/index.ts b/packages/berlin/src/components/skeleton/index.ts new file mode 100644 index 00000000..415f4d2c --- /dev/null +++ b/packages/berlin/src/components/skeleton/index.ts @@ -0,0 +1 @@ +export { default } from './Skeleton'; diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx index c8e079a3..22b8093a 100644 --- a/packages/berlin/src/pages/Event.tsx +++ b/packages/berlin/src/pages/Event.tsx @@ -17,10 +17,11 @@ import Cycles from '../components/cycles'; import Link from '../components/link'; import Markdown from 'react-markdown'; import Onboarding from '@/components/onboarding'; +import Skeleton from '@/components/skeleton'; function Event() { const { eventId } = useParams(); - const { data: event } = useQuery({ + const { data: event, isLoading } = useQuery({ queryKey: ['event', eventId], queryFn: () => fetchEvent({ eventId: eventId || '', serverUrl: import.meta.env.VITE_SERVER_URL }), @@ -49,6 +50,19 @@ function Event() { [openCycles], ); + if (isLoading) { + return ( +
+
+ + +
+ + +
+ ); + } + return ( <> From 22823228c3517985d0aee8a10be339d53371c3db Mon Sep 17 00:00:00 2001 From: Diego Alzate Date: Tue, 6 Aug 2024 20:39:09 +0100 Subject: [PATCH 2/3] fix always false statement to check if values are not defined (#747) * fix always false statement to check if values are not defined * Add skeleton and organize imports * Add margin-top * Fix spacing --------- Co-authored-by: camilovegag --- packages/berlin/src/pages/Register.tsx | 35 ++++++++++++++++++-------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index a6ae0ab2..74ccda5e 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -1,9 +1,10 @@ // React and third-party libraries -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { useMemo, useState } from 'react'; import { UseFormReturn, useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; +import { useMemo, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useNavigate, useParams } from 'react-router-dom'; +import { z } from 'zod'; +import toast from 'react-hot-toast'; // API import { @@ -23,21 +24,23 @@ import { type GetUserResponse, } from 'api'; +// Utils +import { dataSchema, fieldsSchema } from '@/utils/form-validation'; + // Hooks import useUser from '../hooks/useUser'; // Components -import { dataSchema, fieldsSchema } from '@/utils/form-validation'; -import { z } from 'zod'; -import Button from '../components/button'; import { Carousel } from '../components/carousel'; import { FlexColumn } from '../components/containers/FlexColumn.styled'; import { Form } from '../components/containers/Form.styled'; import { FormInput, FormSelectInput } from '../components/form-input'; -import Select from '../components/select'; -import Label from '../components/typography/Label'; -import { Subtitle } from '../components/typography/Subtitle.styled'; import { SafeArea } from '../layout/Layout.styled'; +import { Subtitle } from '../components/typography/Subtitle.styled'; +import Button from '../components/button'; +import Label from '../components/typography/Label'; +import Select from '../components/select'; +import Skeleton from '@/components/skeleton'; function Register() { const { user, isLoading } = useUser(); @@ -82,7 +85,7 @@ function Register() { } // if no fields exists then stay on group categories page - if (Object.values(fields).length === 0) { + if (Object.values(fields.data).length === 0) { return 0; } @@ -390,8 +393,18 @@ function EventGroupsForm({ } }; + if (!groupCategories) { + return ( +
+ + + +
+ ); + } + return ( - + {groupCategories ?.filter((groupCategory) => groupCategory.required) .map((groupCategory) => ( From 849729d4e7208cc2ece6544bdb01c485494c9b13 Mon Sep 17 00:00:00 2001 From: Camilo Vega <59750365+camilovegag@users.noreply.github.com> Date: Tue, 6 Aug 2024 14:40:08 -0500 Subject: [PATCH 3/3] Change upcoming to open & past to closed (#748) * Change upcoming to open at event page * Change past to closed --- packages/berlin/src/pages/Event.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx index 22b8093a..d82a633a 100644 --- a/packages/berlin/src/pages/Event.tsx +++ b/packages/berlin/src/pages/Event.tsx @@ -46,7 +46,7 @@ function Event() { ); const initialTab = useMemo( - () => (openCycles && openCycles.length > 0 ? 'upcoming' : 'past'), + () => (openCycles && openCycles.length > 0 ? 'open' : 'closed'), [openCycles], ); @@ -117,28 +117,28 @@ function Questions({ }) { const [activeTab, setActiveTab] = useState(initialTab); - const tabNames = ['upcoming', 'past']; + const tabNames = ['open', 'closed']; const tabs = { - upcoming: ( + open: ( setActiveTab('past'), + message: 'No open questions available.', + buttonMessage: 'Closed questions', + buttonOnClick: () => setActiveTab('closed'), }} /> ), - past: ( + closed: ( setActiveTab('upcoming'), + message: 'No closed questions available.', + buttonMessage: 'Open questions', + buttonOnClick: () => setActiveTab('open'), }} /> ),