From 972b92bf6a8e5a3da467d07c5cbd539460f237c6 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Wed, 3 May 2023 21:17:18 +0300
Subject: [PATCH] Implement Log Modal

---
 components/LogModal.tsx | 155 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 components/LogModal.tsx

diff --git a/components/LogModal.tsx b/components/LogModal.tsx
new file mode 100644
index 0000000..390b236
--- /dev/null
+++ b/components/LogModal.tsx
@@ -0,0 +1,155 @@
+import { useLogStore } from 'contexts/log'
+import { useRef, useState } from 'react'
+import { FaCopy, FaEraser } from 'react-icons/fa'
+import { copy } from 'utils/clipboard'
+
+import type { LogItem } from '../contexts/log'
+import { removeLogItem, setLogItemList } from '../contexts/log'
+import { Button } from './Button'
+import { Tooltip } from './Tooltip'
+
+export interface LogModalProps {
+  tempLogItem?: LogItem
+}
+export const LogModal = (props: LogModalProps) => {
+  const logs = useLogStore()
+  const [isChecked, setIsChecked] = useState(false)
+
+  const checkBoxRef = useRef<HTMLInputElement>(null)
+
+  const handleCheckBox = () => {
+    checkBoxRef.current?.click()
+  }
+
+  return (
+    <div>
+      <input className="modal-toggle" defaultChecked={false} id="my-modal-8" ref={checkBoxRef} type="checkbox" />
+      <label className="cursor-pointer modal" htmlFor="my-modal-8">
+        <label
+          className={`absolute top-[15%] bottom-5 left-[21.5%] lg:max-w-[70%] ${
+            logs.itemList.length > 4 ? 'max-h-[750px]' : 'max-h-[500px]'
+          } border-2 no-scrollbar modal-box`}
+          htmlFor="temp"
+        >
+          <div className="text-xl font-bold">
+            <table className="table w-full h-1/2">
+              <thead className="sticky inset-x-0 top-0 bg-blue-400/20 backdrop-blur-sm">
+                <tr>
+                  <th className="text-lg font-bold bg-transparent">#</th>
+                  <th className="text-lg font-bold bg-transparent">Type</th>
+                  <th className="text-lg font-bold bg-transparent">Message</th>
+                  <th className="text-lg font-bold bg-transparent">
+                    Time (UTC +{-new Date().getTimezoneOffset() / 60}){' '}
+                  </th>
+                  <th className="bg-transparent" />
+                </tr>
+              </thead>
+              <tbody>
+                {logs.itemList.length > 0 &&
+                  logs.itemList.map((logItem, index) => (
+                    <tr key={logItem.id} className="p-0 border-b-2 border-teal-200/10 border-collapse">
+                      <td className="ml-8 w-[5%] font-mono text-base font-bold bg-transparent">{index + 1}</td>
+                      <td
+                        className={`w-[5%] font-mono text-base font-bold bg-transparent ${
+                          logItem.type === 'Error' ? 'text-red-400' : ''
+                        }`}
+                      >
+                        {logItem.type || 'Info'}
+                      </td>
+                      <td className="w-[70%] text-sm font-bold bg-transparent">
+                        <Tooltip backgroundColor="bg-transparent" label="" placement="bottom">
+                          <button
+                            className="group flex overflow-auto space-x-2 max-w-xl font-mono text-base text-white/80 hover:underline no-scrollbar"
+                            onClick={() => void copy(logItem.message)}
+                            type="button"
+                          >
+                            <span>{logItem.message}</span>
+                            <FaCopy className="opacity-0 group-hover:opacity-100" />
+                          </button>
+                        </Tooltip>
+                      </td>
+                      <td className="w-[20%] font-mono text-base bg-transparent">
+                        {logItem.timestamp ? new Date(logItem.timestamp).toLocaleString() : ''}
+                      </td>
+                      <th className="bg-transparent">
+                        <div className="flex items-center space-x-8">
+                          <Button
+                            className="bg-clip-text border-blue-200"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              removeLogItem(logItem.id)
+                            }}
+                            variant="outline"
+                          >
+                            <FaEraser />
+                          </Button>
+                        </div>
+                      </th>
+                    </tr>
+                    //line break
+                  ))}
+              </tbody>
+            </table>
+            <br />
+          </div>
+          <div className="flex flex-row">
+            <div className="flex justify-start ml-4 w-full">
+              <Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700">
+                <label
+                  className="w-full h-full text-white bg-gray-600 hover:bg-gray-700 rounded border-0 btn modal-button"
+                  htmlFor="my-modal-8"
+                >
+                  Go Back
+                </label>
+              </Button>
+              <Button
+                className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
+                onClick={() => {
+                  window.localStorage.setItem('error_list', '')
+                  setLogItemList([])
+                }}
+              >
+                <label
+                  className="w-full h-full text-white bg-blue-400 hover:bg-blue-500 rounded border-0 btn modal-button"
+                  htmlFor="my-modal-8"
+                >
+                  Clear
+                </label>
+              </Button>
+            </div>
+            <div className="flex justify-end w-full">
+              <Button
+                className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
+                onClick={() => {
+                  const csv = logs.itemList
+                    .map((logItem) => {
+                      return `${logItem.type as string},${logItem.message},${(logItem.timestamp as Date)
+                        .toUTCString()
+                        .replace(',', '')}`
+                    })
+                    .join('\n')
+                  const blob = new Blob([csv], { type: 'text/csv' })
+                  const url = window.URL.createObjectURL(blob)
+                  const a = document.createElement('a')
+                  a.setAttribute('hidden', '')
+                  a.setAttribute('href', url)
+                  a.setAttribute('download', 'studio_logs.csv')
+                  document.body.appendChild(a)
+                  a.click()
+                  document.body.removeChild(a)
+                }}
+              >
+                <label
+                  className="w-full h-full text-white bg-stargaze hover:bg-stargaze/80 rounded border-0 btn modal-button"
+                  htmlFor="my-modal-8"
+                >
+                  Download
+                </label>
+              </Button>
+            </div>
+          </div>
+        </label>
+      </label>
+    </div>
+  )
+}