github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-02 03:00:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

Setup Mutations on web app (#158)

Browse Source 
* create useSetupFlow hook

* Add availability hours and fix permissions in Hasura

* Implement mutation for About You section of profile setup
This commit is contained in:
Hammad Jutt
2020-10-16 00:11:07 -06:00
committed by GitHub
parent 1950a67bac
commit 4e1b434cce
17 changed files with 739 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
hasura/metadata/tables.yaml
View File

@@ -28,6 +28,19 @@
schema: public
name: EnneagramType
is_enum: true
select_permissions:
- role: player
permission:
columns:
- description
- name
filter: {}
- role: public
permission:
columns:
- description
- name
filter: {}
- table:
schema: public
name: Guild
@@ -80,6 +93,13 @@
- table:
schema: public
name: Player
object_relationships:
- name: EnneagramType
using:
foreign_key_constraint_on: enneagram
- name: playerType
using:
foreign_key_constraint_on: playerTypeId
array_relationships:
- name: Accounts
using:
@@ -118,19 +138,22 @@
- role: player
permission:
columns:
- id
- username
- ethereum_address
- totalXp
- role
- timezone
- availability_hours
- enneagram
- scIdentityId
- ethereum_address
- id
- playerTypeId
- rank
- role
- scIdentityId
- timezone
- totalXp
- username
filter: {}
- role: public
permission:
columns:
- availability_hours
- enneagram
- ethereum_address
- id

1
hasura/migrations/1602811082541_alter_table_public_Player_add_column_availability_hours/down.sql Normal file
View File

@@ -0,0 +1 @@
ALTER TABLE "public"."Player" DROP COLUMN "availability_hours";

1
hasura/migrations/1602811082541_alter_table_public_Player_add_column_availability_hours/up.sql Normal file
View File

@@ -0,0 +1 @@
ALTER TABLE "public"."Player" ADD COLUMN "availability_hours" integer NULL;

1
package.json
View File

@@ -7,6 +7,7 @@
},
"private": true,
"scripts": {
"update-schema": "yarn codegen update-schema",
"docker:start": "docker-compose up --build -d",
"docker:stop": "docker-compose down",
"docker:clean": "docker-compose down -v",

552
packages/codegen/schema.graphql
View File

@@ -1280,6 +1280,19 @@ type mutation_root {
where: Player_bool_exp!
): Player_mutation_response
"""
delete data from the table: "PlayerType"
"""
delete_PlayerType(
"""filter the rows which have to be deleted"""
where: PlayerType_bool_exp!
): PlayerType_mutation_response
"""
delete single row from the table: "PlayerType"
"""
delete_PlayerType_by_pk(id: Int!): PlayerType
"""
delete data from the table: "Player_Rank"
"""
@@ -1466,6 +1479,28 @@ type mutation_root {
on_conflict: Player_on_conflict
): Player_mutation_response
"""
insert data into the table: "PlayerType"
"""
insert_PlayerType(
"""the rows to be inserted"""
objects: [PlayerType_insert_input!]!
"""on conflict condition"""
on_conflict: PlayerType_on_conflict
): PlayerType_mutation_response
"""
insert a single row into the table: "PlayerType"
"""
insert_PlayerType_one(
"""the row to be inserted"""
object: PlayerType_insert_input!
"""on conflict condition"""
on_conflict: PlayerType_on_conflict
): PlayerType
"""
insert data into the table: "Player_Rank"
"""
@@ -1691,6 +1726,32 @@ type mutation_root {
where: Player_bool_exp!
): Player_mutation_response
"""
update data of the table: "PlayerType"
"""
update_PlayerType(
"""increments the integer columns with given value of the filtered values"""
_inc: PlayerType_inc_input
"""sets the columns of the filtered rows to the given values"""
_set: PlayerType_set_input
"""filter the rows which have to be updated"""
where: PlayerType_bool_exp!
): PlayerType_mutation_response
"""
update single row of the table: "PlayerType"
"""
update_PlayerType_by_pk(
"""increments the integer columns with given value of the filtered values"""
_inc: PlayerType_inc_input
"""sets the columns of the filtered rows to the given values"""
_set: PlayerType_set_input
pk_columns: PlayerType_pk_columns_input!
): PlayerType
"""
update data of the table: "Player_Rank"
"""
@@ -1873,6 +1934,9 @@ type Player {
where: Account_bool_exp
): Account_aggregate!
"""An object relationship"""
EnneagramType: EnneagramType
"""An array relationship"""
Player_Skills(
"""distinct select on columns"""
@@ -1908,6 +1972,7 @@ type Player {
"""filter the rows returned"""
where: Player_Skill_bool_exp
): Player_Skill_aggregate!
availability_hours: Int
"""Remote relationship field"""
box_profile: BoxProfile
@@ -1918,6 +1983,10 @@ type Player {
enneagram: EnneagramType_enum
ethereum_address: String
id: uuid!
"""An object relationship"""
playerType: PlayerType
playerTypeId: Int
rank: Player_Rank_enum
role: String
scIdentityId: String
@@ -1979,6 +2048,8 @@ input Player_arr_rel_insert_input {
"""aggregate avg on columns"""
type Player_avg_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -1987,6 +2058,8 @@ type Player_avg_fields {
order by avg() on columns of table "Player"
"""
input Player_avg_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
@@ -1996,14 +2069,18 @@ Boolean expression to filter rows from the table "Player". All fields are combin
"""
input Player_bool_exp {
Accounts: Account_bool_exp
EnneagramType: EnneagramType_bool_exp
Player_Skills: Player_Skill_bool_exp
_and: [Player_bool_exp]
_not: Player_bool_exp
_or: [Player_bool_exp]
availability_hours: Int_comparison_exp
created_at: timestamptz_comparison_exp
enneagram: EnneagramType_enum_comparison_exp
ethereum_address: String_comparison_exp
id: uuid_comparison_exp
playerType: PlayerType_bool_exp
playerTypeId: Int_comparison_exp
rank: Player_Rank_enum_comparison_exp
role: String_comparison_exp
scIdentityId: String_comparison_exp
@@ -2034,6 +2111,8 @@ enum Player_constraint {
input type for incrementing integer column in table "Player"
"""
input Player_inc_input {
availability_hours: Int
playerTypeId: Int
timezone: Int
totalXp: numeric
}
@@ -2043,11 +2122,15 @@ input type for inserting data into table "Player"
"""
input Player_insert_input {
Accounts: Account_arr_rel_insert_input
EnneagramType: EnneagramType_obj_rel_insert_input
Player_Skills: Player_Skill_arr_rel_insert_input
availability_hours: Int
created_at: timestamptz
enneagram: EnneagramType_enum
ethereum_address: String
id: uuid
playerType: PlayerType_obj_rel_insert_input
playerTypeId: Int
rank: Player_Rank_enum
role: String
scIdentityId: String
@@ -2059,9 +2142,11 @@ input Player_insert_input {
"""aggregate max on columns"""
type Player_max_fields {
availability_hours: Int
created_at: timestamptz
ethereum_address: String
id: uuid
playerTypeId: Int
role: String
scIdentityId: String
timezone: Int
@@ -2074,9 +2159,11 @@ type Player_max_fields {
order by max() on columns of table "Player"
"""
input Player_max_order_by {
availability_hours: order_by
created_at: order_by
ethereum_address: order_by
id: order_by
playerTypeId: order_by
role: order_by
scIdentityId: order_by
timezone: order_by
@@ -2087,9 +2174,11 @@ input Player_max_order_by {
"""aggregate min on columns"""
type Player_min_fields {
availability_hours: Int
created_at: timestamptz
ethereum_address: String
id: uuid
playerTypeId: Int
role: String
scIdentityId: String
timezone: Int
@@ -2102,9 +2191,11 @@ type Player_min_fields {
order by min() on columns of table "Player"
"""
input Player_min_order_by {
availability_hours: order_by
created_at: order_by
ethereum_address: order_by
id: order_by
playerTypeId: order_by
role: order_by
scIdentityId: order_by
timezone: order_by
@@ -2146,11 +2237,15 @@ ordering options when selecting data from "Player"
"""
input Player_order_by {
Accounts_aggregate: Account_aggregate_order_by
EnneagramType: EnneagramType_order_by
Player_Skills_aggregate: Player_Skill_aggregate_order_by
availability_hours: order_by
created_at: order_by
enneagram: order_by
ethereum_address: order_by
id: order_by
playerType: PlayerType_order_by
playerTypeId: order_by
rank: order_by
role: order_by
scIdentityId: order_by
@@ -2345,6 +2440,9 @@ enum Player_Rank_update_column {
select columns of table "Player"
"""
enum Player_select_column {
"""column name"""
availability_hours
"""column name"""
created_at
@@ -2357,6 +2455,9 @@ enum Player_select_column {
"""column name"""
id
"""column name"""
playerTypeId
"""column name"""
rank
@@ -2383,10 +2484,12 @@ enum Player_select_column {
input type for updating data in table "Player"
"""
input Player_set_input {
availability_hours: Int
created_at: timestamptz
enneagram: EnneagramType_enum
ethereum_address: String
id: uuid
playerTypeId: Int
rank: Player_Rank_enum
role: String
scIdentityId: String
@@ -2580,6 +2683,8 @@ enum Player_Skill_update_column {
"""aggregate stddev on columns"""
type Player_stddev_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2588,12 +2693,16 @@ type Player_stddev_fields {
order by stddev() on columns of table "Player"
"""
input Player_stddev_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""aggregate stddev_pop on columns"""
type Player_stddev_pop_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2602,12 +2711,16 @@ type Player_stddev_pop_fields {
order by stddev_pop() on columns of table "Player"
"""
input Player_stddev_pop_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""aggregate stddev_samp on columns"""
type Player_stddev_samp_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2616,12 +2729,16 @@ type Player_stddev_samp_fields {
order by stddev_samp() on columns of table "Player"
"""
input Player_stddev_samp_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""aggregate sum on columns"""
type Player_sum_fields {
availability_hours: Int
playerTypeId: Int
timezone: Int
totalXp: numeric
}
@@ -2630,6 +2747,8 @@ type Player_sum_fields {
order by sum() on columns of table "Player"
"""
input Player_sum_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
@@ -2638,6 +2757,9 @@ input Player_sum_order_by {
update columns of table "Player"
"""
enum Player_update_column {
"""column name"""
availability_hours
"""column name"""
created_at
@@ -2650,6 +2772,9 @@ enum Player_update_column {
"""column name"""
id
"""column name"""
playerTypeId
"""column name"""
rank
@@ -2674,6 +2799,8 @@ enum Player_update_column {
"""aggregate var_pop on columns"""
type Player_var_pop_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2682,12 +2809,16 @@ type Player_var_pop_fields {
order by var_pop() on columns of table "Player"
"""
input Player_var_pop_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""aggregate var_samp on columns"""
type Player_var_samp_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2696,12 +2827,16 @@ type Player_var_samp_fields {
order by var_samp() on columns of table "Player"
"""
input Player_var_samp_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""aggregate variance on columns"""
type Player_variance_fields {
availability_hours: Float
playerTypeId: Float
timezone: Float
totalXp: Float
}
@@ -2710,10 +2845,334 @@ type Player_variance_fields {
order by variance() on columns of table "Player"
"""
input Player_variance_order_by {
availability_hours: order_by
playerTypeId: order_by
timezone: order_by
totalXp: order_by
}
"""
columns and relationships of "PlayerType"
"""
type PlayerType {
description: String!
id: Int!
imageUrl: String
title: String!
}
"""
aggregated selection of "PlayerType"
"""
type PlayerType_aggregate {
aggregate: PlayerType_aggregate_fields
nodes: [PlayerType!]!
}
"""
aggregate fields of "PlayerType"
"""
type PlayerType_aggregate_fields {
avg: PlayerType_avg_fields
count(columns: [PlayerType_select_column!], distinct: Boolean): Int
max: PlayerType_max_fields
min: PlayerType_min_fields
stddev: PlayerType_stddev_fields
stddev_pop: PlayerType_stddev_pop_fields
stddev_samp: PlayerType_stddev_samp_fields
sum: PlayerType_sum_fields
var_pop: PlayerType_var_pop_fields
var_samp: PlayerType_var_samp_fields
variance: PlayerType_variance_fields
}
"""
order by aggregate values of table "PlayerType"
"""
input PlayerType_aggregate_order_by {
avg: PlayerType_avg_order_by
count: order_by
max: PlayerType_max_order_by
min: PlayerType_min_order_by
stddev: PlayerType_stddev_order_by
stddev_pop: PlayerType_stddev_pop_order_by
stddev_samp: PlayerType_stddev_samp_order_by
sum: PlayerType_sum_order_by
var_pop: PlayerType_var_pop_order_by
var_samp: PlayerType_var_samp_order_by
variance: PlayerType_variance_order_by
}
"""
input type for inserting array relation for remote table "PlayerType"
"""
input PlayerType_arr_rel_insert_input {
data: [PlayerType_insert_input!]!
on_conflict: PlayerType_on_conflict
}
"""aggregate avg on columns"""
type PlayerType_avg_fields {
id: Float
}
"""
order by avg() on columns of table "PlayerType"
"""
input PlayerType_avg_order_by {
id: order_by
}
"""
Boolean expression to filter rows from the table "PlayerType". All fields are combined with a logical 'AND'.
"""
input PlayerType_bool_exp {
_and: [PlayerType_bool_exp]
_not: PlayerType_bool_exp
_or: [PlayerType_bool_exp]
description: String_comparison_exp
id: Int_comparison_exp
imageUrl: String_comparison_exp
title: String_comparison_exp
}
"""
unique or primary key constraints on table "PlayerType"
"""
enum PlayerType_constraint {
"""unique or primary key constraint"""
PlayerType_pkey
"""unique or primary key constraint"""
PlayerType_title_key
}
"""
input type for incrementing integer column in table "PlayerType"
"""
input PlayerType_inc_input {
id: Int
}
"""
input type for inserting data into table "PlayerType"
"""
input PlayerType_insert_input {
description: String
id: Int
imageUrl: String
title: String
}
"""aggregate max on columns"""
type PlayerType_max_fields {
description: String
id: Int
imageUrl: String
title: String
}
"""
order by max() on columns of table "PlayerType"
"""
input PlayerType_max_order_by {
description: order_by
id: order_by
imageUrl: order_by
title: order_by
}
"""aggregate min on columns"""
type PlayerType_min_fields {
description: String
id: Int
imageUrl: String
title: String
}
"""
order by min() on columns of table "PlayerType"
"""
input PlayerType_min_order_by {
description: order_by
id: order_by
imageUrl: order_by
title: order_by
}
"""
response of any mutation on the table "PlayerType"
"""
type PlayerType_mutation_response {
"""number of affected rows by the mutation"""
affected_rows: Int!
"""data of the affected rows by the mutation"""
returning: [PlayerType!]!
}
"""
input type for inserting object relation for remote table "PlayerType"
"""
input PlayerType_obj_rel_insert_input {
data: PlayerType_insert_input!
on_conflict: PlayerType_on_conflict
}
"""
on conflict condition type for table "PlayerType"
"""
input PlayerType_on_conflict {
constraint: PlayerType_constraint!
update_columns: [PlayerType_update_column!]!
where: PlayerType_bool_exp
}
"""
ordering options when selecting data from "PlayerType"
"""
input PlayerType_order_by {
description: order_by
id: order_by
imageUrl: order_by
title: order_by
}
"""
primary key columns input for table: "PlayerType"
"""
input PlayerType_pk_columns_input {
id: Int!
}
"""
select columns of table "PlayerType"
"""
enum PlayerType_select_column {
"""column name"""
description
"""column name"""
id
"""column name"""
imageUrl
"""column name"""
title
}
"""
input type for updating data in table "PlayerType"
"""
input PlayerType_set_input {
description: String
id: Int
imageUrl: String
title: String
}
"""aggregate stddev on columns"""
type PlayerType_stddev_fields {
id: Float
}
"""
order by stddev() on columns of table "PlayerType"
"""
input PlayerType_stddev_order_by {
id: order_by
}
"""aggregate stddev_pop on columns"""
type PlayerType_stddev_pop_fields {
id: Float
}
"""
order by stddev_pop() on columns of table "PlayerType"
"""
input PlayerType_stddev_pop_order_by {
id: order_by
}
"""aggregate stddev_samp on columns"""
type PlayerType_stddev_samp_fields {
id: Float
}
"""
order by stddev_samp() on columns of table "PlayerType"
"""
input PlayerType_stddev_samp_order_by {
id: order_by
}
"""aggregate sum on columns"""
type PlayerType_sum_fields {
id: Int
}
"""
order by sum() on columns of table "PlayerType"
"""
input PlayerType_sum_order_by {
id: order_by
}
"""
update columns of table "PlayerType"
"""
enum PlayerType_update_column {
"""column name"""
description
"""column name"""
id
"""column name"""
imageUrl
"""column name"""
title
}
"""aggregate var_pop on columns"""
type PlayerType_var_pop_fields {
id: Float
}
"""
order by var_pop() on columns of table "PlayerType"
"""
input PlayerType_var_pop_order_by {
id: order_by
}
"""aggregate var_samp on columns"""
type PlayerType_var_samp_fields {
id: Float
}
"""
order by var_samp() on columns of table "PlayerType"
"""
input PlayerType_var_samp_order_by {
id: order_by
}
"""aggregate variance on columns"""
type PlayerType_variance_fields {
id: Float
}
"""
order by variance() on columns of table "PlayerType"
"""
input PlayerType_variance_order_by {
id: order_by
}
type Query {
getBoxProfile(address: String): BoxProfile
getDaoHausMemberships(memberAddress: String): [Member!]!
@@ -2953,6 +3412,49 @@ type query_root {
where: Player_bool_exp
): [Player!]!
"""
fetch data from the table: "PlayerType"
"""
PlayerType(
"""distinct select on columns"""
distinct_on: [PlayerType_select_column!]
"""limit the number of rows returned"""
limit: Int
"""skip the first n rows. Use only with order_by"""
offset: Int
"""sort the rows by one or more columns"""
order_by: [PlayerType_order_by!]
"""filter the rows returned"""
where: PlayerType_bool_exp
): [PlayerType!]!
"""
fetch aggregated fields from the table: "PlayerType"
"""
PlayerType_aggregate(
"""distinct select on columns"""
distinct_on: [PlayerType_select_column!]
"""limit the number of rows returned"""
limit: Int
"""skip the first n rows. Use only with order_by"""
offset: Int
"""sort the rows by one or more columns"""
order_by: [PlayerType_order_by!]
"""filter the rows returned"""
where: PlayerType_bool_exp
): PlayerType_aggregate!
"""fetch data from the table: "PlayerType" using primary key columns"""
PlayerType_by_pk(id: Int!): PlayerType
"""
fetch data from the table: "Player_Rank"
"""
@@ -3470,12 +3972,11 @@ enum SkillCategory_constraint {
}
enum SkillCategory_enum {
BUSINESS
COMMUNITY
CREATIVE
DESIGN
DEV
ENGINEERING
PRODUCT
SCIENCE
STRATEGY
TECHNOLOGIES
}
@@ -3841,6 +4342,49 @@ type subscription_root {
where: Player_bool_exp
): [Player!]!
"""
fetch data from the table: "PlayerType"
"""
PlayerType(
"""distinct select on columns"""
distinct_on: [PlayerType_select_column!]
"""limit the number of rows returned"""
limit: Int
"""skip the first n rows. Use only with order_by"""
offset: Int
"""sort the rows by one or more columns"""
order_by: [PlayerType_order_by!]
"""filter the rows returned"""
where: PlayerType_bool_exp
): [PlayerType!]!
"""
fetch aggregated fields from the table: "PlayerType"
"""
PlayerType_aggregate(
"""distinct select on columns"""
distinct_on: [PlayerType_select_column!]
"""limit the number of rows returned"""
limit: Int
"""skip the first n rows. Use only with order_by"""
offset: Int
"""sort the rows by one or more columns"""
order_by: [PlayerType_order_by!]
"""filter the rows returned"""
where: PlayerType_bool_exp
): PlayerType_aggregate!
"""fetch data from the table: "PlayerType" using primary key columns"""
PlayerType_by_pk(id: Int!): PlayerType
"""
fetch data from the table: "Player_Rank"
"""

6
packages/web/components/Setup/SetupAvailability.tsx
View File

@@ -8,8 +8,8 @@ import {
Text,
} from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext, useEffect, useState } from 'react';
import { useSetupFlow } from 'contexts/SetupContext';
import React, { useEffect, useState } from 'react';
export const SetupAvailability: React.FC = () => {
const {
@@ -17,7 +17,7 @@ export const SetupAvailability: React.FC = () => {
nextButtonLabel,
availability,
setAvailability,
} = useContext(SetupContext);
} = useSetupFlow();
const [invalid, setInvalid] = useState(false);
useEffect(() => {
const value = Number(availability);

11
packages/web/components/Setup/SetupHeader.tsx
View File

@@ -3,13 +3,11 @@ import AvatarImage from 'assets/avatar.png';
import BackImage from 'assets/Back.svg';
import SkipImage from 'assets/Skip.svg';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext } from 'react';
import { useSetupFlow } from 'contexts/SetupContext';
import React from 'react';
export const SetupHeader: React.FC = () => {
const { step, screen, onNextPress, onBackPress, options } = useContext(
SetupContext,
);
const { step, screen, onNextPress, onBackPress, options } = useSetupFlow();
return (
<Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
<FlexContainer justify="flex-end" onClick={onBackPress} cursor="pointer">
@@ -47,7 +45,8 @@ export const StepProgress: React.FC<StepProps> = ({
step,
screen,
}) => {
const { options } = useContext(SetupContext);
const { options } = useSetupFlow();
const progress = isDone
? 100
: Math.floor(((screen + 1) * 100.0) / options[step].screens.length);

6
packages/web/components/Setup/SetupMemberships.tsx
View File

@@ -1,8 +1,8 @@
import { MetaButton, MetaHeading, MetaTag, Text, Wrap } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import { useSetupFlow } from 'contexts/SetupContext';
import { getMemberships } from 'graphql/getMemberships';
import React, { useContext, useEffect } from 'react';
import React, { useEffect } from 'react';
import { useWeb3 } from '../../lib/hooks';
@@ -13,7 +13,7 @@ export const SetupMemberships: React.FC = () => {
nextButtonLabel,
memberships,
setMemberships,
} = useContext(SetupContext);
} = useSetupFlow();
useEffect(() => {
getMemberships(address).then((data) => {
setMemberships(data);

15
packages/web/components/Setup/SetupPersonalityType.tsx
View File

@@ -8,9 +8,9 @@ import {
} from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { MetaLink } from 'components/Link';
import { SetupContext } from 'contexts/SetupContext';
import { useSetupFlow } from 'contexts/SetupContext';
import { PersonalityType } from 'graphql/types';
import React, { useContext } from 'react';
import React from 'react';
export const SetupPersonalityType: React.FC = () => {
const {
@@ -19,7 +19,7 @@ export const SetupPersonalityType: React.FC = () => {
personalityTypes,
personalityType,
setPersonalityType,
} = useContext(SetupContext);
} = useSetupFlow();
return (
<FlexContainer>
<MetaHeading mb={5} textAlign="center">
@@ -47,10 +47,11 @@ export const SetupPersonalityType: React.FC = () => {
transition="background 0.25s"
cursor="pointer"
onClick={() => setPersonalityType(p)}
border={
border="2px"
borderColor={
personalityType && personalityType.id === p.id
? '2px solid #5a32e6'
: 'none'
? 'purple.400'
: 'transparent'
}
>
<Image
@@ -69,7 +70,7 @@ export const SetupPersonalityType: React.FC = () => {
))}
</SimpleGrid>
<MetaButton onClick={onNextPress} mt={10}>
<MetaButton onClick={onNextPress} mt={10} isDisabled={!personalityType}>
{nextButtonLabel}
</MetaButton>
</FlexContainer>

72
packages/web/components/Setup/SetupPlayerType.tsx
View File

@@ -1,8 +1,16 @@
import { MetaButton, MetaHeading, SimpleGrid, Text } from '@metafam/ds';
import {
MetaButton,
MetaHeading,
SimpleGrid,
Text,
useToast,
} from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import { PlayerType } from 'graphql/types';
import React, { useContext } from 'react';
import { useSetupFlow } from 'contexts/SetupContext';
import React from 'react';
import { useUpdateAboutYouMutation } from '../../graphql/autogen/types';
import { useUser } from '../../lib/hooks';
export const SetupPlayerType: React.FC = () => {
const {
@@ -11,7 +19,38 @@ export const SetupPlayerType: React.FC = () => {
playerTypes,
playerType,
setPlayerType,
} = useContext(SetupContext);
personalityType,
} = useSetupFlow();
const { user } = useUser({ redirectTo: '/' });
const toast = useToast();
const [updateAboutYouRes, updateAboutYou] = useUpdateAboutYouMutation();
const handleNextPress = async () => {
if (!user) return;
const { error } = await updateAboutYou({
playerId: user.id,
input: {
enneagram: personalityType?.name,
playerTypeId: playerType?.id,
},
});
if (error) {
console.warn(error);
toast({
title: 'Error',
description: 'Unable to update Player Account. The octo is sad 😢',
status: 'error',
isClosable: true,
});
return;
}
onNextPress();
};
return (
<FlexContainer>
<MetaHeading mb={5} textAlign="center">
@@ -21,11 +60,11 @@ export const SetupPlayerType: React.FC = () => {
Please read the features of each player type below. And select the one
that suits you best.
</Text>
<SimpleGrid columns={[1, null, 2, 3]} spacing="8">
{playerTypes.map((p: PlayerType) => (
<SimpleGrid columns={[1, null, 3, 3]} spacing={4}>
{playerTypes.map((p) => (
<FlexContainer
key={p.id}
p={6}
p={[4, null, 6]}
bgColor={
playerType && playerType.id === p.id
? 'purpleBoxDark'
@@ -37,21 +76,28 @@ export const SetupPlayerType: React.FC = () => {
cursor="pointer"
onClick={() => setPlayerType(p)}
align="stretch"
border={
border="2px"
borderColor={
playerType && playerType.id === p.id
? '2px solid #5a32e6'
: 'none'
? 'purple.400'
: 'transparent'
}
>
<Text color="white" fontWeight="bold" mb={4}>
{p.name}
{p.title}
</Text>
<Text color="blueLight">{p.description}</Text>
</FlexContainer>
))}
</SimpleGrid>
<MetaButton onClick={onNextPress} mt={10}>
<MetaButton
onClick={handleNextPress}
mt={10}
isDisabled={!playerType}
isLoading={updateAboutYouRes.fetching}
loadingText="Saving"
>
{nextButtonLabel}
</MetaButton>
</FlexContainer>

6
packages/web/components/Setup/SetupProfile.tsx
View File

@@ -1,11 +1,11 @@
import BackgroundImage from 'assets/profile-background.jpg';
import { FlexContainer, PageContainer } from 'components/Container';
import { SetupHeader } from 'components/Setup/SetupHeader';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext } from 'react';
import { useSetupFlow } from 'contexts/SetupContext';
import React from 'react';
export const SetupProfile: React.FC = () => {
const { step, screen, numTotalSteps, options } = useContext(SetupContext);
const { step, screen, numTotalSteps, options } = useSetupFlow();
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
{(step + 1) % numTotalSteps !== 0 && <SetupHeader />}

6
packages/web/components/Setup/SetupSkills.tsx
View File

@@ -1,7 +1,7 @@
import { MetaButton, MetaHeading, SelectSearch } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext } from 'react';
import { useSetupFlow } from 'contexts/SetupContext';
import React from 'react';
import { SkillOption } from 'utils/skillHelpers';
export const SetupSkills: React.FC = () => {
@@ -11,7 +11,7 @@ export const SetupSkills: React.FC = () => {
setSkills,
onNextPress,
nextButtonLabel,
} = useContext(SetupContext);
} = useSetupFlow();
return (
<FlexContainer>

7
packages/web/contexts/SetupContext.tsx
View File

@@ -1,5 +1,6 @@
import { Membership, PersonalityType, PlayerType } from 'graphql/types';
import React, { useCallback, useEffect, useState } from 'react';
import { PlayerType } from 'graphql/autogen/types';
import { Membership, PersonalityType } from 'graphql/types';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { CategoryOption, SkillOption } from 'utils/skillHelpers';
type SetupOption = {
@@ -161,3 +162,5 @@ export const SetupContextProvider: React.FC<Props> = ({
</SetupContext.Provider>
);
};
export const useSetupFlow = (): SetupContextType => useContext(SetupContext);

29
packages/web/graphql/getPersonalityTypes.ts
View File

@@ -9,58 +9,69 @@ import PeacemakerImage from 'assets/peacemaker.png';
import ReformerImage from 'assets/reformer.png';
import { PersonalityType } from 'graphql/types';
import { EnneagramType_Enum } from './autogen/types';
const personalityTypes: Array<PersonalityType> = [
{
id: '1',
name: 'The Reformer',
name: EnneagramType_Enum.Reformer,
label: 'The Reformer',
description: 'Principled, Purposeful, Self-Controlled, and Perfectionistic',
image: ReformerImage,
},
{
id: '2',
name: 'The Helper',
name: EnneagramType_Enum.Helper,
label: 'The Helper',
description: 'Demonstrative, Generous, People-Pleasing, and Possessive',
image: HelperImage,
},
{
id: '3',
name: 'The Achiever',
name: EnneagramType_Enum.Achiever,
label: 'The Achiever',
description: 'Adaptive, Excelling, Driven, and Image-Conscious',
image: AchieverImage,
},
{
id: '4',
name: 'The Individualist',
name: EnneagramType_Enum.Individualist,
label: 'The Individualist',
description: 'Expressive, Dramatic, Self-Absorbed, and Temperamental',
image: IndividualistImage,
},
{
id: '5',
name: 'The Investigator',
name: EnneagramType_Enum.Investigator,
label: 'The Investigator',
description: 'Perceptive, Innovative, Secretive, and Isolated',
image: InvestigatorImage,
},
{
id: '6',
name: 'The Loyalist',
name: EnneagramType_Enum.Loyalist,
label: 'The Loyalist',
description: 'Engaging, Responsible, Anxious, and Suspicious',
image: LoyalistImage,
},
{
id: '7',
name: 'The Enthusiast',
name: EnneagramType_Enum.Enthusiast,
label: 'The Enthusiast',
description: 'Spontaneous, Versatile, Distractible, and Scattered',
image: EnthusiastImage,
},
{
id: '8',
name: 'The Challenger',
name: EnneagramType_Enum.Challenger,
label: 'The Challenger',
description: 'Self-Confident, Decisive, Willful, and Confrontational',
image: ChallengerImage,
},
{
id: '9',
name: 'The Peacemaker',
name: EnneagramType_Enum.Peacemaker,
label: 'The Peacemaker',
description: 'Receptive, Reassuring, Agreeable, and Complacent',
image: PeacemakerImage,
},

52
packages/web/graphql/getPlayerTypes.ts
View File

@@ -1,25 +1,31 @@
import { PlayerType } from 'graphql/types';
import gql from 'fake-tag';
const playerTypes: Array<PlayerType> = [
{
id: '1',
name: 'Pioneer',
description:
'Pioneers are the ones out on the frontier, venturing into the unknown with no fear of failure. Working with incomplete tools & buggy software, they start weird new projects & experiments. They thrive in chaos.',
},
{
id: '2',
name: 'Settler',
description:
'Settlers live between chaos & order. They take the things that the pioneers build, build upon them & find them a market fit. They take care of things and help them grow until they are proven to work & taken over by Town Planners.',
},
{
id: '3',
name: 'Town Planner',
description:
'Polar opposite to the Pioneers, Town Planners are the last to arrive at the party. They are the ones concerned with the structure & making things efficient. They want documentation & they thrive in order.',
},
];
import { GetPlayerTypesQuery } from './autogen/types';
import { client } from './client';
// TODO: fetch data from backend instead
export const getPlayerTypes = () => playerTypes;
export const GetPlayerTypes = gql`
query GetPlayerTypes {
PlayerType {
description
id
title
imageUrl
}
}
`;
export const getPlayerTypes = async () => {
const { data, error } = await client
.query<GetPlayerTypesQuery>(GetPlayerTypes)
.toPromise();
if (!data) {
if (error) {
throw error;
}
return [];
}
return data.PlayerType;
};

17
packages/web/graphql/mutations/updateAboutYou.ts Normal file
View File

@@ -0,0 +1,17 @@
import gql from 'fake-tag';
export const UpdateAboutYouMutation = gql`
mutation UpdateAboutYou($playerId: uuid!, $input: Player_set_input!) {
update_Player_by_pk(pk_columns: { id: $playerId }, _set: $input) {
enneagram
availability_hours
playerType {
description
id
imageUrl
title
}
id
}
}
`;

11
packages/web/graphql/types.ts
View File

@@ -1,4 +1,4 @@
import { Member, Moloch } from 'graphql/autogen/types';
import { EnneagramType_Enum, Member, Moloch } from 'graphql/autogen/types';
export type Skill = {
id: string;
@@ -8,17 +8,12 @@ export type Skill = {
export type PersonalityType = {
id: string;
name: string;
name: EnneagramType_Enum;
label: string;
description: string;
image: string;
};
export type PlayerType = {
id: string;
name: string;
description: string;
};
export type Membership = Pick<Member, 'id'> & {
moloch: Pick<Moloch, 'id' | 'title' | 'version'>;
};