CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: fix hydration error with placeholder for post title

Browse source
This commit is contained in:
Max Leiter 2022-03-23 15:40:47 -07:00
parent d4120e6f41
commit 48a8e9f6a9
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/components/edit-document/index.tsx
View file

@ -82,7 +82,7 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
if (skeleton) { if (skeleton) {
return <> return <>
<Spacer height={1} /> <Spacer height={1} />
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}> <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 'var(--main-content)', margin: "0 auto" }}>
<div className={styles.fileNameContainer}> <div className={styles.fileNameContainer}>
<Skeleton width={275} height={36} /> <Skeleton width={275} height={36} />
{remove && <Skeleton width={36} height={36} />} {remove && <Skeleton width={36} height={36} />}
@ -98,7 +98,7 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
return ( return (
<> <>
<Spacer height={1} /> <Spacer height={1} />
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}> <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 'var(--main-content)', margin: "0 auto" }}>
<div className={styles.fileNameContainer}> <div className={styles.fileNameContainer}>
<Input <Input
placeholder="MyFile.md" placeholder="MyFile.md"

9
client/components/new-post/title/index.tsx
View file

@ -1,4 +1,4 @@
import { ChangeEvent, memo, useCallback } from 'react' import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react'
import { Text } from '@geist-ui/core' import { Text } from '@geist-ui/core'
import ShiftBy from '@components/shift-by' import ShiftBy from '@components/shift-by'
@ -21,11 +21,16 @@ type props = {
} }
const Title = ({ onChange, title }: props) => { const Title = ({ onChange, title }: props) => {
const [placeholder, setPlaceholder] = useState(titlePlaceholders[0])
useEffect(() => {
// set random placeholder on load
setPlaceholder(titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)])
}, [])
return (<div className={styles.title}> return (<div className={styles.title}>
<Text h1 width={"150px"} className={styles.drift}>Drift</Text> <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
<ShiftBy y={-3}> <ShiftBy y={-3}>
<Input <Input
placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]} placeholder={placeholder}
value={title || ""} value={title || ""}
onChange={onChange} onChange={onChange}
height={"55px"} height={"55px"}