From 7ef696f88eb150774b043e73edb59902bd1b774c Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 9 Mar 2022 01:33:22 -0800
Subject: [PATCH] sort your posts by time, style improvements

---
 client/components/my-posts/index.tsx  |  2 +-
 client/components/post-list/index.tsx | 47 +++++++++++++++++----------
 client/components/post/index.tsx      |  2 +-
 client/pages/mine.tsx                 |  2 +-
 client/pages/new.tsx                  |  4 +--
 client/pages/signin.tsx               |  2 +-
 client/pages/signup.tsx               |  2 +-
 client/styles/Home.module.css         |  1 -
 server/src/routes/users.ts            |  2 +-
 9 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/client/components/my-posts/index.tsx b/client/components/my-posts/index.tsx
index 89e55547..a4352840 100644
--- a/client/components/my-posts/index.tsx
+++ b/client/components/my-posts/index.tsx
@@ -13,4 +13,4 @@ const MyPosts = () => {
     return <PostList posts={data} error={error} />
 }
 
-export default MyPosts
\ No newline at end of file
+export default MyPosts
diff --git a/client/components/post-list/index.tsx b/client/components/post-list/index.tsx
index 1b89a39d..8f8befe7 100644
--- a/client/components/post-list/index.tsx
+++ b/client/components/post-list/index.tsx
@@ -1,4 +1,4 @@
-import { Loading, Card, Divider, Input, Text } from "@geist-ui/core"
+import { Loading, Card, Divider, Input, Text, Grid, Spacer } from "@geist-ui/core"
 import Preview from "../preview"
 import ShiftBy from "../shift-by"
 import VisibilityBadge from "../visibility-badge"
@@ -12,6 +12,16 @@ type Props = {
 }
 
 const PostList = ({ posts, error }: Props) => {
+    const FilenameInput = ({ title }: { title: string }) => <Input
+        value={title}
+        marginTop="var(--gap-double)"
+        size={1.2}
+        font={1.2}
+        label="Filename"
+        readOnly
+        width={"100%"}
+    />
+
     return (
         <div className={styles.container}>
             {error && <Text type='error'>Failed to load.</Text>}
@@ -22,33 +32,34 @@ const PostList = ({ posts, error }: Props) => {
                     <ul>
                         {posts.map((post: any) => {
                             return <li key={post.id}>
-                                <Card height={'300px'} style={{ overflowY: 'scroll' }} hoverable>
-                                    <Text h3 className={styles.postHeader}>
-                                        <Link color href={`/post/${post.id}`}>{post.title} <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy></Link> <span>{new Date(post.createdAt).toLocaleDateString()}</span>
-                                    </Text>
+                                <Card style={{ overflowY: 'scroll' }}>
+                                    <Spacer height={1 / 2} />
+                                    <Grid.Container justify={'space-between'}>
+                                        <Grid xs={8}>
+                                            <Text h3 paddingLeft={1 / 2}>
+                                                <Link color href={`/post/${post.id}`}>{post.title}
+                                                    <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
+                                                </Link>
+                                            </Text></Grid>
+                                        <Grid xs={7}><Text type="secondary" h5>{new Date(post.createdAt).toLocaleDateString()} </Text></Grid>
+                                        <Grid xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
+                                    </Grid.Container>
+
                                     <Divider h="1px" my={0} />
 
                                     <Card.Content >
-                                        <Input
-                                            placeholder="MyFile.md"
-                                            value={post.files[0].title}
-                                            marginTop="var(--gap-double)"
-                                            size={1.2}
-                                            font={1.2}
-                                            label="Filename"
-                                            disabled={true}
-                                            readOnly
-                                            width={"100%"}
-                                        />
-                                        <Preview height={220} content={post.files[0].content} />
+                                        {post.files.map((file: any) => {
+                                            return <FilenameInput key={file.id} title={file.title} />
+                                        })}
                                     </Card.Content>
+
                                 </Card>
                             </li>
                         })}
                     </ul>
                 </div>
             }
-        </div>
+        </div >
     )
 }
 
diff --git a/client/components/post/index.tsx b/client/components/post/index.tsx
index 1fbeb33e..f1c4b6a2 100644
--- a/client/components/post/index.tsx
+++ b/client/components/post/index.tsx
@@ -93,7 +93,7 @@ const Post = () => {
                     style={{ flex: .5, lineHeight: '40px' }}
                     type="default"
                 >
-                    Add another document
+                    Add a File
                 </Button>
 
                 <ButtonDropdown loading={isSubmitting} type="success">
diff --git a/client/pages/mine.tsx b/client/pages/mine.tsx
index 99a1c4d2..cf4b6bd6 100644
--- a/client/pages/mine.tsx
+++ b/client/pages/mine.tsx
@@ -20,7 +20,7 @@ const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: ()
       <Page.Header>
         <Header theme={theme} changeTheme={changeTheme} />
       </Page.Header>
-      <Page.Content width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
+      <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
         {isLoading && <div style={{ margin: "0 auto" }}><Loader /></div>}
         {isSignedIn && <MyPosts />}
       </Page.Content>
diff --git a/client/pages/new.tsx b/client/pages/new.tsx
index 37cc176f..77b65838 100644
--- a/client/pages/new.tsx
+++ b/client/pages/new.tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
 import HomeComponent from '../components/post'
-import { Loading, Page } from '@geist-ui/core'
+import { Page } from '@geist-ui/core'
 import useSignedIn from '../lib/hooks/use-signed-in'
 import Header from '../components/header'
 import { ThemeProps } from './_app'
@@ -25,7 +25,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
         <Header theme={theme} changeTheme={changeTheme} />
       </Page.Header>
 
-      <Page.Content width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
+      <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
         {isSignedIn && <HomeComponent />}
       </Page.Content>
     </Page >
diff --git a/client/pages/signin.tsx b/client/pages/signin.tsx
index 20db6174..f03d49c4 100644
--- a/client/pages/signin.tsx
+++ b/client/pages/signin.tsx
@@ -8,7 +8,7 @@ const SignIn = ({ theme, changeTheme }: ThemeProps) => (
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>
-        <Page.Content width={"var(--main-content-width)"} margin="auto">
+        <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="auto">
             <Auth page="signin" />
         </Page.Content>
     </Page>
diff --git a/client/pages/signup.tsx b/client/pages/signup.tsx
index 2bb1c9c8..8c8ef7db 100644
--- a/client/pages/signup.tsx
+++ b/client/pages/signup.tsx
@@ -8,7 +8,7 @@ const SignUp = ({ theme, changeTheme }: ThemeProps) => (
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>
-        <Page.Content width={"var(--main-content-width)"} margin="auto">
+        <Page.Content width={"var(--main-content-width)"} paddingTop={"var(--gap)"} margin="auto">
             <Auth page="signup" />
         </Page.Content>
     </Page>
diff --git a/client/styles/Home.module.css b/client/styles/Home.module.css
index 2c9252c9..f770e0b2 100644
--- a/client/styles/Home.module.css
+++ b/client/styles/Home.module.css
@@ -1,6 +1,5 @@
 .main {
   min-height: 100vh;
-  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
diff --git a/server/src/routes/users.ts b/server/src/routes/users.ts
index a76c99a0..8bf410f1 100644
--- a/server/src/routes/users.ts
+++ b/server/src/routes/users.ts
@@ -42,7 +42,7 @@ users.get("/mine", jwt, async (req: UserJwtRequest, res, next) => {
         if (!user) {
             return res.status(404).json({ error: "User not found" })
         }
-        return res.json(user.posts)
+        return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
     } catch (error) {
         next(error)
     }