guild pages implemented

2026-04-24 03:00:09 -04:00 · 2021-04-02 15:20:25 +02:00
parent 8517a26048
commit 05bf6fd9cf
9 changed files with 221 additions and 109 deletions
--- a/hasura/metadata/tables.yaml
+++ b/hasura/metadata/tables.yaml
@@ -135,6 +135,7 @@
      - description
      - discord_id
      - discord_invite_url
+      - github_url
      - guildname
      - id
      - join_button_url
@@ -142,6 +143,7 @@
      - moloch_address
      - name
      - status
+      - twitter_url
      - type
      - website_url
      filter: {}
@@ -151,6 +153,7 @@
      - description
      - discord_id
      - discord_invite_url
+      - github_url
      - guildname
      - id
      - join_button_url
@@ -158,6 +161,7 @@
      - moloch_address
      - name
      - status
+      - twitter_url
      - type
      - website_url
      filter: {}
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -33,6 +33,7 @@ export {
  Container,
  CSSReset,
  Divider,
+  Fade,
  Flex,
  FlexProps,
  Grid,
--- a/packages/web/components/Guild/GuildHero.tsx
+++ b/packages/web/components/Guild/GuildHero.tsx
@@ -3,38 +3,38 @@ import { GuildFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';

 import { ProfileSection } from '../ProfileSection';
-import { GuildLinks } from './GuildLinks';

 type Props = { guild: GuildFragmentFragment };

-export const GuildHero: React.FC<Props> = ({ guild }) => (
-  <ProfileSection>
-    <VStack spacing={8}>
-      {guild.logo ? (
-        <Avatar
-          w={{ base: '32', md: '56' }}
-          h={{ base: '32', md: '56' }}
-          src={guild.logo}
-          name={guild.name}
-        />
-      ) : null}
-      <Box textAlign="center">
-        <Text fontSize="xl" fontFamily="heading" mb="1">
-          {guild.name}
-        </Text>
-        <Text fontFamily="mono" fontSize="md" color="blueLight">
-          {`${guild.type} GUILD`}
-        </Text>
-      </Box>
-      <Box>
-        <Text>{guild.description}</Text>
-      </Box>
-      {guild.join_button_url ? (
-        <MetaButton as="a" href={guild.join_button_url} target="_blank">
-          Join
-        </MetaButton>
-      ) : null}
-      <GuildLinks guild={guild} />
-    </VStack>
-  </ProfileSection>
-);
+export const GuildHero: React.FC<Props> = ({ guild }) => {
+  return (
+    <ProfileSection>
+      <VStack spacing={8}>
+        {guild.logo ? (
+          <Avatar
+            w={{ base: '32', md: '56' }}
+            h={{ base: '32', md: '56' }}
+            src={guild.logo}
+            name={guild.name}
+          />
+        ) : null}
+        <Box textAlign="center">
+          <Text fontSize="xl" fontFamily="heading" mb="1">
+            {guild.name}
+          </Text>
+          <Text fontFamily="mono" fontSize="md" color="blueLight">
+            {`${guild.type} GUILD`}
+          </Text>
+        </Box>
+        <Box>
+          <Text>{guild.description}</Text>
+        </Box>
+        {guild.join_button_url ? (
+          <MetaButton as="a" href={guild.join_button_url} target="_blank">
+            Join
+          </MetaButton>
+        ) : null}
+      </VStack>
+    </ProfileSection>
+  );
+};
--- a/packages/web/components/Guild/GuildLinks.tsx
+++ b/packages/web/components/Guild/GuildLinks.tsx
@@ -1,42 +1,75 @@
-import { Button, Wrap, WrapItem } from '@metafam/ds';
+import { IconButton, Wrap, WrapItem } from '@metafam/ds';
 import { GuildFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
-import { FaDiscord, FaGlobe } from 'react-icons/fa';
+import { FaDiscord, FaGithub, FaGlobe, FaTwitter } from 'react-icons/fa';
+
+import { ProfileSection } from '../ProfileSection';

 type Props = {
  guild: GuildFragmentFragment;
 };

-export const GuildLinks: React.FC<Props> = ({ guild }) => (
-  <Wrap>
-    {guild.website_url ? (
-      <WrapItem>
-        <Button
-          as="a"
-          href={guild.website_url}
-          target="_blank"
-          size="xs"
-          colorScheme="blackAlpha"
-          leftIcon={<FaGlobe />}
-        >
-          Website
-        </Button>
-      </WrapItem>
-    ) : null}
-    {guild.discord_invite_url ? (
-      <WrapItem>
-        <Button
-          as="a"
-          href={guild.discord_invite_url}
-          target="_blank"
-          size="xs"
-          bgColor="discord"
-          _hover={{ bgColor: 'discordDark' }}
-          leftIcon={<FaDiscord />}
-        >
-          Discord
-        </Button>
-      </WrapItem>
-    ) : null}
-  </Wrap>
-);
+export const GuildLinks: React.FC<Props> = ({ guild }) => {
+  return (
+    <ProfileSection title="Links">
+      <Wrap>
+        {guild.website_url ? (
+          <WrapItem>
+            <a href={guild.website_url} target="_blank" rel="noreferrer">
+              <IconButton
+                variant="outline"
+                aria-label="Discord Server"
+                size="lg"
+                colorScheme="blackAlpha"
+                icon={<FaGlobe />}
+              />
+            </a>
+          </WrapItem>
+        ) : null}
+        {guild.discord_invite_url ? (
+          <WrapItem>
+            <a
+              href={guild.discord_invite_url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <IconButton
+                variant="outline"
+                aria-label="Discord Server"
+                size="lg"
+                bgColor="discord"
+                icon={<FaDiscord />}
+              />
+            </a>
+          </WrapItem>
+        ) : null}
+        {guild.github_url ? (
+          <WrapItem>
+            <a href={guild.github_url} target="_blank" rel="noreferrer">
+              <IconButton
+                variant="outline"
+                aria-label="Github"
+                size="lg"
+                colorScheme="github"
+                icon={<FaGithub />}
+              />
+            </a>
+          </WrapItem>
+        ) : null}
+        {guild.twitter_url ? (
+          <WrapItem>
+            <a href={guild.twitter_url} target="_blank" rel="noreferrer">
+              <IconButton
+                variant="outline"
+                aria-label="Twitter"
+                size="lg"
+                colorScheme="twitter"
+                icon={<FaTwitter />}
+              />
+            </a>
+          </WrapItem>
+        ) : null}
+      </Wrap>
+    </ProfileSection>
+  );
+};
--- a/packages/web/components/Guild/GuildTile.tsx
+++ b/packages/web/components/Guild/GuildTile.tsx
@@ -2,7 +2,6 @@ import {
  Avatar,
  Box,
  Heading,
-  HStack,
  MetaButton,
  MetaTag,
  MetaTile,
@@ -11,7 +10,7 @@ import {
  Text,
  VStack,
 } from '@metafam/ds';
-import { GuildLinks } from 'components/Guild/GuildLinks';
+import { MetaLink } from 'components/Link';
 import { GuildFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';

@@ -22,18 +21,27 @@ type Props = {
 export const GuildTile: React.FC<Props> = ({ guild }) => (
  <MetaTile>
    <MetaTileHeader>
-      <VStack>
-        {guild.logo ? (
-          <Avatar size="xl" src={guild.logo} name={guild.name} />
-        ) : null}
+      <MetaLink
+        as={`/guilds/${guild.guildname}`}
+        href="/guilds/[guildname]"
+        key={guild.id}
+      >
+        <VStack>
+          {guild.logo ? (
+            <Avatar size="xl" src={guild.logo} name={guild.name} />
+          ) : null}

-        <Heading size="sm" color="white">
-          {guild.name}
-        </Heading>
-      </VStack>
+          <Heading size="sm" color="white">
+            {guild.name}
+          </Heading>
+        </VStack>
+      </MetaLink>
      {guild.type ? (
        <Box align="center">
-          <MetaTag size="md">{guild.type} GUILD</MetaTag>
+          <MetaTag size="md">
+            {guild.type} 
+            GUILD
+          </MetaTag>
        </Box>
      ) : null}
      {guild.description ? (
@@ -44,12 +52,6 @@ export const GuildTile: React.FC<Props> = ({ guild }) => (
      ) : null}
    </MetaTileHeader>
    <MetaTileBody>
-      <VStack spacing={2} align="stretch">
-        <Text textStyle="caption">LINKS</Text>
-        <HStack mt="2">
-          <GuildLinks guild={guild} />
-        </HStack>
-      </VStack>
      {guild.join_button_url ? (
        <MetaButton
          as="a"
--- a/packages/web/components/GuildList.tsx
+++ b/packages/web/components/GuildList.tsx
@@ -10,8 +10,8 @@ type Props = {
 export const GuildList: React.FC<Props> = ({ guilds }) => (
  <SimpleGrid
    columns={[1, null, 2, 3]}
-    spacing="8"
-    autoRows="minmax(35rem, auto)"
+    spacing="6"
+    autoRows="minmax(25rem, auto)"
  >
    {guilds.map((p) => (
      <GuildTile key={p.id} guild={p} />
--- a/packages/web/graphql/fragments.ts
+++ b/packages/web/graphql/fragments.ts
@@ -74,6 +74,8 @@ export const GuildFragment = gql`
    name
    type
    website_url
+    github_url
+    twitter_url
  }
 `;

--- a/packages/web/pages/guild/[guildname].tsx
+++ b/packages/web/pages/guild/[guildname].tsx
@@ -1,6 +1,8 @@
-import { Box, Flex, LoadingState, Stack } from '@metafam/ds';
+import { Box, Flex, LoadingState } from '@metafam/ds';
+import { QuestFragmentFragment, QuestStatus_Enum } from 'graphql/autogen/types';
 import { getGuild } from 'graphql/getGuild';
 import { getGuilds } from 'graphql/getGuilds';
+import { getQuests } from 'graphql/getQuests';
 import {
  GetStaticPaths,
  GetStaticPropsContext,
@@ -12,19 +14,16 @@ import React from 'react';

 import { PageContainer } from '../../components/Container';
 import { GuildHero } from '../../components/Guild/GuildHero';
+import { GuildLinks } from '../../components/Guild/GuildLinks';
 import { ProfileSection } from '../../components/ProfileSection';

 type Props = InferGetStaticPropsType<typeof getStaticProps>;

-const GuildPage: React.FC<Props> = ({ guild }) => {
+const GuildPage: React.FC<Props> = ({ guild, quests }) => {
  const router = useRouter();

  if (router.isFallback) {
-    return (
-      <PageContainer>
-        <LoadingState />
-      </PageContainer>
-    );
+    return <LoadingState />;
  }

  if (!guild) {
@@ -33,31 +32,64 @@ const GuildPage: React.FC<Props> = ({ guild }) => {

  return (
    <PageContainer>
-      <Stack
-        spacing={6}
+      <Flex
        align="center"
        direction={{ base: 'column', lg: 'row' }}
        alignItems="flex-start"
        maxWidth="7xl"
      >
-        <Flex flex={1} d="column">
+        <Box width={{ base: '100%', lg: '33%' }} mr={{ base: 0, lg: 4 }}>
          <Box mb="6">
            <GuildHero guild={guild} />
          </Box>
          <Box mb="6">
-            <ProfileSection />
+            <ProfileSection title="Skills" />
          </Box>
-        </Flex>
-        <Flex flex={2}>
-          <Flex
-            align="center"
-            direction={{ base: 'column', lg: 'row' }}
-            alignItems="flex-start"
-          >
-            <ProfileSection />
-          </Flex>
-        </Flex>
-      </Stack>
+          <Box mb="6">
+            <GuildLinks guild={guild} />
+          </Box>
+        </Box>
+        <Box width={{ base: '100%', lg: '66%' }} ml={{ base: 0, lg: 4 }}>
+          <Box width="100%">
+            <Flex
+              align="center"
+              direction={{ base: 'column', lg: 'row' }}
+              alignItems="flex-start"
+            >
+              <Box width={{ base: '100%', lg: '50%' }} mr={{ base: 0, lg: 4 }}>
+                <Box mb="6">
+                  <ProfileSection title="Players">
+                    <p>No known players yet.</p>
+                  </ProfileSection>
+                </Box>
+              </Box>
+              <Box width={{ base: '100%', lg: '50%' }} ml={{ base: 0, lg: 4 }}>
+                <Box mb="6">
+                  <ProfileSection title="Announcements">
+                    {guild.twitter_url ? (
+                      <p>All announcements</p>
+                    ) : (
+                      <p>No announcements yet.</p>
+                    )}
+                  </ProfileSection>
+                </Box>
+                <Box mb="6">
+                  <ProfileSection title="Quests">
+                    {quests ? (
+                      <p>Available quests</p>
+                    ) : (
+                      <p>Currently no available quests</p>
+                    )}
+                  </ProfileSection>
+                </Box>
+                <Box mb="6">
+                  <ProfileSection title="Gallery" />
+                </Box>
+              </Box>
+            </Flex>
+          </Box>
+        </Box>
+      </Flex>
    </PageContainer>
  );
 };
@@ -83,9 +115,18 @@ export const getStaticProps = async (
  const guildname = context.params?.guildname;
  const guild = await getGuild(guildname);

+  let quests: QuestFragmentFragment[] = [];
+  if (guild != null) {
+    quests = await getQuests({ 
+      guild_id: guild.id,
+      status: QuestStatus_Enum.Open,
+    });
+  }
+
  return {
    props: {
      guild: guild === undefined ? null : guild,
+      quests,
    },
    revalidate: 1,
  };
--- a/schema.graphql
+++ b/schema.graphql
@@ -599,6 +599,7 @@ type guild {
    """JSON select path"""
    path: String
  ): jsonb
+  github_url: String

  """An array relationship"""
  guild_accounts(
@@ -716,6 +717,7 @@ type guild {
    where: quest_bool_exp
  ): quest_aggregate!
  status: GuildStatus_enum!
+  twitter_url: String

  """The area of focus for the guild (e.g. funding, project, etc)"""
  type: GuildType_enum!
@@ -969,6 +971,7 @@ input guild_bool_exp {
  discord_id: String_comparison_exp
  discord_invite_url: String_comparison_exp
  discord_metadata: jsonb_comparison_exp
+  github_url: String_comparison_exp
  guild_accounts: guild_account_bool_exp
  guild_players: guild_player_bool_exp
  guildname: String_comparison_exp
@@ -979,6 +982,7 @@ input guild_bool_exp {
  name: String_comparison_exp
  quests: quest_bool_exp
  status: GuildStatus_enum_comparison_exp
+  twitter_url: String_comparison_exp
  type: GuildType_enum_comparison_exp
  website_url: String_comparison_exp
 }
@@ -1028,6 +1032,7 @@ input guild_insert_input {
  discord_id: String
  discord_invite_url: String
  discord_metadata: jsonb
+  github_url: String
  guild_accounts: guild_account_arr_rel_insert_input
  guild_players: guild_player_arr_rel_insert_input
  guildname: String
@@ -1038,6 +1043,7 @@ input guild_insert_input {
  name: String
  quests: quest_arr_rel_insert_input
  status: GuildStatus_enum
+  twitter_url: String
  type: GuildType_enum
  website_url: String
 }
@@ -1047,12 +1053,14 @@ type guild_max_fields {
  description: String
  discord_id: String
  discord_invite_url: String
+  github_url: String
  guildname: String
  id: uuid
  join_button_url: String
  logo: String
  moloch_address: String
  name: String
+  twitter_url: String
  website_url: String
 }

@@ -1063,12 +1071,14 @@ input guild_max_order_by {
  description: order_by
  discord_id: order_by
  discord_invite_url: order_by
+  github_url: order_by
  guildname: order_by
  id: order_by
  join_button_url: order_by
  logo: order_by
  moloch_address: order_by
  name: order_by
+  twitter_url: order_by
  website_url: order_by
 }

@@ -1077,12 +1087,14 @@ type guild_min_fields {
  description: String
  discord_id: String
  discord_invite_url: String
+  github_url: String
  guildname: String
  id: uuid
  join_button_url: String
  logo: String
  moloch_address: String
  name: String
+  twitter_url: String
  website_url: String
 }

@@ -1093,12 +1105,14 @@ input guild_min_order_by {
  description: order_by
  discord_id: order_by
  discord_invite_url: order_by
+  github_url: order_by
  guildname: order_by
  id: order_by
  join_button_url: order_by
  logo: order_by
  moloch_address: order_by
  name: order_by
+  twitter_url: order_by
  website_url: order_by
 }

@@ -1139,6 +1153,7 @@ input guild_order_by {
  discord_id: order_by
  discord_invite_url: order_by
  discord_metadata: order_by
+  github_url: order_by
  guild_accounts_aggregate: guild_account_aggregate_order_by
  guild_players_aggregate: guild_player_aggregate_order_by
  guildname: order_by
@@ -1149,6 +1164,7 @@ input guild_order_by {
  name: order_by
  quests_aggregate: quest_aggregate_order_by
  status: order_by
+  twitter_url: order_by
  type: order_by
  website_url: order_by
 }
@@ -1363,6 +1379,9 @@ enum guild_select_column {
  """column name"""
  discord_metadata

+  """column name"""
+  github_url
+
  """column name"""
  guildname

@@ -1384,6 +1403,9 @@ enum guild_select_column {
  """column name"""
  status

+  """column name"""
+  twitter_url
+
  """column name"""
  type

@@ -1399,6 +1421,7 @@ input guild_set_input {
  discord_id: String
  discord_invite_url: String
  discord_metadata: jsonb
+  github_url: String
  guildname: String
  id: uuid
  join_button_url: String
@@ -1406,6 +1429,7 @@ input guild_set_input {
  moloch_address: String
  name: String
  status: GuildStatus_enum
+  twitter_url: String
  type: GuildType_enum
  website_url: String
 }
@@ -1426,6 +1450,9 @@ enum guild_update_column {
  """column name"""
  discord_metadata

+  """column name"""
+  github_url
+
  """column name"""
  guildname

@@ -1447,6 +1474,9 @@ enum guild_update_column {
  """column name"""
  status

+  """column name"""
+  twitter_url
+
  """column name"""
  type

@@ -1516,7 +1546,6 @@ enum GuildStatus_constraint {
 enum GuildStatus_enum {
  ACTIVE
  INACTIVE
-  LEGACY
  PENDING
 }