clintonwoo / hackernews-remix-react Goto Github PK

Hi,
Wanted to point out that the folder and project name both have a typo in the setup command.
react and remix should be reversed.

Here is the diff (don't get access right to make a PR) :
-git clone https://github.com/clintonwoo/hackernews-react-remix.git && cd hackernews-react-remix && npm install && npm run dev

+git clone https://github.com/clintonwoo/hackernews-remix-react.git && cd hackernews-remix-react && npm install && npm run dev

Cheers.

Clicking a comments link on the front page leads to a page with a title of 'Item | Hacker News Clone'.

On the real thing, the title is set to the same as the storylink text.

This causes unexpected mouse cursor behavior over the expand [-]

Description

I am trying to rebuild the Hacker news web app, without using a database, and store user information (username) in cookies. Using a model similar to yours, I am currently able to add the username to the cookie header, but I am unable to delete. Here is the code for the login page, specifically the action that adds the cookie:

export async function action({ request }) {
  const session = await getSession(request.headers.get("Cookie"));
  const form = await request.formData();
  const username = form.get("name");
  const Password = form.get("password");

  // Login succeeded, send them to the home page.
  return redirect("http://localhost:3000/", {
    headers: {
      "Set-Cookie": username,
    },
  });
}

And here is the logout page:

import { ActionFunction, redirect } from "@remix-run/node";
import { getSession, destroySession } from "~/sessions";

export const loader: ActionFunction = async ({ request }) => {
  const session = await getSession(request.headers.get("Cookie"));
  //await destroySession(session);
  return redirect("/login", {
    headers: { "Set-Cookie": await destroySession(session) },
  });
};

Is there anything that I might be missing?

Utilizing <Form> over an anchor here will allow you to avoid a full page refresh and is semantically more proper.

Looks like all your links (see item-title.tsx) are using the standard <a/> tag, instead of <Link/>. This is causing the browser to reload the entire page on every navigation. By using the <Link/> component, Remix will issue a client-side fetch, then render the item page.