Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: fixed pushing data to supabase. changed inputdropdown so ch… #39

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

refactor: fixed pushing data to supabase. changed inputdropdown so ch… #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c1b432
refactor: fixed pushing data to supabase. changed inputdropdown so ch…
me-liu Dec 8, 2024
3383127
eslint
me-liu Dec 8, 2024
32b0afd
refactor: deleted commented out
me-liu Dec 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 138 additions & 27 deletions api/supabase/queries/onboarding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,156 @@ export async function submitOnboardingData(
role: Role,
): Promise<void> {
try {
const { data: sessionData, error: sessionError } =
await supabase.auth.getSession();

if (sessionError || !sessionData?.session) {
console.error('Session retrieval error:', sessionError);
throw new Error('Failed to retrieve user session.');
}

const user_id = sessionData.session.user.id;
const email = sessionData.session.user.email;

const volunteerPayload = {
user_id,
email,
first_name: generalInfo.firstName,
last_name: generalInfo.lastName,
phone_number: generalInfo.phoneNumber,
notifications_opt_in: generalInfo.notifications,
};

const { data: volunteerData, error: volunteerError } = await supabase
.from('volunteers')
.insert([
{
first_name: generalInfo.firstName,
last_name: generalInfo.lastName,
phone_number: generalInfo.phoneNumber,
notifications_opt_in: generalInfo.notifications,
},
]);

if (volunteerError)
.upsert([volunteerPayload], { onConflict: 'user_id' });

if (volunteerError) {
console.error('Error upserting volunteer data:', volunteerError);
throw new Error(`Volunteer data error: ${volunteerError.message}`);
}

const preferencesPayload = {
user_id,
role: [
...(role.isPerformer ? ['performer'] : []),
...(role.isHost ? ['host'] : []),
],
facility_type: preferences.facilityType,
locations: preferences.location,
audience_type: preferences.audience,
performer_type: preferences.performerType,
performance_type: preferences.performanceType,
genre: preferences.genre,
additional_info: preferences.additionalInfo,
};

const { data: preferencesData, error: preferencesError } = await supabase
.from('volunteer_preferences')
.insert([
{
role: [
role.isPerformer ? 'performer' : null,
role.isHost ? 'host' : null,
].filter(Boolean),
facility_type: preferences.facilityType,
locations: preferences.location,
audience_type: preferences.audience,
performer_type: preferences.performerType,
performance_type: preferences.performanceType,
genre: preferences.genre,
},
]);

if (preferencesError)
.insert([preferencesPayload]);

if (preferencesError) {
console.error('Error inserting preferences data:', preferencesError);
throw new Error(`Preferences data error: ${preferencesError.message}`);
}

console.log('Onboarding data submitted successfully:', {
volunteerData,
preferencesData,
});
} catch (error) {
console.error('Error submitting onboarding data:', error);
console.error('Error during onboarding data submission:', error);
throw error;
}
}

export async function submitGeneralInfo(
generalInfo: GeneralInfo,
): Promise<void> {
try {
const { data: sessionData, error: sessionError } =
await supabase.auth.getSession();
if (sessionError || !sessionData?.session) {
throw new Error('Failed to retrieve user session.');
}

const user_id = sessionData.session.user.id;
const email = sessionData.session.user.email;

const generalInfoPayload = {
user_id,
email,
first_name: generalInfo.firstName,
last_name: generalInfo.lastName,
phone_number: generalInfo.phoneNumber,
notifications_opt_in: generalInfo.notifications,
};

const { data, error: volunteerError } = await supabase
.from('volunteers')
.upsert([generalInfoPayload], { onConflict: 'user_id' });

if (volunteerError) {
throw new Error(`General info data error: ${volunteerError.message}`);
}

console.log('Upserted general info data:', data);
} catch (error) {
throw error;
}
}

export async function submitPreferences(
preferences: Preferences,
role: Role,
): Promise<void> {
try {
console.log('Starting preferences data submission...');

const { data: sessionData, error: sessionError } =
await supabase.auth.getSession();
console.log('Session data retrieved:', sessionData);

if (sessionError || !sessionData?.session) {
console.error('Session retrieval error:', sessionError);
throw new Error('Failed to retrieve user session.');
}

const user_id = sessionData.session.user.id;

const preferencesPayload = {
user_id,
role: [
...(role.isPerformer ? ['performer'] : []),
...(role.isHost ? ['host'] : []),
],
facility_type: preferences.facilityType,
locations: preferences.location,
audience_type: preferences.audience,
performer_type: preferences.performerType,
performance_type: preferences.performanceType,
genre: preferences.genre,
additional_info: preferences.additionalInfo,
};
console.log('Preferences payload:', preferencesPayload);

const { data: preferencesData, error: preferencesError } = await supabase
.from('volunteer_preferences')
.upsert([preferencesPayload]);

if (preferencesError) {
console.error('Error upserting preferences data:', preferencesError);
throw new Error(
`Preferences data error (only preferences): ${preferencesError.message}`,
);
}
console.log('Preferences data upserted successfully:', preferencesData);

console.log('Onboarding data submitted successfully:', {
preferencesData,
});
} catch (error) {
console.error('Error during onboarding data submission:', error);
throw error;
}
}
3 changes: 3 additions & 0 deletions app/onboarding/performance/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,20 +113,23 @@ export default function Onboarding() {
multi
onChange={handlePerformanceTypeChange}
options={performanceTypeOptions}
value={new Set(preferences.performanceType)}
/>
<InputDropdown
label="Performance Genre"
placeholder="Select genres"
multi
onChange={handleGenreChange}
options={genreOptions}
value={new Set(preferences.genre)}
/>
<InputDropdown
label="Group Size"
placeholder="Type to filter..."
multi
onChange={handlePerformerTypeChange}
options={performerTypeOptions}
value={new Set(preferences.performerType)}
/>
</Container>

Expand Down
6 changes: 3 additions & 3 deletions app/onboarding/review/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import { SMALL } from '@/styles/text';
import { OnboardingContext } from '@/utils/onboardingContext';
import {
Background,
Button,
Image,
InlineContainer,
Label,
ProgressBarContainer,
Rectangle,
StyledLink,
SubmitButton,
Title,
} from '../styles';
import { BackButton, Line, ReviewContainer, SmallText } from './styles';
Expand Down Expand Up @@ -88,11 +88,11 @@ export default function Review() {
</ReviewContainer>

<StyledLink href="/onboarding/finalize">
<Button onClick={submitData}>
<SubmitButton onClick={submitData}>
<SMALL $fontWeight="400" $color="white">
Everything looks good!
</SMALL>
</Button>
</SubmitButton>
</StyledLink>
</InlineContainer>
</Background>
Expand Down
2 changes: 1 addition & 1 deletion app/onboarding/role-selection/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function Onboarding() {
});
};

const handleContinue = () => {
const handleContinue = async () => {
router.push('/onboarding/basic-information');
};

Expand Down
3 changes: 3 additions & 0 deletions app/onboarding/show-preference/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,20 +99,23 @@ export default function Onboarding() {
multi
onChange={handleFacilityChange}
options={facilityTypeOptions}
value={new Set(preferences.facilityType)}
/>
<InputDropdown
label="Location Preferences"
placeholder="Type to filter"
multi
onChange={handleLocationChange}
options={locationOptions}
value={new Set(preferences.location)}
/>
<InputDropdown
label="Preferred Audience"
placeholder="Type to filter"
multi
onChange={handleAudienceChange}
options={audienceOptions}
value={new Set(preferences.audience)}
/>
</Container>

Expand Down
24 changes: 24 additions & 0 deletions app/onboarding/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,30 @@ export const Button = styled.button<{ disabled?: boolean }>`
bottom: 70px;
width: 30%;
height: 2.75rem;
background-color: ${({ disabled }) =>
disabled ? COLORS.pomegranate10 : COLORS.pomegranate12};
border-color: ${({ disabled }) =>
disabled ? COLORS.pomegranate10 : COLORS.pomegranate12};
border-style: solid;
border-radius: 8px;
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
text-decoration: none;
transition: all 0.3s ease;

@media (max-width: 768px) {
width: 85%;
bottom: 40px;
}
`;

export const SubmitButton = styled.button<{ disabled?: boolean }>`
margin-top: 42px;
width: 100%;
height: 2.75rem;
background-color: ${({ disabled }) =>
disabled ? COLORS.pomegranate10 : COLORS.pomegranate};
border-color: ${({ disabled }) =>
Expand Down
25 changes: 23 additions & 2 deletions components/InputDropdown/InputDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ interface CommonProps {
error?: string;
disabled?: boolean;
required?: boolean;
value: Set<string>;
}

interface MultiSelectProps extends CommonProps {
Expand All @@ -51,8 +52,6 @@ function AnimatedMenu(props: MenuProps<DropdownOption>) {
</AnimatedWrapper>
);
}

// main dropdown component
export default function InputDropdown({
label,
options,
Expand All @@ -62,6 +61,7 @@ export default function InputDropdown({
required,
onChange,
multi,
value,
}: InputDropdownProps) {
const optionsArray = useMemo(
() =>
Expand All @@ -74,6 +74,26 @@ export default function InputDropdown({
[options],
);

const transformedValue = useMemo(() => {
if (multi) {
return Array.from(value).map(v => ({
value: v,
label: options instanceof Map ? options.get(v) || v : v,
}));
} else {
const singleValue = Array.from(value)[0];
return singleValue
? {
value: singleValue,
label:
options instanceof Map
? options.get(singleValue) || singleValue
: singleValue,
}
: null;
}
}, [value, multi, options]);

const handleChange = useCallback(
(newValue: MultiValue<DropdownOption> | SingleValue<DropdownOption>) => {
if (multi && newValue instanceof Array) {
Expand Down Expand Up @@ -111,6 +131,7 @@ export default function InputDropdown({
placeholder={placeholder}
isMulti={multi}
onChange={handleChange}
value={transformedValue} // Pass the transformed value here
/>
{error && <SMALL $color={COLORS.rose10}>{error}</SMALL>}
</DropdownWrapper>
Expand Down
1 change: 1 addition & 0 deletions styles/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const COLORS = {

pomegranate: '#342A2F',
pomegranate10: '#6F585E',
pomegranate12: '#342A2F',
};

export default COLORS;
Loading
Loading