Merge pull request #210 from P4-Games/feature/linters-prettiers-2

Feature/linters prettiers 2

.eslintignore

@@ -1,4 +1,5 @@
 **/node_modules/*
 **/out/*
 **/.next/*
-**/src/context/abis/*
+**/src/context/abis/*
+**/src/styles/*

.prettierrc

@@ -5,7 +5,7 @@
   "embeddedLanguageFormatting": "auto",
   "htmlWhitespaceSensitivity": "css",
   "insertPragma": false,
-  "jsxSingleQuote": false,
+  "jsxSingleQuote": true,
   "printWidth": 100,
   "proseWrap": "preserve",
   "quoteProps": "as-needed",

README.md

@@ -4,12 +4,10 @@
 ![](https://img.shields.io/badge/Solidity-informational?style=flat&logo=solidity&logoColor=white&color=6aa6f8)
 ![](https://img.shields.io/badge/Hardhat-informational?style=flat&logo=hardhat&logoColor=white&color=6aa6f8)
 
-
 # Number One Fun (NoF)
 
 ![nof-landing](./.doc/images/nof.png)
 
-
 # Build With
 
 - [nextJs Framework](https://nextjs.org/)
@@ -18,7 +16,6 @@
 
 - [NoF Live Demo](https://nof.town)
 
-
 # Requirements
 
 ## Software
@@ -30,7 +27,6 @@ This App requires:
 - [mongo db](https://www.mongodb.com/docs/manual/installation/) (It will be used for endpoints that are consumed from the discord bot)
 - [metamask](https://metamask.io/download/)
 
-
 ## Environment variables
 
 Create a .env file running the command in terminal
@@ -139,7 +135,7 @@ The application uses a linter for commit messages, requiring them to be specifie
 - type: :icono: message
 ```
 
-Example: 
+Example:
 
 ```
 - commit -m chore: add commitlinter
@@ -164,7 +160,6 @@ The allowed standard types are:
 
 Failing to comply with these standards will cause the pre-commit to fail. To remove the last commit (without losing changes), run:
 
-
 ```sh
 git reset --soft HEAD~1
 ```

package.json

@@ -14,7 +14,7 @@
     "re-build": "rm -rf .next node_modules && yarn install && yarn build",
     "lint": "next lint",
     "lint:fix": "eslint --fix --ext .js,.jsx,.scss .",
-    "prettier": "./node_modules/.bin/prettier --write \"{,!(node_modules)/**/}*.{js,scss,tsx}\"",
+    "prettier": "./node_modules/.bin/prettier --write \"{,!(node_modules)/**/}*.{js,jsx,md,scss,tsx}\"",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm install -g generate-changelog yarn install-peerdeps",
     "git-prune": "git remote prune origin",
     "git-config": "git config --global core.autocrlf true",
@@ -48,6 +48,7 @@
     "nes.css": "^2.3.0",
     "next": "13.0.1",
     "next-i18next": "^15.0.0",
+    "page-flip": "^2.0.7",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -96,8 +97,9 @@
   "pre-commit": {
     "precommit.silent": true,
     "run": [
-      "prettier",
-      "commitlint-check-comit-msg"
+      "commitlint-check-comit-msg",
+      "lint:fix",
+      "prettier"
     ]
   }
 }

src/components/CustomImage/CustomImage.jsx

@@ -1,20 +1,18 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
-function CustomImage ({ src, alt, className }) {
-  const [error, setError] = useState(false);
-  const defaultImage =  '/images/common/no-image.png'
+function CustomImage({ src, alt, className }) {
+  const [error, setError] = useState(false)
+  const defaultImage = '/images/common/no-image.png'
 
   const handleError = () => {
     setError(true)
   }
 
-  return (
-    error ? (
-      <img src={defaultImage} alt='default image' className={className}  />
-    ) : (
-      <img src={src} alt={alt || 'img'} className={className}  onError={handleError} />
-    )
+  return error ? (
+    <img src={defaultImage} alt='default image' className={className} />
+  ) : (
+    <img src={src} alt={alt || 'img'} className={className} onError={handleError} />
   )
 }
 

src/components/FlipBook/FlipBook.jsx

@@ -8,9 +8,7 @@ const FlipBook = ({ showClose, onCloseClick, pages, mainClassName = 'hero__top__
   const [isClassesReplaced, setIsClassesReplaced] = useState(false)
 
   const CloseButton = () => (
-    <div
-      className='gamma_info_card_close'
-      onClick={() => onCloseClick()}>
+    <div className='gamma_info_card_close' onClick={() => onCloseClick()}>
       X
     </div>
   )
@@ -19,7 +17,7 @@ const FlipBook = ({ showClose, onCloseClick, pages, mainClassName = 'hero__top__
     // Cambiar las clases después de un tiempo de carga simulado (0.5 mSeg),
     // es para evitar un efecto de parpadeo no deseado por htmlFlipBook
     const timer = setTimeout(() => {
-      setIsClassesReplaced(true);
+      setIsClassesReplaced(true)
     }, 0.5)
 
     // Limpiar el temporizador para evitar fugas de memoria
@@ -42,29 +40,30 @@ const FlipBook = ({ showClose, onCloseClick, pages, mainClassName = 'hero__top__
           ref={bookRef}
           usePortrait={windowSize.size}
           drawShadow={false}
-          className= 'hero__top__album__book'
+          className='hero__top__album__book'
         >
-
           {pages.map((content, index) => (
             <div
               key={`page-${index}`}
               className={
                 index % 2 === 0
-                ? (isClassesReplaced ? 'hero__top__album__book__page' : '')
-                : (isClassesReplaced ? 'hero__top__album__book__page0' : '')
+                  ? isClassesReplaced
+                    ? 'hero__top__album__book__page'
+                    : ''
+                  : isClassesReplaced
+                  ? 'hero__top__album__book__page0'
+                  : ''
               }
               data-density='hard'
               number={index + 1}
             >
               <div className='hero__top__album__book__page__page-content'>
                 {index % 2 === 0 ? (
-                  <React.Fragment>
-                  { content }
-                  </React.Fragment>
+                  <React.Fragment>{content}</React.Fragment>
                 ) : (
                   <React.Fragment>
-                    { showClose && <CloseButton /> }
-                    { content }
+                    {showClose && <CloseButton />}
+                    {content}
                   </React.Fragment>
                 )}
               </div>

src/components/Footer/Footer.jsx

@@ -2,40 +2,44 @@ import React from 'react'
 import FooterButtons from './FooterButtons'
 import { useLayoutContext } from '../../hooks'
 
-function Footer () {
-
+function Footer() {
   const { mobile, turnNextPage, turnPrevPage } = useLayoutContext()
-  
+
   const openNewWindow = () => {
     window.open('https://tama.nof.town/', '_blank')
   }
-  
+
   return (
     <div className='footer'>
-      {!mobile && 
-      <>
-        <div className='footer__insert' onClick={openNewWindow}>
-          <></>
-        </div>
-        <div className='footer__handle__green' onClick={turnPrevPage}>
-          <></>
-        </div>
-      </>}
+      {!mobile && (
+        <>
+          <div className='footer__insert' onClick={openNewWindow}>
+            <></>
+          </div>
+          <div className='footer__handle__green' onClick={turnPrevPage}>
+            <></>
+          </div>
+        </>
+      )}
       <FooterButtons />
-      {!mobile && 
-      <>
-        <div className='footer__handle__red' onClick={turnNextPage}>
-          <></>
-        </div>
-        <div className='footer__text'>
-          <p>
-            Number One Fan &<br />
-            <br />P4 Tech Solutions <br />
-            <br />Copyright © 2022 <br />
-            <br />all rights reserved.
-          </p>
-        </div>
-      </>}
+      {!mobile && (
+        <>
+          <div className='footer__handle__red' onClick={turnNextPage}>
+            <></>
+          </div>
+          <div className='footer__text'>
+            <p>
+              Number One Fan &<br />
+              <br />
+              P4 Tech Solutions <br />
+              <br />
+              Copyright © 2022 <br />
+              <br />
+              all rights reserved.
+            </p>
+          </div>
+        </>
+      )}
     </div>
   )
 }

src/components/Footer/FooterButtons.jsx

@@ -2,58 +2,85 @@ import React from 'react'
 import Link from 'next/link'
 import { useLayoutContext } from '../../hooks'
 
-function FooterButtons () {
-  const { showDefaultButtons, showButtons, buttonFunctions, footerButtonsClasses } = useLayoutContext()
+function FooterButtons() {
+  const { showDefaultButtons, showButtons, buttonFunctions, footerButtonsClasses } =
+    useLayoutContext()
 
   const DefaultButtons = () => (
     <div className='footer__buttons'>
-      <Link href='https://twitter.com/NOFtoken' target='_blank' rel='noreferrer' className='footer__buttons__bluebtn_default' />
-      <Link href='https://www.instagram.com/nof.token/' target='_blank' rel='noreferrer' className='footer__buttons__greenbtn_default' />
-      <Link href='https://discord.gg/4Bvp5bVmCz' target='_blank' rel='noreferrer' className='footer__buttons__redbtn_default' />
-      <Link href='https://t.me/+8BH1tsgrPmo1M2Zh' target='_blank' rel='noreferrer' className='footer__buttons__yellowbtn_default' />
+      <Link
+        href='https://twitter.com/NOFtoken'
+        target='_blank'
+        rel='noreferrer'
+        className='footer__buttons__bluebtn_default'
+      />
+      <Link
+        href='https://www.instagram.com/nof.token/'
+        target='_blank'
+        rel='noreferrer'
+        className='footer__buttons__greenbtn_default'
+      />
+      <Link
+        href='https://discord.gg/4Bvp5bVmCz'
+        target='_blank'
+        rel='noreferrer'
+        className='footer__buttons__redbtn_default'
+      />
+      <Link
+        href='https://t.me/+8BH1tsgrPmo1M2Zh'
+        target='_blank'
+        rel='noreferrer'
+        className='footer__buttons__yellowbtn_default'
+      />
     </div>
   )
 
   const CustomButtons = () => (
     <div className='footer__buttons'>
-      {
-        showButtons[0] && buttonFunctions && buttonFunctions[0] &&
-        <div 
-          onClick={ () => { buttonFunctions[0]() }} 
-          className={footerButtonsClasses[0] ?? 'footer__buttons__bluebtn_custom'}>
+      {showButtons[0] && buttonFunctions && buttonFunctions[0] && (
+        <div
+          onClick={() => {
+            buttonFunctions[0]()
+          }}
+          className={footerButtonsClasses[0] ?? 'footer__buttons__bluebtn_custom'}
+        >
           <></>
         </div>
-      }
-      {
-        showButtons[1] && buttonFunctions && buttonFunctions[1] &&
-        <div 
-          onClick={ () => { buttonFunctions[1]() }} 
-          className={footerButtonsClasses[1] ?? 'footer__buttons__greenbtn_custom'}>
+      )}
+      {showButtons[1] && buttonFunctions && buttonFunctions[1] && (
+        <div
+          onClick={() => {
+            buttonFunctions[1]()
+          }}
+          className={footerButtonsClasses[1] ?? 'footer__buttons__greenbtn_custom'}
+        >
           <></>
         </div>
-      }
-      {
-        showButtons[2] && buttonFunctions && buttonFunctions[2] &&
-        <div 
-          onClick={ () => { buttonFunctions[2]() }} 
-          className={footerButtonsClasses[2] ?? 'footer__buttons__redbtn_custom'}>
+      )}
+      {showButtons[2] && buttonFunctions && buttonFunctions[2] && (
+        <div
+          onClick={() => {
+            buttonFunctions[2]()
+          }}
+          className={footerButtonsClasses[2] ?? 'footer__buttons__redbtn_custom'}
+        >
           <></>
         </div>
-      }
-      {
-        showButtons[3] && buttonFunctions && buttonFunctions[3] &&
-        <div 
-          onClick={ () => { buttonFunctions[3]() }} 
-          className={footerButtonsClasses[3] ?? 'footer__buttons__yellowbtn_custom'}>
+      )}
+      {showButtons[3] && buttonFunctions && buttonFunctions[3] && (
+        <div
+          onClick={() => {
+            buttonFunctions[3]()
+          }}
+          className={footerButtonsClasses[3] ?? 'footer__buttons__yellowbtn_custom'}
+        >
           <></>
         </div>
-      }
+      )}
     </div>
   )
 
-  return (
-    showDefaultButtons ? <DefaultButtons/> : <CustomButtons/> 
-  )
+  return showDefaultButtons ? <DefaultButtons /> : <CustomButtons />
 }
 
 export default FooterButtons

src/components/Head/NofHead.jsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import Head from 'next/head'
 
-function NofHead () {
+function NofHead() {
   return (
     <Head>
       <title>Number One Fan</title>
       <meta name='description' content='Number One Fan' />
-      <meta
-        name='viewport'
-        content='width=device-width, initial-scale=1.0'
-      />
+      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
       <link rel='icon' href='/favicon.ico' />
     </Head>
   )