sort your posts by time, style improvements

client/components/my-posts/index.tsx

@@ -13,4 +13,4 @@ const MyPosts = () => {
     return <PostList posts={data} error={error} />
 }
 
-export default MyPosts
+export default MyPosts

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 >
     )
 }
 

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">

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>

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 >

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>

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>

client/styles/Home.module.css

@@ -1,6 +1,5 @@
 .main {
   min-height: 100vh;
-  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;

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)
     }