sort your posts by time, style improvements
This commit is contained in:
parent
73e32a58e7
commit
7ef696f88e
9 changed files with 37 additions and 27 deletions
|
@ -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,26 +32,27 @@ 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>
|
||||
})}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 >
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue