FIx: 新着の実装 & スマホUIの修正 (#1)

.gitignore

@@ -6,6 +6,14 @@ node_modules
 /.pnp
 .pnp.js
 
+# pwa 
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map
+
 # testing
 /coverage
 

components/common/images.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import React, { useState, useEffect, useContext } from "react";
+import { userInfoContext } from "../../context/userInfoContext";
+import useSWR from "swr";
+import BlurImage from "./BlurImage"
+import SkeletonImage from "./SkeltonImage"
+
+const fetcher = (url) => fetch(url).then((r) => r.json());
+
+export default function OtherImages() {
+  var ctx = useContext(userInfoContext);
+  var access_limit = ""
+  if (ctx.UserInfo !== null) {
+    access_limit = "?" + new URLSearchParams(ctx.UserInfo.access_limit).toString()
+  }
+
+  const shuffle = ([...array]) => {
+    for (let i = array.length - 1; i >= 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
+
+  const { data, error } = useSWR(
+    "../api/images/list" + access_limit,
+     fetcher
+  );
+  if (!data)
+    return (
+      <div>
+        <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
+          <div className="grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-8">
+            {Array.apply(0, Array(10)).map(function (x, i) {
+              return <SkeletonImage key={i} />;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  var images = shuffle(data.slice(0, data.length));
+  images = images.slice(0, 10)
+
+  return (
+    <div>
+      <div className="mx-auto max-w-7xl p-6 sm:px-12">
+        <div className="mt-6 text-2xl font-semibold">
+          その他の作品
+        </div>
+      </div>
+      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+        <div className="grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-8">
+          {images.reverse().map((image) => (
+            <BlurImage key={image.id} image={image} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/modal/modal.tsx

@@ -44,7 +44,7 @@ const Modal = ({ isOpen, children, onClose }: Props) => {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <div className="inline-block sm:w-4/6 h-5/6 p-6 my-8 overflow-auto text-left align-middle transition-all transform bg-white shadow-xl rounded-xl">
+            <div className="inline-block w-full sm:w-4/6 h-5/6 p-6 my-8 overflow-auto text-left align-middle transition-all transform bg-white shadow-xl rounded-xl">
               {children}
             </div>
           </Transition.Child>

pages/dashboard.tsx

@@ -112,15 +112,15 @@ function BlurImage({ image, data }) {
         {image.title}
       </p>
       <div className="flex flex-row gap-x-4 items-center mt-4 text-sm text-gray-500 w-max">
-            <div className="flex flex-row items-center" title="いいね数">
+            <div className="flex flex-row items-center">
                 <HeartSolidIcon className="w-4 h-4 mr-1" />
                 {image.likes.length}
             </div>
-            <div className="flex flex-row items-center" title="閲覧数">
+            <div className="flex flex-row items-center">
                 <EyeIcon className="w-4 h-4 mr-1"/>
                 {image.views}
             </div>
-            <div className="flex flex-row items-center" title="コピー数">
+            <div className="flex flex-row items-center">
                 <ClipboardIcon className="w-4 h-4 mr-1"/>
                 {image.copies}
             </div>

pages/images/[id].tsx

@@ -26,6 +26,7 @@ import Head from 'next/head'
 import axios from "axios";
 import PopOver from "../../components/popover"
 import { text2Link } from "../../components/common/text2link";
+import OtherImages from "../../components/common/images";
 
 
 export const getServerSideProps = async (context) => {
@@ -281,7 +282,7 @@ const Images = ({data, host}) => {
                               <p className="text-gray-600 text-sm">プロンプト</p>
                               <button className="border rounded-lg hover:bg-gray-100 active:bg-gray-200 active:border-green-600">
                                 <ClipboardDocumentIcon
-                                  className="w-5 h-5 text-gray-600 m-2"
+                                  className="w-5 h-5 text-gray-600 m-2 break-all"
                                   onClick={() => {
                                     handlecopy(image.prompt, image.id);
                                   }}
@@ -486,6 +487,7 @@ const Images = ({data, host}) => {
                 </div>
               </div>
             </main>
+            <OtherImages />
           </div>
         </div>
       </div>