join community (#14)

* fix(api): icons on new communities were not valid urls * feat(db): add index for fetching a specific membership * chore: fix husky issue where `git add` should not be in config * refactor: tidy dashboard, communities page and header component user menu now uses Menu component from ant * chore(home): add test illustration * feat(community): add join feature closes #5 * feat(api): add graphql and refactor oauth routes closes #15 * fix: user profile locale property
eknowles · Jul 4, 2020 · 29b6e4d · 29b6e4d
1 parent 411dec9
commit 29b6e4d
Show file tree

Hide file tree

Showing 40 changed files with 1,079 additions and 303 deletions.
diff --git a/app/components/community-cards/index.tsx b/app/components/community-cards/index.tsx
@@ -19,7 +19,6 @@ export const CommunityCard: React.FC<any> = ({
   <Link href="/communities/[communityId]" as={`/communities/${id}`}>
     <Card
       hoverable
-      style={{ width: 300 }}
       cover={
         imageUrl && (
           <img className="card-image" alt="Community" src={imageUrl} />

diff --git a/app/components/header/header.component.tsx b/app/components/header/header.component.tsx
@@ -1,4 +1,5 @@
 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';
@@ -23,7 +24,7 @@ const HeaderComponent: React.FC<{
   );
 
   return (
-    <div>
+    <div style={{ marginBottom: '24px' }}>
       {isBeta && <Alert type="info" message={bannerMessage} banner />}
       <Header>
         <div
@@ -40,19 +41,30 @@ const HeaderComponent: React.FC<{
                 </a>
               </Link>
             </div>
-            <Menu theme="light" mode="horizontal" defaultSelectedKeys={['0']}>
-              {/* <Menu.Item key="1">Communities</Menu.Item> */}
+            <Menu theme="dark" mode="horizontal" selectedKeys={[]}>
+              <Menu.Item
+                key="communities"
+                onClick={() => router.push('/communities')}
+              >
+                Communities
+              </Menu.Item>
+              <Menu.Item key="events" disabled>
+                Events
+              </Menu.Item>
+              <Menu.Item key="games" disabled>
+                Games
+              </Menu.Item>
+              <Menu.Item key="news" disabled>
+                News
+              </Menu.Item>
             </Menu>
           </Space>
 
           <div className="auth">
-            {fetched && user.userProfileId ? <UserMenu /> : LoginButton}
+            {fetched && user._id ? <UserMenu /> : LoginButton}
           </div>
         </div>
       </Header>
-      <div className="wrapper">
-        <div className="header" />
-      </div>
     </div>
   );
 };

diff --git a/app/components/subscription-plan-column/index.ts b/app/components/subscription-plan-column/index.ts
@@ -0,0 +1,3 @@
+import SubscriptionPlanColumn from './subscription-plan-column.component';
+
+export default SubscriptionPlanColumn;
diff --git a/app/components/subscription-plan-column/subscription-plan-column.component.tsx b/app/components/subscription-plan-column/subscription-plan-column.component.tsx
@@ -0,0 +1,112 @@
+import { Button, Card, List, Space, Typography, message } from 'antd';
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+
+const { Title, Text } = Typography;
+
+const SubscriptionPlanColumn = ({
+  name,
+  currency = '£',
+  integer,
+  fraction,
+  description,
+  header,
+  benefits,
+  ctaText = 'Join Now',
+  special = false,
+}) => {
+  const router = useRouter();
+  const [isJoining, setJoining] = useState(false);
+  const { communityId } = router.query;
+
+  const onJoin = async () => {
+    setJoining(true);
+    try {
+      const res = await fetch(`/api/communities/${communityId}/join`, {
+        method: 'POST',
+      });
+      const { membershipId } = await res.json();
+      message.success('Success! You have joined a community');
+      await router.push(
+        `/communities/${communityId}?new_member=${membershipId}`
+      );
+    } catch (e) {
+      //
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  return (
+    <Card bodyStyle={{ outline: special ? '1px solid gold' : '' }}>
+      <Space direction="vertical" size="large">
+        <Title level={4}>{name}</Title>
+        <div
+          style={{
+            fontSize: '64px',
+            fontWeight: 600,
+            lineHeight: 1,
+          }}
+        >
+          <span
+            style={{
+              fontSize: '30%',
+              transform: 'translateY(-1.7em)',
+              display: 'inline-block',
+              fontWeight: 300,
+            }}
+          >
+            {currency}
+          </span>
+          <span style={{ color: 'white' }}>{integer}</span>
+          <span
+            style={{
+              fontSize: '30%',
+              fontWeight: 300,
+              transform: 'translateY(-1.7em)',
+              display: 'inline-block',
+            }}
+          >
+            {fraction}
+          </span>
+          <span
+            style={{
+              fontSize: '20%',
+              fontWeight: 400,
+              transform: 'translateX(-2em)',
+              display: 'inline-block',
+            }}
+          >
+            /month
+          </span>
+        </div>
+        <Text>{description}</Text>
+        <Button
+          loading={isJoining}
+          onClick={onJoin}
+          block
+          type={special ? 'primary' : 'default'}
+          size="large"
+        >
+          {ctaText}
+        </Button>
+        <List
+          header={
+            <Text strong style={{ color: 'white' }}>
+              {header}:
+            </Text>
+          }
+        >
+          {benefits.map((benefit, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <List.Item key={index}>
+              <Text>{benefit}</Text>
+            </List.Item>
+          ))}
+        </List>
+      </Space>
+    </Card>
+  );
+};
+
+export default SubscriptionPlanColumn;
diff --git a/app/components/svg/features.component.tsx b/app/components/svg/features.component.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+
+const FeatureSvg = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 643.451 542.339"
+      width="100%"
+      height="100%"
+    >
+      <ellipse cx="567" cy="537" fill="#06181c" rx="70" ry="5.339" />
+      <ellipse cx="226" cy="537" fill="#06181c" rx="70" ry="5.339" />
+      <path
+        fill="#0f3f49"
+        d="M536.5 472h-476a7.508 7.508 0 01-7.5-7.5V7.5A7.508 7.508 0 0160.5 0h476a7.508 7.508 0 017.5 7.5v457a7.508 7.508 0 01-7.5 7.5zM60.5 3A4.505 4.505 0 0056 7.5v457a4.505 4.505 0 004.5 4.5h476a4.505 4.505 0 004.5-4.5V7.5a4.505 4.505 0 00-4.5-4.5z"
+      />
+      <path
+        fill="#0f3f49"
+        d="M88 40a3.003 3.003 0 00-3 3v124a3.003 3.003 0 003 3h124a3.003 3.003 0 003-3V43a3.003 3.003 0 00-3-3z"
+      />
+      <path
+        fill="#0f3f49"
+        d="M283.04 129.75a3.625 3.625 0 000 7.25h170.878a3.625 3.625 0 10.119-7.25h-.12zM283.04 96.75a3.625 3.625 0 000 7.25h48.878a3.625 3.625 0 10.119-7.25h-.12zM283.04 163.75a3.625 3.625 0 000 7.25h170.878a3.625 3.625 0 00.119-7.25h-.12z"
+        data-name="Path 40"
+      />
+      <path
+        fill="#0f3f49"
+        d="M486.309 294.712H251.47c-4.578 0-8.288-2.643-8.293-5.9V237.77c.005-3.257 3.715-5.9 8.293-5.9h234.838c4.578 0 8.288 2.643 8.293 5.9v51.041c-.004 3.257-3.715 5.897-8.293 5.901zM327.309 418.712H92.47c-4.578 0-8.288-2.643-8.293-5.9V361.77c.005-3.257 3.715-5.9 8.293-5.9h234.838c4.578 0 8.288 2.643 8.293 5.9v51.041c-.004 3.257-3.715 5.897-8.293 5.901z"
+        data-name="Path 78"
+      />
+      <path
+        fill="#1f6472"
+        d="M256.466 446.83H21.628c-4.578 0-8.288-2.643-8.293-5.9v-51.042c.005-3.257 3.715-5.9 8.293-5.9h234.838c4.578 0 8.288 2.643 8.293 5.9v51.041c-.004 3.257-3.715 5.897-8.293 5.901zM21.628 386.346c-2.747 0-4.973 1.586-4.976 3.54v51.041c0 1.954 2.23 3.538 4.976 3.54h234.838c2.747 0 4.973-1.586 4.976-3.54v-51.039c0-1.954-2.229-3.538-4.976-3.54z"
+        data-name="Path 78"
+      />
+      <circle cx="341" cy="288" r="19" fill="#1eaa0d" />
+      <circle cx="56" cy="415" r="19" fill="#1eaa0d" />
+      <path
+        fill="#1f6472"
+        d="M382.04 274.375a3.625 3.625 0 000 7.25h135.878a3.625 3.625 0 00.119-7.25h-.12zM382.04 294.375a3.625 3.625 0 000 7.25h135.878a3.625 3.625 0 00.119-7.25h-.12zM97.04 401.375a3.625 3.625 0 000 7.25h135.878a3.625 3.625 0 00.119-7.25h-.12zM97.04 421.375a3.625 3.625 0 000 7.25h135.878a3.625 3.625 0 00.119-7.25h-.12z"
+        data-name="Path 40"
+      />
+      <circle cx="568.973" cy="475.931" r="43.067" fill="#2f2e41" />
+      <path
+        fill="#2f2e41"
+        d="M575.515 509.73h13.084v23.442h-13.084zM549.347 509.73h13.084v23.442h-13.084z"
+      />
+      <ellipse
+        cx="577.696"
+        cy="533.445"
+        fill="#2f2e41"
+        rx="10.903"
+        ry="4.089"
+      />
+      <ellipse
+        cx="551.528"
+        cy="532.899"
+        fill="#2f2e41"
+        rx="10.903"
+        ry="4.089"
+      />
+      <circle cx="567.883" cy="465.027" r="14.719" fill="#fff" />
+      <circle cx="567.883" cy="465.027" r="4.906" fill="#1f6472" />
+      <path
+        fill="#1eaa0d"
+        d="M610.75 435.88c3.477-15.575-7.639-31.311-24.829-35.15s-33.944 5.676-37.422 21.25 7.915 21.317 25.105 25.155 33.668 4.318 37.146-11.256z"
+      />
+      <path
+        fill="#2f2e41"
+        d="M110.31 189.96a42.83 42.83 0 01-4.43 19.04c-.33.68-.68 1.34-1.05 2H29.66c-.37-.66-.72-1.32-1.05-2a43.071 43.071 0 1181.7-19.04z"
+      />
+      <circle cx="68.336" cy="179.052" r="14.719" fill="#fff" />
+      <circle cx="68.336" cy="179.052" r="4.906" fill="#1f6472" />
+      <path
+        fill="#1eaa0d"
+        d="M25.47 149.904c-3.478-15.574 7.638-31.31 24.828-35.149s33.944 5.675 37.421 21.25-7.914 21.317-25.104 25.155-33.668 4.318-37.146-11.256z"
+      />
+      <path
+        fill="#1f6472"
+        d="M129 77H5a5.002 5.002 0 00-5 5v124a5.002 5.002 0 005 5h124a5.002 5.002 0 005-5V82a5.002 5.002 0 00-5-5zm3 129a3.009 3.009 0 01-3 3H5a3.009 3.009 0 01-3-3V82a3.009 3.009 0 013-3h124a3.009 3.009 0 013 3z"
+      />
+      <ellipse
+        cx="537.065"
+        cy="622.239"
+        fill="#2f2e41"
+        rx="21.534"
+        ry="6.76"
+        transform="rotate(-69.082 268.028 734.96)"
+      />
+      <circle
+        cx="497.258"
+        cy="654.761"
+        r="43.067"
+        fill="#2f2e41"
+        transform="rotate(-80.783 253.026 728.882)"
+      />
+      <path
+        fill="#2f2e41"
+        d="M199.358 509.73h13.084v23.442h-13.084zM225.526 509.73h13.084v23.442h-13.084z"
+      />
+      <ellipse
+        cx="210.261"
+        cy="533.445"
+        fill="#2f2e41"
+        rx="10.903"
+        ry="4.089"
+      />
+      <ellipse
+        cx="236.429"
+        cy="532.899"
+        fill="#2f2e41"
+        rx="10.903"
+        ry="4.089"
+      />
+      <path
+        fill="#1eaa0d"
+        d="M177.207 435.88c-3.477-15.575 7.639-31.311 24.829-35.15s33.944 5.675 37.421 21.25-7.915 21.317-25.105 25.155-33.667 4.318-37.145-11.256z"
+      />
+      <ellipse
+        cx="448.75"
+        cy="634.778"
+        fill="#2f2e41"
+        rx="6.76"
+        ry="21.534"
+        transform="rotate(-64.626 168.242 765.346)"
+      />
+      <circle cx="581.968" cy="344.643" r="42.012" fill="#2f2e41" />
+      <path
+        fill="#2f2e41"
+        d="M588.502 377.584l12.763-.06.107 22.868-12.763.059zM562.976 377.703l12.763-.06.107 22.868-12.763.059z"
+      />
+      <ellipse
+        cx="845.091"
+        cy="581.776"
+        fill="#2f2e41"
+        rx="10.636"
+        ry="3.989"
+        transform="rotate(-30.266 375.327 1006.842)"
+      />
+      <ellipse
+        cx="870.086"
+        cy="581.66"
+        fill="#2f2e41"
+        rx="10.636"
+        ry="3.989"
+        transform="rotate(-30.266 400.322 1006.726)"
+      />
+      <circle cx="580.855" cy="334.012" r="14.359" fill="#fff" />
+      <circle cx="575.937" cy="327.919" r="4.786" fill="#1f6472" />
+      <path
+        fill="#1eaa0d"
+        d="M622.54 305.383c3.321-15.208-7.594-30.508-24.38-34.175s-33.087 5.69-36.408 20.898 7.817 20.76 24.603 24.426 32.863 4.06 36.184-11.149z"
+      />
+      <ellipse
+        cx="816.367"
+        cy="502.203"
+        fill="#2f2e41"
+        rx="6.594"
+        ry="21.006"
+        transform="rotate(-67.095 542.382 622.622)"
+      />
+      <ellipse
+        cx="902.204"
+        cy="537.022"
+        fill="#2f2e41"
+        rx="6.594"
+        ry="21.006"
+        transform="rotate(-67.095 628.218 657.441)"
+      />
+      <path
+        fill="#fff"
+        d="M590.458 362.95a9.572 9.572 0 11-19.144.108v-.019c-.025-5.286 4.256-6.401 9.542-6.426s9.578 1.05 9.602 6.337z"
+      />
+      <path
+        fill="#1f6472"
+        d="M547.403 319.665H312.565c-4.578 0-8.288-2.643-8.293-5.9v-51.042c.005-3.257 3.715-5.9 8.293-5.9h234.838c4.578 0 8.288 2.643 8.293 5.9v51.041c-.004 3.257-3.715 5.897-8.293 5.901zm-234.838-60.484c-2.747 0-4.973 1.586-4.976 3.54v51.041c0 1.954 2.23 3.538 4.976 3.54h234.838c2.747 0 4.973-1.586 4.976-3.54v-51.039c0-1.954-2.229-3.538-4.976-3.54z"
+        data-name="Path 78"
+      />
+    </svg>
+  );
+};
+
+export default FeatureSvg;
diff --git a/app/components/user-menu/user-menu.component.tsx b/app/components/user-menu/user-menu.component.tsx
@@ -1,23 +1,23 @@
-import { Avatar, Typography, Space } from 'antd';
-import Link from 'next/link';
+import { Avatar, Space, Menu } from 'antd';
+import { useRouter } from 'next/router';
 import React, { useContext } from 'react';
 import { UserContext } from 'app/contexts/user.context';
 
 const UserMenu: React.FC = () => {
+  const router = useRouter();
   const {
-    user: { userProfile },
+    user: { username, avatarUrl },
   } = useContext(UserContext);
-  const { username, avatarUrl } = userProfile;
 
   return (
-    <Link href="/dashboard">
-      <a>
+    <Menu theme="dark" mode="horizontal" selectedKeys={[]}>
+      <Menu.Item key="dashboard" onClick={() => router.push('/dashboard')}>
         <Space>
-          <Typography.Text>{username}</Typography.Text>
+          {username}
           <Avatar src={avatarUrl}>{username[0]}</Avatar>
         </Space>
-      </a>
-    </Link>
+      </Menu.Item>
+    </Menu>
   );
 };