Skip to content

Commit

Permalink
feat: add membership to dashboard
Browse files Browse the repository at this point in the history
- link to profile on dashboard

#3
  • Loading branch information
eknowles committed Jul 5, 2020
1 parent 29b6e4d commit 18239a2
Show file tree
Hide file tree
Showing 20 changed files with 274 additions and 284 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ module.exports = {
'prettier/react',
],
rules: {
'no-underscore-dangle': 0,
'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
'import/extensions': 0,
'react/prop-types': 0,
Expand Down
1 change: 1 addition & 0 deletions .vercelignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.next
.vercel
5 changes: 4 additions & 1 deletion app/components/community-cards/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ const { Meta } = Card;

const tagsData = ['Recruiting', 'English', 'German', 'French'];

const DEFAULT_COVER_IMG =
'https://images.unsplash.com/photo-1480506132288-68f7705954bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3386&q=80';

export const CommunityCard: React.FC<any> = ({
id,
name,
imageUrl,
imageUrl = DEFAULT_COVER_IMG,
avatarUrl,
language,
}) => (
Expand Down
1 change: 0 additions & 1 deletion app/components/header/header.component.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Alert, Button, Space, Layout, Menu } from 'antd';
import { mistyrose } from 'color-name';
import Link from 'next/link';
import React, { useContext } from 'react';
import { useRouter } from 'next/router';
Expand Down
3 changes: 3 additions & 0 deletions app/components/user-community-list/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import UserCommunityList from './user-community-list.component';

export default UserCommunityList;
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import Link from 'next/link';
import React from 'react';
import { List, Avatar } from 'antd';
import { request } from 'graphql-request';
import useSWR from 'swr';

const useDashboardData = (profileId) => {
const { data, error } = useSWR(profileId, (id) =>
request(
'/api/graphql',
`query ViewProfile($id: ID!) {
profile: findUserProfileByID(id: $id) {
memberships {
data {
role
createdAt
communityProfile {
_id
name
iconUrl
}
}
}
}
}`,
{ id }
)
);
return { data, error };
};

const UserCommunityList = ({ userId }) => {
const { data } = useDashboardData(userId);

const items = data ? (data.profile.memberships?.data as any[]) : [];

// todo set locale to be based on the users localeCode
const formatter = new Intl.DateTimeFormat('en-GB');

return (
<List
header="Community Memberships"
itemLayout="horizontal"
dataSource={items}
loading={!data}
renderItem={({ createdAt, role, communityProfile }) => (
<List.Item
extra={<div>Since {formatter.format(new Date(createdAt))}</div>}
actions={[
<Link
key="view"
href="/communities/[communityId]"
as={`/communities/${communityProfile._id}`}
>
<a>View</a>
</Link>,
]}
>
<List.Item.Meta
avatar={<Avatar size="large" src={communityProfile.iconUrl} />}
title={
<Link
href="/communities/[communityId]"
as={`/communities/${communityProfile._id}`}
>
<a>{communityProfile.name}</a>
</Link>
}
description={role}
/>
</List.Item>
)}
/>
);
};

export default UserCommunityList;
136 changes: 70 additions & 66 deletions assets/antd.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,81 +5,85 @@
@primary-color: #1eaa0d;
@body-background: #06242b;
@component-background: #052027;
//@layout-body-background: #172d36;
@layout-body-background: @component-background;
@layout-body-background: @body-background;
@layout-header-background: @component-background;
@layout-sider-background: @component-background;
@layout-trigger-background: @component-background;
@menu-dark-bg: @layout-header-background;

@border-color-base: #093945; // base border outline a component
@border-color-split: #072c36; // split border inside a component

//@primary-color: #4059ff;
//@page-header-back-color: @text-color-secondary;
//@select-item-selected-bg: @skeleton-color;
//@info-color: #579ed9;
//@warning-color: #d46b07;
//@error-color: #f12222;
//@highlight-color: #494848;
//@icon-color-hover: #fadb14;
//@heading-color: fade(@white, 85%);
@page-header-back-color: @text-color-secondary;
@select-item-selected-bg: @skeleton-color;
@info-color: #579ed9;
@warning-color: #d46b07;
@error-color: #f12222;
@highlight-color: #494848;
@icon-color-hover: #fadb14;
@heading-color: fade(@white, 85%);
//@text-color: #ffffff;
//@text-color-secondary: #3b817f;
//@text-color-inverse: #ffffff;
//@heading-color-dark: #f7f7f7;
//@text-color-dark: #fdfdfd;
//@text-color-secondary-dark: #f1f1f1;
//@text-selection-bg: #fa8c16;
//@border-color-base: #0c5669;
//@border-color-split: #073742;
//@border-style-base: solid;
//@font-feature-settings-base: tnum;
//@disabled-color: fade(@white, 30%);
//@disabled-color-dark: fade(@white, 30%);
//@outline-width: 4px;
//@background-color-light: fade(@white, 4%);
//@background-color-base: fade(@white, 8%);
//@item-active-bg: black;
//@item-hover-bg: fade(@white, 5%);
//@shadow-color: #080808;
//@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),0 -12px 48px 16px rgba(0, 0, 0, 0.09);
//@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15), 0 12px 48px 16px rgba(0, 0, 0, 0.09);
//@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
//@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15), 12px 0 48px 16px rgba(0, 0, 0, 0.09);
//@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 9px 28px 8px rgba(0, 0, 0, 0.15);
@text-selection-bg: #fa8c16;
@border-color-base: #0c5669;
@border-color-split: #073742;
@border-style-base: solid;
@font-feature-settings-base: tnum;
@disabled-color: fade(@white, 30%);
@disabled-color-dark: fade(@white, 30%);
@outline-width: 4px;
@background-color-light: fade(@white, 4%);
@background-color-base: fade(@white, 8%);
@item-active-bg: black;
@item-hover-bg: fade(@white, 5%);
@shadow-color: #080808;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),0 -12px 48px 16px rgba(0, 0, 0, 0.09);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15), 0 12px 48px 16px rgba(0, 0, 0, 0.09);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15), 12px 0 48px 16px rgba(0, 0, 0, 0.09);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 9px 28px 8px rgba(0, 0, 0, 0.15);
//@btn-font-weight: 600;
//@btn-primary-color: #000203;
//@btn-default-bg: transparent;
//@checkbox-check-color: #1b1212;
//@input-placeholder-color: fade(@white, 30%);
//@input-bg: transparent;
//@input-number-handler-active-bg: @popover-background;
//@select-item-selected-font-weight: 600;
//@tooltip-bg: #434343;
//@popover-bg: @popover-background;
//@modal-header-bg: @popover-background;
//@menu-popup-bg: @popover-background;
//@menu-dark-submenu-bg: @black;
//@table-header-bg: #1d1d1d;
//@table-header-sort-bg: #262626;
//@table-body-sort-bg: #1d1a1a;
//@table-row-hover-bg: #262626;
//@table-selected-row-bg: #0f0e0e;
//@table-expanded-row-bg: #131212;
//@table-padding-vertical: 8px;
//@badge-text-color: @white;
//@card-actions-background: fade(@white, 4%);
//@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36), 0 5px 12px 4px rgba(0, 0, 0, 0.27);
//@avatar-bg: #5a5a5a;
//@pagination-item-bg-active: transparent;
//@slider-rail-background-color: fade(@white, 20%);
//@slider-rail-background-color-hover: @slider-rail-background-color;
//@slider-track-background-color: @primary-color;
//@slider-handle-color: @primary-color;
//@skeleton-color: #303030;
//
//@alert-success-border-color: @green-3;
//@alert-success-bg-color: @component-background; // fade(@green-1, 10%);
//@alert-info-border-color: @blue-3;
//@alert-info-bg-color: @component-background; // fade(@blue-1, 10%);
//@alert-warning-border-color: @gold-3;
//@alert-warning-bg-color: @component-background; // fade(@gold-1, 10%);
//@alert-error-border-color: @red-3;
//@alert-error-bg-color: @component-background; // fade(@red-1, 10%);
@btn-primary-color: #000203;
@btn-default-bg: transparent;
@checkbox-check-color: #1b1212;
@input-placeholder-color: fade(@white, 30%);
@input-bg: transparent;
@input-number-handler-active-bg: @popover-background;
@select-item-selected-font-weight: 600;
@tooltip-bg: #434343;
@popover-bg: @popover-background;
@modal-header-bg: @popover-background;
@menu-popup-bg: @popover-background;
@menu-dark-submenu-bg: @black;
@table-header-bg: #1d1d1d;
@table-header-sort-bg: #262626;
@table-body-sort-bg: #1d1a1a;
@table-row-hover-bg: #262626;
@table-selected-row-bg: #0f0e0e;
@table-expanded-row-bg: #131212;
@table-padding-vertical: 8px;
@badge-text-color: @white;
@card-actions-background: fade(@white, 4%);
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36), 0 5px 12px 4px rgba(0, 0, 0, 0.27);
@avatar-bg: #5a5a5a;
@pagination-item-bg-active: transparent;
@slider-rail-background-color: fade(@white, 20%);
@slider-rail-background-color-hover: @slider-rail-background-color;
@slider-track-background-color: @primary-color;
@slider-handle-color: @primary-color;
@skeleton-color: #072a32;
@skeleton-to-color: @component-background;

@alert-success-border-color: @green-3;
@alert-success-bg-color: @component-background; // fade(@green-1, 10%);
@alert-info-border-color: @blue-3;
@alert-info-bg-color: @component-background; // fade(@blue-1, 10%);
@alert-warning-border-color: @gold-3;
@alert-warning-bg-color: @component-background; // fade(@gold-1, 10%);
@alert-error-border-color: @red-3;
@alert-error-bg-color: @component-background; // fade(@red-1, 10%);
2 changes: 2 additions & 0 deletions fauna/functions/create-or-update-community-account-profile.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const {
Var,
Update,
Create,
Now,
Collection,
} = query;

Expand Down Expand Up @@ -125,6 +126,7 @@ module.exports = {
Var('createdCommunityProfile')
),
role: 'OWNER',
createdAt: Now(),
},
}),
},
Expand Down
2 changes: 2 additions & 0 deletions fauna/functions/join-community.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const {
Query,
Lambda,
Let,
Now,
Ref,
Match,
Index,
Expand Down Expand Up @@ -41,6 +42,7 @@ module.exports = {
Get(Var('membership')),
Create(Collection('memberships'), {
data: {
createdAt: Now(),
role: 'ROOKIE',
userProfile: Ref(
Collection('user_profiles'),
Expand Down
13 changes: 13 additions & 0 deletions fauna/roles/public_role.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,20 @@ const { Collection, Index, Function } = query;

module.exports = {
name: 'public_role',
membership: [{ resource: Collection('user_accounts') }],
privileges: [
{
resource: Collection('memberships'),
actions: {
read: true,
},
},
{
resource: Index('user_profile_memberships_by_userProfile'),
actions: {
unrestricted_read: true,
},
},
{
resource: Collection('user_profiles'),
actions: {
Expand Down
2 changes: 0 additions & 2 deletions fauna/roles/user_account_role.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@
const { query } = require('faunadb');
const OnlyUpdateProfileIfOwner = require('../predicates/only-update-profile-if-owner');
const OnlyReadOwnUserAccount = require('../predicates/only-read-own-user-account');
const publicRole = require('./public_role');

const { Collection, Function } = query;

module.exports = {
name: 'user_account_role',
membership: [{ resource: Collection('user_accounts') }],
privileges: [
...publicRole.privileges,
{
resource: Collection('user_profiles'),
actions: {
Expand Down
1 change: 1 addition & 0 deletions fauna/schema.gql
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ type Membership @collection(name: "memberships") {
userProfile: UserProfile! @relation(name: "user_profile_memberships")
communityProfile: CommunityProfile! @relation(name: "community_profile_membership")
role: MembershipRole! # owner, board, director, leader, member, rookie
createdAt: Time!
}

type UserProfile @collection(name: "user_profiles") {
Expand Down
38 changes: 0 additions & 38 deletions pages/beta/join.tsx

This file was deleted.

Loading

0 comments on commit 18239a2

Please sign in to comment.