Merge pull request MyArtverse-Project#24 from skepfusky/main

Updated packages and more refactoring

.github/workflows/dependabot.yml

@@ -0,0 +1,15 @@
+version: 2
+
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: monthly
+      time: "00:00"
+    open-pull-requests-limit: 3
+    assignees:
+      - VulpoTheDev
+    commit-message:
+      prefix: fix
+      prefix-development: chore
+      include: scope

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+**/.next/**
+**/_next/**

.prettierrc

@@ -1,11 +1,11 @@
 {
-  "tabWidth": 2,
-  "useTabs": false,
-  "insertSpaces": true,
-  "cursorStyle": "line",
-  "lineNumbers": true,
-  "folding": true,
-  "matchBrackets": true,
-  "trailingComma": "none",
-  "semi": false
-}
+	"tabWidth": 2,
+	"useTabs": false,
+	"insertSpaces": true,
+	"cursorStyle": "line",
+	"lineNumbers": true,
+	"folding": true,
+	"matchBrackets": true,
+	"trailingComma": "none",
+	"semi": false
+}

next.config.js

@@ -1,23 +1,25 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  compress: true,
-  swcMinify: true,
-  webpack: {
-    optimizeCSS: true,
-  },
-};
+module.exports = async (phase) => {
+	const withPlugins = require("next-compose-plugins")
 
-module.exports = nextConfig;
+	const runtimeCaching = require("next-pwa/cache")
+	runtimeCaching[0].handler = "StaleWhileRevalidate"
 
-const PWASupport = require("next-pwa");
+	const withPWA = require("next-pwa")({
+		disable: process.env.NODE_ENV === 'development', // disable PWA for development, compiling takes ages
+		dest: "public",
+		register: true,
+		skipWaiting: true,
+		sw: "./public/service-worker.js",
+	})
 
-module.exports = PWASupport({
-  pwa: {
-    disable: process.env.NODE_ENV === 'development', // disable PWA for development, compiling takes ages
-    dest: "public",
-    register: true,
-    skipWaiting: true,
-    sw: "./public/service-worker.js",
-  },
-});
+	const nextConfig = {
+		reactStrictMode: true,
+		compress: true,
+		swcMinify: true,
+	}
+
+	const defaultConfig = {}
+
+	return withPlugins([withPWA], nextConfig)(phase, { defaultConfig })
+}

package.json

@@ -1,40 +1,45 @@
 {
-  "name": "j",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "typescript:check": "./node_modules/.bin/tsc --noEmit"
-  },
-  "dependencies": {
-    "@faker-js/faker": "^6.0.0",
-    "@next-auth/mongodb-adapter": "^1.0.3",
-    "@typegoose/typegoose": "^9.7.1",
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "cypress": "^10.3.1",
-    "mongodb": "^4.5.0",
-    "mongoose": "^6.2.8",
-    "next": "12.1.1",
-    "next-auth": "^4.3.4",
-    "next-pwa": "^5.5.2",
-    "nodemailer": "^6.7.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intersection-observer": "^9.3.5",
-    "sass": "^1.49.9",
-    "swr": "^1.2.2",
-    "typescript": "^4.6.3"
-  },
-  "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "eslint": "8.12.0",
-    "eslint-config-next": "12.1.1"
-  }
+	"name": "myfursona",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "concurrently -k -n next,tsc \"next dev\" \"tsc --watch --preserveWatchOutput --noEmit\"",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint && npm run prettier:write",
+		"typescript:check": "./node_modules/.bin/tsc --noEmit",
+		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+		"prettier:write": "prettier --write \"**/*.{ts,tsx}\""
+	},
+	"dependencies": {
+		"@faker-js/faker": "^7.5.0",
+		"@fortawesome/fontawesome-svg-core": "^6.2.0",
+		"@fortawesome/free-brands-svg-icons": "^6.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.2.0",
+		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@next-auth/mongodb-adapter": "^1.0.4",
+		"@typegoose/typegoose": "^9.12.0",
+		"@types/node": "^18.7.18",
+		"@types/react": "^18.0.20",
+		"cypress": "^10.8.0",
+		"mongodb": "^4.9.1",
+		"mongoose": "^6.6.1",
+		"next": "^12.3.0",
+		"next-auth": "^4.10.3",
+		"next-pwa": "^5.5.2",
+		"nodemailer": "^6.7.8",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-intersection-observer": "^9.3.5",
+		"sass": "^1.54.9",
+		"swr": "^1.3.0",
+		"typescript": "^4.8.3"
+	},
+	"devDependencies": {
+		"concurrently": "^7.4.0",
+		"eslint": "^8.23.1",
+		"eslint-config-next": "^12.3.0",
+		"next-compose-plugins": "^2.2.1",
+		"prettier": "^2.7.1"
+	}
 }

src/components/Layout.tsx

@@ -1,13 +1,12 @@
-import { ReactChild } from "react"
-import Header from "./Header"
-import Footer from "./Footer"
+import Header from "./layouts/Header"
+import Footer from "./layouts/Footer"
 import UnderConstruction from "./UnderConstruction"
 
-interface Props {
-  children: ReactChild
+interface LayoutProps {
+  children: React.ReactNode
 }
 
-export default function Layout({ children }: Props) {
+export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <UnderConstruction />

src/components/UnderConstruction.tsx

@@ -1,29 +1,24 @@
 import { useEffect, useState } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import {
-  faExclamationTriangle
-} from "@fortawesome/free-solid-svg-icons"
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"
 import Link from "next/link"
 
-export default function UnderConstruction() {
+const UnderConstruction = () => {
   const [showWIP, setShowWIP] = useState(false)
+
   useEffect(() => {
-    setShowWIP(true)
-  }
-  , [])
+    if (localStorage.getItem("hide-wip-notice") !== "true") {
+      setShowWIP(true)
+    }
+  }, [])
 
-  const toggleWIP = () => {
-    setShowWIP(!showWIP)
+  const hideNotice = () => {
+    setShowWIP(false)
+    localStorage.setItem("hide-wip-notice", "true")
   }
 
   return (
-    <div
-      className={
-        showWIP !== false
-          ? "wip-notice"
-          : "wip-notice hidden"
-      }
-    >
+    <div className={showWIP !== false ? "wip-notice" : "wip-notice hidden"}>
       <FontAwesomeIcon icon={faExclamationTriangle} size="lg" />
       <strong>This project is currently under construction.</strong>
       <span>
@@ -34,9 +29,11 @@ export default function UnderConstruction() {
         </Link>
         !
       </span>
-      <button id="dismiss-btn" onClick={toggleWIP}>
+      <button id="dismiss-btn" onClick={hideNotice}>
         Close
       </button>
     </div>
   )
 }
+
+export default UnderConstruction

src/components/ArtCarousel.tsx → src/components/carousel/ArtCarousel.tsx

@@ -1,15 +1,15 @@
-import GalleryItem, { LoadingGalleryItem } from "./GalleryItem"
+import GalleryItem, { LoadingGalleryItem } from "../gallery/GalleryItem"
 import styles from "@/styles/ArtCarousel.module.scss"
 import { useRef } from "react"
-import Artwork from "./Artwork"
+import Artwork from "../gallery/Artwork"
 import { readdir } from "fs"
 
 interface IArtCarouselProps {
   title: string
   images?: Fursona[]
 }
 
-const ArtCarousel = ({ title, images = [] }: IArtCarouselProps) => {
+export default function ArtCarousel({ title, images = [] }: IArtCarouselProps) {
   return (
     <div id={styles["carousel-comp"]}>
       <h2>{title}</h2>
@@ -27,4 +27,3 @@ const ArtCarousel = ({ title, images = [] }: IArtCarouselProps) => {
     </div>
   )
 }
-export default ArtCarousel

src/components/CardCarousel.tsx → src/components/carousel/CardCarousel.tsx

@@ -1,16 +1,20 @@
 import { useRef } from "react"
-import GalleryItem, { LoadingGalleryItem } from "./GalleryItem"
+import GalleryItem, { LoadingGalleryItem } from "../gallery/GalleryItem"
 import styles from "@/styles/Carousel.module.scss"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"
 
-interface ICarouselProps {
+interface CarouselProps {
   title: string
   type: "normal" | "popular" | "new"
   items?: Fursona[]
 }
 
-const CardCarousel = ({ title, type, items = [] }: ICarouselProps) => {
+export default function CardCarousel({
+  title,
+  type,
+  items = []
+}: CarouselProps) {
   const carouselRef = useRef<HTMLDivElement>(null)
 
   const scrollLeft = () => {
@@ -77,4 +81,3 @@ const CardCarousel = ({ title, type, items = [] }: ICarouselProps) => {
     </div>
   )
 }
-export default CardCarousel

src/styles/Carousel.module.scss → src/components/carousel/Carousel.module.scss

@@ -1,4 +1,4 @@
-@use "partials/mixins" as *;
+@use "@/styles/partials/mixins" as *;
 
 #carousel {
   @include flexbox(column, center);

src/components/CarouselMenu.tsx → src/components/carousel/CarouselMenu.tsx

@@ -1,16 +1,20 @@
 import { useRef } from "react"
-import GalleryItem, { LoadingGalleryItem } from "./GalleryItem"
-import styles from "../styles/Carousel.module.scss"
+import GalleryItem, { LoadingGalleryItem } from "../gallery/GalleryItem"
+import styles from "./Carousel.module.scss"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"
 
-interface ICarouselProps {
+interface CarouselProps {
   title: string
   type: "normal" | "popular" | "new"
   items?: Fursona[]
 }
 
-const CardCarousel = ({ title, type, items = [] }: ICarouselProps) => {
+export default function CardCarousel({
+  title,
+  type,
+  items = []
+}: CarouselProps) {
   const carouselRef = useRef<HTMLDivElement>(null)
 
   const scrollLeft = () => {
@@ -79,4 +83,3 @@ const CardCarousel = ({ title, type, items = [] }: ICarouselProps) => {
     </div>
   )
 }
-export default CardCarousel

src/components/Artwork.tsx → src/components/gallery/Artwork.tsx

@@ -1,14 +1,14 @@
-import styles from '../styles/Artworks.module.scss'
+import styles from "./Artwork.module.scss"
 
 interface ArtworkProps {
   image: string
 }
 
-export default function Artwork({ image }) {
+export default function Artwork({ image }: ArtworkProps) {
   // TODO: Make a Popup modal of the image
   return (
     <div id={styles["artwork"]}>
-      <img src={image} alt={"Artwork"}  />
+      <img src={image} alt="" />
     </div>
   )
 }

src/styles/GalleryItem.module.scss → src/components/gallery/GalleryItem.module.scss

@@ -1,4 +1,4 @@
-@use "partials/mixins" as *;
+@use "@/styles/partials/mixins" as *;
 
 #galleryItem {
   @include flexbox(column, center, center);