Added space info to space page.

evankirkiles · Oct 11, 2022 · 7d6bf0d · 7d6bf0d · vercel · Oct 11, 2022
1 parent 01bc84f
commit 7d6bf0d
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 30 deletions.
diff --git a/src/pages/spaces/[spaceid].tsx b/src/pages/spaces/[spaceid].tsx
@@ -15,6 +15,7 @@ import { getSpace, spaceKeys } from '../../supabase/api/spaces';
 import s from '../../styles/Space.module.scss';
 import Logo from '../../components/Logo/Logo';
 import Link from 'next/link';
+import getSeasonString from '../../util/getSeasonString';
 
 /* -------------------------------------------------------------------------- */
 /*                                   TYPING                                   */
@@ -24,7 +25,7 @@ interface SpacePageProps {
   spaceid: string;
 }
 interface QParams extends ParsedUrlQuery {
-  spaceid?: string;
+  spaceid: string;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -35,24 +36,28 @@ const SpacePage: NextPage<SpacePageProps> = function SpacePage({ spaceid }) {
   // use a fallback loading indicator
   const router = useRouter();
   // get the cached space query. we will also re-get the papercraft likes
-  const space = useQuery(spaceKeys.get(spaceid), () => getSpace(spaceid), {
-    enabled: !!spaceid,
-  });
+  const { data: space } = useQuery(
+    spaceKeys.get(spaceid),
+    () => getSpace(spaceid),
+    {
+      enabled: !!spaceid,
+    }
+  );
 
   return (
     <>
       <Head>
-        <title>{`${space.data?.title} - a bit of personal space`}</title>
+        <title>{`${space?.title} - a bit of personal space`}</title>
         <meta property="og:url" content={router.asPath} />
         <NextSeo
           canonical={`https://abitofpersonal.space/spaces/${spaceid}`}
-          description={space.data?.description}
-          title={space.data ? `${space.data.title}` : undefined}
+          description={space?.description}
+          title={space ? `${space.title}` : undefined}
           openGraph={{
             url: router.basePath,
-            title: space.data ? `${space.data.title} on paperarium` : undefined,
-            description: space.data
-              ? `view @${space.data.author}'s ${space.data.title} on paperarium!`
+            title: space ? `${space.title} on paperarium` : undefined,
+            description: space
+              ? `view @${space.author}'s ${space.title} on paperarium!`
               : undefined,
           }}
         />
@@ -72,21 +77,32 @@ const SpacePage: NextPage<SpacePageProps> = function SpacePage({ spaceid }) {
           <div className={s.logo}>
             <Logo />
           </div>
-          <div className={s.credits}>
-            SPACE OF
-            <br />
-            peter kirkiles
-            <br />
-            winter 2022
-            <br />
-            kent, ct
-          </div>
+          {space ? (
+            <div className={s.credits}>
+              {space.author ? (
+                <>
+                  SPACE OF
+                  <br />
+                  {space.author}
+                  <br />
+                </>
+              ) : null}
+              {getSeasonString(new Date(space.created_at)).toLowerCase()}
+              <br />
+              {space.location ? (
+                <>
+                  {space.location}
+                  <br />
+                </>
+              ) : null}
+            </div>
+          ) : null}
           <div className={s.loading_container}>
             <div>Loading...</div>
             <div className={s.loading_bar}></div>
           </div>
-          <div className={s.more_info}>{space.data?.description}</div>
-          <div className={s.instructions}>HI2</div>
+          <div className={s.more_info}>+</div>
+          <div className={s.instructions}>?</div>
         </div>
       </div>
     </>

diff --git a/src/styles/Space.module.scss b/src/styles/Space.module.scss
@@ -77,10 +77,15 @@ $overlay_offset: 10px;
 .title {
   grid-area: title;
   place-self: start start;
-  font-size: 30px;
+  font-size: 20px;
   cursor: pointer;
   transition: color 0.1s ease-in-out;
   animation: faderight 0.3s ease-in-out;
+
+  @include respond-to('xsmall') {
+    font-size: 30px;
+  }
+
   &:hover {
     color: $highlight;
   }
@@ -115,10 +120,12 @@ $overlay_offset: 10px;
 }
 
 .loading_container {
-  width: 100%;
-  height: 100%;
   grid-area: loading;
   place-self: center center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -133,20 +140,40 @@ $overlay_offset: 10px;
   background-color: $background;
 }
 
+.button {
+  border: 1px solid $foreground;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  background-color: $background;
+  cursor: pointer;
+  transition: transform 0.1s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
 .more_info {
+  @extend .button;
+  aspect-ratio: 1;
   grid-area: more;
   place-self: end start;
-  background-color: $foreground;
-  padding: 10px;
-  color: $background;
+  // background-color: $foreground;
+  // padding: 10px;
+  // color: $background;
   animation: fadeup 0.3s ease-in-out;
 }
 
 .instructions {
+  @extend .button;
+  aspect-ratio: 1;
   grid-area: instructions;
   place-self: end end;
-  background-color: $foreground;
-  width: 50px;
-  height: 50px;
+  // background-color: $foreground;
+  // width: 50px;
+  // height: 50px;
   animation: fadeup 0.3s ease-in-out;
 }
diff --git a/src/util/getSeasonString.ts b/src/util/getSeasonString.ts
@@ -0,0 +1,19 @@
+/*
+ * getSeasonString.ts
+ * author: evan kirkiles
+ * created on Tue Oct 11 2022
+ * 2022 the nobot space,
+ */
+
+const SEASONS = ['Summer', 'Autumn', 'Winter', 'Spring'];
+
+/**
+ * Returns a string of the date in terms of the season
+ * @param d
+ * @returns
+ */
+export default function getSeasonString(d: Date) {
+  return `${
+    SEASONS[Math.floor((d.getMonth() / 12) * 4) % 4]
+  } ${d.getFullYear()}`;
+}