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.

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

Removed organisation vector debug print #453

Prev Previous commit
Next Next commit
dev(frontend): added pronouns and gender field on signup
m4ch374 committed Sep 4, 2023
commit 40434520da09c8ef3fbb2e75b5ebb0756f7147bd
4 changes: 4 additions & 0 deletions frontend/src/api/index.ts
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ import type {
Role,
RoleApplications,
RoleInput,
UserGender,
UserResponse,
} from "../types/api";

@@ -39,11 +40,13 @@ export const doSignup = async ({
degree_name,
zid,
starting_year,
gender,
}: {
name: string;
degree_name: string;
zid: string;
starting_year: number;
gender: UserGender;
}) =>
API.request<{ token: string }>({
method: "POST",
@@ -54,6 +57,7 @@ export const doSignup = async ({
display_name: name,
degree_starting_year: starting_year,
degree_name,
gender,
},
});

17 changes: 17 additions & 0 deletions frontend/src/pages/signup/SignupGenderSelection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import tw from "twin.macro";

import type { ReactNode } from "react";
import type React from "react";

const Select = tw.select`
form-select w-96 rounded-md
border-gray-300 shadow-sm
transition hocus:border-blue-300 focus:(ring ring-blue-200/50)
`;

const Label = tw.label`flex flex-col`;
const LabelText: React.FC<{ children: ReactNode }> = ({ children }) => (
<span tw="text-gray-700">{children}</span>
);

export default Object.assign(Select, { Label, LabelText });
35 changes: 34 additions & 1 deletion frontend/src/pages/signup/index.tsx
Original file line number Diff line number Diff line change
@@ -11,12 +11,28 @@ import Input from "components/Input";
import { doSignup } from "../../api";
import { getStore, setStore } from "../../utils";

import Select from "./SignupGenderSelection";

import type { UserGender } from "types/api";

// I had to do it
/* eslint-disable @typescript-eslint/naming-convention */
type TFormData = {
zid: string;
name: string;
degree_name: string;
starting_year: number;
gender: UserGender;
};
/* eslint-enable @typescript-eslint/naming-convention */

const Signup = () => {
const [formData, setFormData] = useState({
const [formData, setFormData] = useState<TFormData>({
zid: "",
name: getStore("name") || "",
degree_name: "",
starting_year: new Date().getFullYear(),
gender: "Unspecified",
});

const navigate = useNavigate();
@@ -99,6 +115,23 @@ const Signup = () => {
max={new Date().getFullYear() + 10}
/>
</Input.Label>

<Select.Label>
<Select.LabelText>Gender</Select.LabelText>
<Select
defaultValue={formData.gender}
onChange={(e) => {
setFormData({
...formData,
gender: e.target.value as UserGender, // small hack
});
}}
>
<option value="Unspecified">Other / Prefer not to say</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Select>
</Select.Label>
</div>

<Button tw="justify-center font-medium" type="submit">
4 changes: 4 additions & 0 deletions frontend/src/types/api.ts
Original file line number Diff line number Diff line change
@@ -185,6 +185,10 @@ export type OrganisationInfo = {
campaigns: CampaignInfo[];
};

// Based
export type UserGender = "Male" | "Female" | "Unspecified";

// Will add ticket to reflect new response
export type UserResponse = {
email: string;
zid: string;