O que é este Blog? - Githubissues

Este Blog é um exemplo de aplicação criada usando Vite com ReactJS 18 (com TypeScript é claro!).

A motivação foi o desafio do curso de formação React da RocketSeat, onde a partir de um Figma, eu deveria construir todo o desenvolvimento, e como sou Nerd, decidi fazer e ir um pouco mais além, deixando responsivo, e outras melhorias.

O desafio agora é deixar ele funcional, e também com ótima performance, quero ficar ajustando este projeto para ser um bom portfólio para a minha evolução no aprendizado de React..

Como vou precisar de uma série de posts no Blog para dar corpo e funcionalidade para ele, vou postar como um histórico das evoluções que estou fazendo no projeto.

Neste momento meu package.json está assim:

  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@phosphor-icons/react": "^2.0.15",
    "axios": "^1.6.8",
    "date-fns": "^3.6.0",
    "immer": "^10.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "react-markdown": "^9.0.1",
    "react-router-dom": "^6.22.3",
    "remove-markdown": "^0.5.0",
    "scheduler": "^0.23.0",
    "styled-components": "^6.1.8",
    "use-context-selector": "^1.4.4",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@rocketseat/eslint-config": "^2.2.2",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@types/remove-markdown": "^0.3.4",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "json-server": "^0.17.4",
    "typescript": "^5.4.0-beta",
    "vite": "^5.1.6"
  }

Caso eu venha utilizar outra lib, ou remova uma, vou fazer um novo post.

Agora vou focar em ajustar melhor o carregamento do Post, que não ficou muito bacana, preciso abstrair um pouco no contexto que criei, mas deixando mais elegante.

Hoje está assim, não faz muito sentido usando no contexto post e fetchPost, pois estou renderizando vazio e re-hidratando na sequência com o resultado do github, que justamente atualiza novamente post, com certeza não tá certo, apesar de funcionar.

export const Post = () => {
  const post = useContextSelector(BlogContext, (context) => {
    return context.post
  })

  const fetchPost = useContextSelector(BlogContext, (context) => {
    return context.fetchPost
  })

  const params = useParams()
  const postId = params?.id

  useEffect(() => {
    postId && fetchPost(+postId)
  }, [postId, fetchPost])

  return (
    <PostContainer>
      {post && <PostHeader />}
      {post && (
        <PostContent>
          <Markdown>{post.content}</Markdown>
        </PostContent>
      )}
    </PostContainer>
  )
}

rcmonteiro / github-blog

O que é este Blog? #1