feat(homepage): homepage changed

unit-LAEDS · Aug 18, 2022 · 0c5e941 · 0c5e941
1 parent 9a0b279
commit 0c5e941
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 15 deletions.
diff --git a/pages/index.public.tsx b/pages/index.public.tsx
@@ -1,22 +1,93 @@
-import { useMantineColorScheme } from "@mantine/core";
+import {
+  Avatar,
+  Container,
+  Paper,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import { BasicLayout } from "layouts";
-import type { NextPage } from "next";
+import type {
+  GetStaticProps,
+  InferGetStaticPropsType,
+  PreviewData,
+} from "next";
+import Link from "next/link";
+import { ParsedUrlQuery } from "querystring";
+import { laedsGetUsersProfiles, LaedsUsersProfiles } from "services";
 import { NextPageWithLayout } from "./_app.public";
 
-const Home: NextPageWithLayout = () => {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const dark = colorScheme === "dark";
+export const getStaticProps: GetStaticProps<
+  {
+    [key: string]: LaedsUsersProfiles[];
+  },
+  ParsedUrlQuery,
+  PreviewData
+> = async () => {
+  const users = await laedsGetUsersProfiles();
 
+  return {
+    props: {
+      users,
+    },
+  };
+};
+
+const Home: NextPageWithLayout = ({
+  users,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <>
-      <h1
-        style={{
-          color: dark ? "white" : "white",
-        }}
-      >
-        {process.env.SECRET}
-      </h1>
-    </>
+    <Container
+      size={"xl"}
+      sx={theme => ({
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "space-evenly",
+        rowGap: "4rem",
+
+        [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+          gap: "2rem",
+        },
+      })}
+    >
+      {users.map(user => (
+        <Tooltip.Floating label={`@${user.username}`}>
+          <UnstyledButton>
+            <Link href={`/user/${user.username}`}>
+              <Paper
+                radius="md"
+                withBorder
+                shadow="xl"
+                sx={theme => ({
+                  width: "30rem",
+                  height: "100%",
+                  backgroundColor:
+                    theme.colorScheme === "dark"
+                      ? theme.colors.dark[8]
+                      : theme.white,
+                })}
+                p="lg"
+              >
+                <Avatar src={user?.image} size={120} radius={120} mx="auto" />
+                <Text align="center" size="lg" weight={500} mt="md">
+                  {user?.name}
+                </Text>
+                <Text
+                  align="center"
+                  color="dimmed"
+                  size="sm"
+                  style={{
+                    wordBreak: "break-word",
+                  }}
+                >
+                  {user?.bio}
+                </Text>
+              </Paper>
+            </Link>
+          </UnstyledButton>
+        </Tooltip.Floating>
+      ))}
+    </Container>
   );
 };
 

diff --git a/services/laedsApi/interfaces/User.ts b/services/laedsApi/interfaces/User.ts
@@ -8,6 +8,13 @@ export interface LaedsUser {
   SocialMediaLinks: SocialMediaLink[];
 }
 
+export interface LaedsUsersProfiles {
+  image: string;
+  username: string;
+  name: string;
+  bio: string;
+}
+
 export interface SocialMediaLink {
   id: string;
   name: string;

diff --git a/services/laedsApi/user.ts b/services/laedsApi/user.ts
@@ -1,6 +1,6 @@
 import { AxiosResponse } from "axios";
 import { laedsApiInstance, LaedsDefaultResponse } from ".";
-import { LaedsUser } from "./interfaces";
+import { LaedsUser, LaedsUsersProfiles } from "./interfaces";
 import { UpdateUserProfile } from "./types";
 
 export const laedsGetUserScope = async (access_token: string) => {
@@ -64,6 +64,14 @@ export const laedsPostUpdateUserProfile = async (
   return checkResponse(response);
 };
 
+export const laedsGetUsersProfiles = async () => {
+  const response = await laedsApiInstance.get("/user/profiles");
+
+  const laedsResponse = await checkResponse(response);
+
+  return laedsResponse.data as LaedsUsersProfiles[];
+};
+
 const checkResponse = async (response: AxiosResponse) => {
   if (response.status >= 200 && response.status <= 299) {
     return (await response.data) as LaedsDefaultResponse;