From bf5c086011977309d3183674190f45e860d7f992 Mon Sep 17 00:00:00 2001
From: Luca Casonato <luca.casonato@antipy.com>
Date: Mon, 22 Jun 2020 18:31:16 +0200
Subject: [PATCH] Use proper links for directory entries (#1201)

---
 components/Registry.tsx | 126 ++++++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 55 deletions(-)

diff --git a/components/Registry.tsx b/components/Registry.tsx
index 4baadf957..099baf3ce 100644
--- a/components/Registry.tsx
+++ b/components/Registry.tsx
@@ -441,77 +441,93 @@ function DirectoryListing(props: {
               <tbody className="bg-white">
                 {props.dirEntries
                   .sort((a, b) => a.type.localeCompare(b.type))
-                  .map((entry, i) => (
-                    <Link
-                      key={i}
-                      href={`${isStd ? "" : "/x"}/[identifier]/[...path]`}
-                      as={`${isStd ? "" : "/x"}/${props.name}${
-                        props.version ? `@${props.version}` : ""
-                      }${props.path}/${entry.name}`}
-                    >
-                      {/* TODO(lucacasonato): currently not activatable with keyboard: https://github.com/zeit/next.js/issues/12179 */}
+                  .map((entry, i) => {
+                    const href = `${isStd ? "" : "/x"}/[identifier]/[...path]`;
+                    const as = `${isStd ? "" : "/x"}/${props.name}${
+                      props.version ? `@${props.version}` : ""
+                    }${props.path}/${entry.name}`;
+                    return (
                       <tr
-                        tabIndex={0}
-                        role="button"
-                        className={`table-row hover:bg-gray-100 cursor-pointer${
+                        key={i}
+                        className={`table-row hover:bg-gray-100${
                           i !== props.dirEntries.length - 1
                             ? " border-b border-gray-200"
                             : ""
                         }`}
                       >
-                        <td className="px-2 sm:pl-3 md:pl-4 py-1 whitespace-no-wrap text-sm leading-5 text-gray-400 w-6">
-                          <svg
-                            fill="currentColor"
-                            viewBox="0 0 20 20"
-                            className="w-5 h-5"
-                          >
-                            {(() => {
-                              switch (entry.type) {
-                                case "file":
-                                  if (isReadme(entry.name)) {
-                                    return (
-                                      <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
-                                    );
+                        <td className="whitespace-no-wrap text-sm leading-5 text-gray-400 w-6">
+                          <Link href={href} as={as}>
+                            <a
+                              className="px-2 sm:pl-3 md:pl-4 py-1 w-full block"
+                              tabIndex={-1}
+                            >
+                              <svg
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                                className="w-5 h-5"
+                              >
+                                {(() => {
+                                  switch (entry.type) {
+                                    case "file":
+                                      if (isReadme(entry.name)) {
+                                        return (
+                                          <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
+                                        );
+                                      }
+                                      return (
+                                        <path
+                                          fillRule="evenodd"
+                                          d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
+                                          clipRule="evenodd"
+                                        ></path>
+                                      );
+                                    case "dir":
+                                      return (
+                                        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
+                                      );
+                                    case "symlink":
+                                      return (
+                                        <path
+                                          fillRule="evenodd"
+                                          d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
+                                          clipRule="evenodd"
+                                        ></path>
+                                      );
                                   }
-                                  return (
-                                    <path
-                                      fillRule="evenodd"
-                                      d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
-                                      clipRule="evenodd"
-                                    ></path>
-                                  );
-                                case "dir":
-                                  return (
-                                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
-                                  );
-                                case "symlink":
-                                  return (
-                                    <path
-                                      fillRule="evenodd"
-                                      d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
-                                      clipRule="evenodd"
-                                    ></path>
-                                  );
-                              }
-                            })()}
-                          </svg>
+                                })()}
+                              </svg>
+                            </a>
+                          </Link>
                         </td>
                         <td
                           className={
-                            "px-2 py-1 whitespace-no-wrap text-sm text-blue-500 leading-5" +
+                            "whitespace-no-wrap text-sm text-blue-500 leading-5" +
                             (isReadme(entry.name) ? " font-medium" : "")
                           }
                         >
-                          {entry.name}
+                          <Link href={href} as={as}>
+                            <a className="px-2 py-1 w-full block">
+                              {entry.name}
+                            </a>
+                          </Link>
                         </td>
-                        <td className="px-4 py-1 whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
-                          {entry.type !== "dir" && entry.size
-                            ? bytesToSize(entry.size)
-                            : ""}
+                        <td className="whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
+                          <Link href={href} as={as}>
+                            <a
+                              className="px-4 py-1 w-full h-full block"
+                              tabIndex={-1}
+                            >
+                              {entry.type !== "dir" && entry.size ? (
+                                bytesToSize(entry.size)
+                              ) : (
+                                <>&nbsp;</>
+                              )}
+                            </a>
+                          </Link>
                         </td>
                       </tr>
-                    </Link>
-                  ))}
+                    );
+                  })}
               </tbody>
             </table>
           </div>