zeichen-legacy/src/pages/notes.tsx

import * as React from 'react'
import Head from 'next/head'
import styled from 'styled-components'
import Editor from '../components/Editor/Editor'
import * as Storage from '../services/Storage'
import generateId from '../utilities/Id'
import Link from 'next/link'
import { formatDate } from '../utilities/Date'
import { useRouter } from 'next/router'
import { Trash2, FilePlus, FolderPlus, FileText, GitBranch, User } from 'react-feather'

const Navbar = styled('aside')({
  width: 360,
  height: '100%',
  position: 'fixed',
  top: 0,
  left: -360,
  backgroundColor: 'yellow',
  '@media (min-width: 1080px)': {
    width: `${100 / 3}%`,
    left: 0,
  },
})

const PrimaryNavItems = styled('nav')({
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  alignItems: 'stretch',
  '@media (min-width: 1080px)': {
    width: '4rem',
  },
})

const SecondaryNavItems = styled('nav')({
  height: '100%',
  position: 'relative',
  '::before': {
    content: "''",
    display: 'block',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'absolute',
    zIndex: -1,
    backgroundColor: 'white',
    opacity: 0.5,
  },
  '@media (min-width: 1080px)': {
    flex: 'auto',
  },
})

const SecondaryNavItemsOverflow = styled('div')({
  overflow: 'auto',
  width: '100%',
  height: '100%',
})

const Main = styled('main')({
  margin: '2rem 0',
  '@media (min-width: 1080px)': {
    paddingLeft: `${100 / 3}%`,
    boxSizing: 'border-box',
  },
})

const Container = styled('div')({
  width: '100%',
  margin: '0 auto',
  padding: '0 1rem',
  boxSizing: 'border-box',
  '@media (min-width: 720px)': {
    maxWidth: 720,
  },
})

const NavbarItems = styled('div')({
  display: 'flex',
  width: '100%',
  height: '100%',
})

const NavbarContainer = styled('div')({
  display: 'block',
  width: '100%',
  height: '100%',
  margin: '0 0 0 auto',
  boxSizing: 'border-box',
  maxWidth: 360,
})

const TitleInput = styled('input')({
  border: 0,
  background: 'transparent',
  padding: 0,
  display: 'block',
  width: '100%',
  font: 'inherit',
  fontSize: '3rem',
  fontWeight: 'bold',
  outline: 0,
})

const NoteLink = styled('a')({
  display: 'flex',
  textDecoration: 'none',
  color: 'inherit',
  height: '4rem',
  alignItems: 'center',
  position: 'relative',
})

const NoteLinkPrimary = styled('div')({
  display: 'block',
})

const NoteLinkTitle = styled('strong')({
  verticalAlign: 'middle',
})

const LinkContainer = styled('div')({
  position: 'relative',
})

const NoteActions = styled('div')({
  display: 'flex',
  position: 'absolute',
  alignItems: 'stretch',
  top: 0,
  right: 0,
  height: '100%',
})

const NoteAction = styled('button')({
  height: '100%',
  width: '4rem',
  background: 'transparent',
  border: 0,
  color: 'inherit',
  cursor: 'pointer',
  outline: 0,
})

const NoteLinkBackground = styled('span')({
  opacity: 0.125,
  backgroundColor: 'currentColor',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  position: 'absolute',
})

const NewIcon = styled(FilePlus)({
  verticalAlign: 'middle',
  marginRight: '0.5rem',
})

const NewFolderIcon = styled(FolderPlus)({
  verticalAlign: 'middle',
  marginRight: '0.5rem',
})

const BinIcon = styled(Trash2)({
  verticalAlign: 'middle',
  marginRight: '0.5rem',
})

const NavbarItemContent = styled('span')({
  padding: '0 1rem',
  boxSizing: 'border-box',
})

const PrimaryNavItem = styled('a')({
  width: '4rem',
  height: '4rem',
  display: 'grid',
  placeContent: 'center',
  color: 'inherit',
})

const PostMeta = styled('small')({
  opacity: 0.5,
  height: '1.25rem',
  display: 'block',
  lineHeight: 1.25,
})

const PostPrimary = styled('div')({
  marginBottom: '2rem',
})

type NoteInstance = { id: string, title: string, content?: object, updatedAt: string, }

const Notes = ({ id: idProp }) => {
  const [id, setId, ] = React.useState(idProp)
  const [title, setTitle, ] = React.useState('')
  const [notes, setNotes, ] = React.useState(null)
  const [folders, setFolders, ] = React.useState(null)
  const stateRef = React.useRef<NoteInstance>({ id, title: '', updatedAt: new Date().toISOString(), })
  const timeoutRef = React.useRef<number>(null)
  const router = useRouter()

  const autoSave = () => {
    if (timeoutRef.current !== null) {
      window.clearTimeout(timeoutRef.current)
    }
    timeoutRef.current = window.setTimeout(async () => {
      const newNote = await Storage.saveNote({
        ...stateRef.current,
        updatedAt: (stateRef.current.updatedAt = new Date().toISOString()),
      })
      if (router.query.id !== id) {
        await router.push(`/notes/${id}`, undefined, { shallow: true })
      }
      setNotes(oldNotes => {
        let notes
        if (oldNotes.some((a) => a.id === id)) {
          notes = oldNotes.map(n => n.id === id ? newNote : n)
        } else {
          notes = [newNote, ...oldNotes]
        }
        return notes.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
      })
      timeoutRef.current = null
    }, 3000)
  }

  const handleEditorChange = e => {
    stateRef.current.content = e
    autoSave()
  }

  const handleTitleChange = e => {
    stateRef.current.title = e.target.value
    setTitle(e.target.value)
    autoSave()
  }

  const deleteNote = note => async () => {
    setNotes(notes.filter(n => n.id !== note.id))
    const result = await Storage.deleteNote(note)
    if (!result) {
      setNotes(notes)
    }
  }

  React.useEffect(() => {
    const loadNotes = async () => {
      const theNotes = await Storage.loadNotes()
      setNotes(theNotes)
    }
    loadNotes()
  }, [])

  React.useEffect(() => {
    const loadFolders = async () => {
      const theFolders = await Storage.loadFolders()
      setFolders(theFolders)
    }
    loadFolders()
  }, [])

  React.useEffect(() => {
    if (!Array.isArray(notes!)) {
      return
    }
    const theNote = notes.find(n => n.id === id)
    stateRef.current = theNote ? theNote : { id, title: '', updatedAt: new Date().toISOString(), }
    setTitle(stateRef.current.title)
  }, [id, notes])

  React.useEffect(() => {
    setId(idProp || generateId())
  }, [idProp])

  return (
    <React.Fragment>
      <Head>
        <title>{ idProp === undefined ? 'Notes | New Note' : `Notes | ${title.length > 0 ? title : '(untitled)'}`}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar>
        <NavbarContainer>
          <NavbarItems>
            <PrimaryNavItems>
              <div>
                <Link
                  href={{
                    pathname: '/notes',
                  }}
                  passHref
                >
                  <PrimaryNavItem>
                    <FileText />
                  </PrimaryNavItem>
                </Link>
                <Link
                  href={{
                    pathname: '/graph',
                  }}
                  passHref
                >
                  <PrimaryNavItem>
                    <GitBranch />
                  </PrimaryNavItem>
                </Link>
              </div>
              <div>
                <Link
                  href={{
                    pathname: '/me',
                  }}
                  passHref
                >
                  <PrimaryNavItem>
                    <User />
                  </PrimaryNavItem>
                </Link>
              </div>
            </PrimaryNavItems>
            <SecondaryNavItems>
              <SecondaryNavItemsOverflow>
                <Link
                  href={{
                    pathname: '/profile',
                  }}
                  passHref
                >
                  <NoteLink>
                    <NavbarItemContent>
                      <NoteLinkPrimary>
                        <NewFolderIcon />
                        <NoteLinkTitle>
                          Personal
                        </NoteLinkTitle>
                      </NoteLinkPrimary>
                    </NavbarItemContent>
                  </NoteLink>
                </Link>
                <Link
                  href={{
                    pathname: '/folders/new',
                  }}
                  passHref
                >
                  <NoteLink>
                    <NavbarItemContent>
                      <NoteLinkPrimary>
                        <NewFolderIcon />
                        <NoteLinkTitle>
                          Create Folder
                        </NoteLinkTitle>
                      </NoteLinkPrimary>
                    </NavbarItemContent>
                  </NoteLink>
                </Link>
                <Link
                  href={{
                    pathname: '/notes',
                  }}
                  passHref
                >
                  <NoteLink>
                    <NavbarItemContent>
                      <NoteLinkPrimary>
                        <NewIcon />
                        <NoteLinkTitle>
                          Create Note
                        </NoteLinkTitle>
                      </NoteLinkPrimary>
                    </NavbarItemContent>
                  </NoteLink>
                </Link>
                {
                  Array.isArray(notes!)
                  && notes.map(n => (
                    <LinkContainer
                      key={n.id}
                    >
                      {
                        n.id === id
                        && (
                          <NoteLinkBackground />
                        )
                      }
                      <Link
                        href={{
                          pathname: '/notes/[id]',
                          query: { id: n.id },
                        }}
                        replace
                        passHref
                      >
                        <NoteLink>
                          <NavbarItemContent>
                            <NoteLinkPrimary>
                              <NoteLinkTitle
                                style={{ opacity: n.title.length > 0 ? 1 : 0.5, }}
                              >
                                {n.title.length > 0 ? n.title : '(untitled)'}
                              </NoteLinkTitle>
                            </NoteLinkPrimary>
                            {' '}
                            <PostMeta>
                              <time
                                dateTime={new Date(n.updatedAt).toISOString()}
                              >
                                Last updated {formatDate(new Date(n.updatedAt))}
                              </time>
                            </PostMeta>
                          </NavbarItemContent>
                        </NoteLink>
                      </Link>
                      <NoteActions>
                        <NoteAction
                          onClick={deleteNote(n)}
                        >
                          <Trash2 />
                        </NoteAction>
                      </NoteActions>
                    </LinkContainer>
                  ))
                }
                <Link
                  href={{
                    pathname: '/bin',
                  }}
                  passHref
                >
                  <NoteLink>
                    <NavbarItemContent>
                      <NoteLinkPrimary>
                        <BinIcon />
                        <NoteLinkTitle>
                          View Binned Notes
                        </NoteLinkTitle>
                      </NoteLinkPrimary>
                    </NavbarItemContent>
                  </NoteLink>
                </Link>
              </SecondaryNavItemsOverflow>
            </SecondaryNavItems>
          </NavbarItems>
        </NavbarContainer>
      </Navbar>
      <Main>
        <Container>
          {
            Array.isArray(notes!)
            && (
              <React.Fragment>
                <PostPrimary>
                  <TitleInput
                    placeholder="Title"
                    value={title}
                    onChange={handleTitleChange}
                  />
                  <PostMeta>
                    {
                      stateRef.current.updatedAt
                      && router.query.id
                      && (
                        <time
                          dateTime={new Date(stateRef.current.updatedAt).toISOString()}
                        >
                          Last updated {formatDate(new Date(stateRef.current.updatedAt))}
                        </time>
                      )
                    }
                  </PostMeta>
                </PostPrimary>
                <Editor
                  autoFocus={false}
                  key={id}
                  content={stateRef.current ? stateRef.current.content : undefined}
                  onChange={handleEditorChange}
                  placeholder="Start typing here."
                />
              </React.Fragment>
            )
          }
        </Container>
      </Main>
    </React.Fragment>
  )
}

export const getServerSideProps = async ctx => {
  if (ctx.params) {
    return {
      props: {
        id: ctx.params?.id
      }
    }
  }

  return {
    props: {}
  }
}

export default Notes