From cb552fe3cb262c2f1b1af8c8aa25cb92eec2a3bf Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sun, 8 May 2022 13:16:06 +1200 Subject: [PATCH 01/17] Change searchbar style --- src/components/Searchbar.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Searchbar.css b/src/components/Searchbar.css index 88da203..37ea277 100644 --- a/src/components/Searchbar.css +++ b/src/components/Searchbar.css @@ -6,6 +6,11 @@ gap: 1rem; width: 30rem; padding-right: 1rem; + + background-color: var(--c-content-background-opaque); + outline: 1px solid var(--c-mid-background); + box-shadow: 0 .5rem 1rem var(--c-shadow); + border-radius: .25rem; } .searchbar__icon { @@ -96,10 +101,6 @@ position: fixed; bottom: 1rem; left: 1rem; - background-color: var(--c-content-background-opaque); - border: 1px solid var(--c-mid-background); - box-shadow: 0 .5rem 1rem var(--c-shadow); - border-radius: .5rem; } .recent--character { From d6e4bdef253318a607519b5dd22347e66983c015 Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sun, 8 May 2022 13:49:44 +1200 Subject: [PATCH 02/17] Update changelog --- changelog.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/changelog.md b/changelog.md index d51df01..face416 100644 --- a/changelog.md +++ b/changelog.md @@ -4,30 +4,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## Unreleased -## [1.2.1] - 2022-04-17 -Moved from **Github Pages** to **AWS Amplify** as pages has problems with single page web applications. +## Released + +## [1.2.1] - 2022-05-08 +Moved from **Github Pages** to **AWS Amplify** as pages has problems with single page web applications. Maintainability update. ### Added -- Added help page. -- Added guide links to profession jobs. -- Added useFetchData custom hook, replaces the useEffect nested async function pattern. +- Added **Help** page. +- Added links to profession jobs. +- Added `useFetchData` custom hook, replaces the `useEffect` nested async function pattern. +- Added media queries for multiple components to improve responsiveness. ### Changes -- Added media queries for multiple components. -- Featured events link will now open a new tab. -- Events will be displayed based on the current date. +- Changed most links to now open in a new tab. +- Only valid events are displayed given the date. - Quests system refactor. Improved maintainability and reduced overhead. ### Fixed -- Quests not appearing when reference character data was not updating. -- Fixed failed search when using the searchbar within a character profile. - -## Released +- Fixed quests not appearing when reference character data was not updating. +- Fixed **404 error** when using the search-bar from a character page. +- Fixed ***open in new tab*** resulting in a **404 error**. ## [1.2.0] - 2022-04-16 - This release contains various new features and support for **Final Fantasy XIV** patch **6.1** '*Newfound Adventure*'. ### Added From 2718f00dbf59bc6a47bab4620c1c07beb05f96bc Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Tue, 10 May 2022 12:48:47 +1200 Subject: [PATCH 03/17] Change directory structure --- changelog.md | 14 +++ src/App.jsx | 16 ++- src/components/Banner.jsx | 2 +- src/components/{utility => }/Bar.jsx | 2 +- src/components/{utility => }/Button.jsx | 2 +- src/components/{utility => }/Checkbox.jsx | 2 +- src/components/{utility => }/Divider.jsx | 2 +- src/components/Featured.jsx | 14 ++- src/components/Footer.jsx | 2 +- src/components/Header.jsx | 4 +- src/components/Item.jsx | 4 +- src/components/JobHeader.jsx | 2 +- src/components/JobItem.jsx | 2 +- src/components/{utility => }/Loading.jsx | 4 +- src/components/Navbar.jsx | 2 +- src/components/{utility => }/Navigator.jsx | 0 src/components/{utility => }/Return.jsx | 0 src/components/Searchbar.jsx | 4 +- .../Achievements.jsx | 10 +- src/{components => containers}/Collection.jsx | 8 +- src/{components => containers}/Jobs.jsx | 17 ++- src/{components => containers}/Profile.jsx | 14 +-- src/{components => containers}/Quests.jsx | 28 ++++- src/pages/Character.jsx | 116 +++++++++--------- src/pages/Help.jsx | 4 +- src/pages/Home.jsx | 4 +- src/pages/Settings.jsx | 19 ++- src/{components => styles}/Achievements.css | 0 src/{ => styles}/App.css | 4 +- src/{components => styles}/Banner.css | 0 src/{components/utility => styles}/Bar.css | 0 src/{components/utility => styles}/Button.css | 0 src/{pages => styles}/Character.css | 0 .../utility => styles}/Checkbox.css | 0 src/{components => styles}/Collection.css | 0 .../utility => styles}/Divider.css | 0 src/{components => styles}/Featured.css | 4 - src/{components => styles}/Footer.css | 0 src/{components => styles}/Header.css | 0 src/{pages => styles}/Home.css | 0 src/{components => styles}/Item.css | 0 src/{components => styles}/Jobs.css | 0 .../utility => styles}/Loading.css | 0 src/{components => styles}/Navbar.css | 0 src/{components => styles}/Profile.css | 0 src/{components => styles}/Quests.css | 0 src/{components => styles}/Searchbar.css | 2 +- src/{pages => styles}/Settings.css | 0 .../utility => styles}/utility.css | 0 49 files changed, 181 insertions(+), 127 deletions(-) rename src/components/{utility => }/Bar.jsx (92%) rename src/components/{utility => }/Button.jsx (95%) rename src/components/{utility => }/Checkbox.jsx (92%) rename src/components/{utility => }/Divider.jsx (74%) rename src/components/{utility => }/Loading.jsx (82%) rename src/components/{utility => }/Navigator.jsx (100%) rename src/components/{utility => }/Return.jsx (100%) rename src/{components => containers}/Achievements.jsx (89%) rename src/{components => containers}/Collection.jsx (94%) rename src/{components => containers}/Jobs.jsx (92%) rename src/{components => containers}/Profile.jsx (96%) rename src/{components => containers}/Quests.jsx (94%) rename src/{components => styles}/Achievements.css (100%) rename src/{ => styles}/App.css (97%) rename src/{components => styles}/Banner.css (100%) rename src/{components/utility => styles}/Bar.css (100%) rename src/{components/utility => styles}/Button.css (100%) rename src/{pages => styles}/Character.css (100%) rename src/{components/utility => styles}/Checkbox.css (100%) rename src/{components => styles}/Collection.css (100%) rename src/{components/utility => styles}/Divider.css (100%) rename src/{components => styles}/Featured.css (94%) rename src/{components => styles}/Footer.css (100%) rename src/{components => styles}/Header.css (100%) rename src/{pages => styles}/Home.css (100%) rename src/{components => styles}/Item.css (100%) rename src/{components => styles}/Jobs.css (100%) rename src/{components/utility => styles}/Loading.css (100%) rename src/{components => styles}/Navbar.css (100%) rename src/{components => styles}/Profile.css (100%) rename src/{components => styles}/Quests.css (100%) rename src/{components => styles}/Searchbar.css (98%) rename src/{pages => styles}/Settings.css (100%) rename src/{components/utility => styles}/utility.css (100%) diff --git a/changelog.md b/changelog.md index face416..a5ec5d7 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## Unreleased +## [1.2.2] - 2022-05-08 + +### Added + +### Changes + +- Changed directory structure. + +### Fixed + +- Fixed title not changing to **XIV Tracker |** `` when viewing character profile. + + + ## Released ## [1.2.1] - 2022-05-08 diff --git a/src/App.jsx b/src/App.jsx index 215f8eb..a2baf21 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,8 @@ +// Hooks import { useEffect, useState } from 'react'; + +// Components import { BrowserRouter, Routes, Route} from 'react-router-dom'; import Home from './pages/Home'; import Character from './pages/Character'; @@ -7,12 +10,17 @@ import Settings from './pages/Settings'; import Help from './pages/Help'; import Navbar from './components/Navbar'; import Footer from './components/Footer'; -import Loading from './components/utility/Loading'; +import Loading from './components/Loading'; + +// Data import themesJSON from './data/themes.json'; import settingsJSON from './data/settings.json'; -import './App.css'; -import './components/utility/utility.css'; +// Styles +import './styles/App.css'; +import './styles/utility.css'; + +// Assets import darkARealmRebornSplash from './images/splash/dark/a-realm-reborn.png'; import darkHeavenswardSplash from './images/splash/dark/heavensward.png'; import darkStormbloodSplash from './images/splash/dark/stormblood.png'; @@ -92,7 +100,7 @@ const App = () => { "referenceData": referenceCharacter })); - }, [theme, splash, referenceCharacter]) + }, [theme, splash, referenceCharacter, personalized]) return ( diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index a37dec0..d1f6edc 100644 --- a/src/components/Banner.jsx +++ b/src/components/Banner.jsx @@ -1,4 +1,4 @@ -import './Banner.css'; +import '../styles/Banner.css'; import { Link } from 'react-router-dom'; import { ImDiamonds } from 'react-icons/im'; diff --git a/src/components/utility/Bar.jsx b/src/components/Bar.jsx similarity index 92% rename from src/components/utility/Bar.jsx rename to src/components/Bar.jsx index e22e3bd..eacbf11 100644 --- a/src/components/utility/Bar.jsx +++ b/src/components/Bar.jsx @@ -1,4 +1,4 @@ -import './Bar.css'; +import '../styles/Bar.css'; const Bar = (props) => { return (
diff --git a/src/components/utility/Button.jsx b/src/components/Button.jsx similarity index 95% rename from src/components/utility/Button.jsx rename to src/components/Button.jsx index 0ce264f..5d20226 100644 --- a/src/components/utility/Button.jsx +++ b/src/components/Button.jsx @@ -1,4 +1,4 @@ -import './Button.css'; +import '../styles/Button.css'; const Button = (props) => { return( diff --git a/src/components/utility/Checkbox.jsx b/src/components/Checkbox.jsx similarity index 92% rename from src/components/utility/Checkbox.jsx rename to src/components/Checkbox.jsx index ab3ffe8..5ef4c2d 100644 --- a/src/components/utility/Checkbox.jsx +++ b/src/components/Checkbox.jsx @@ -1,4 +1,4 @@ -import './Checkbox.css'; +import '../styles/Checkbox.css'; const Checkbox = (props) => { return (
{ return (
); } diff --git a/src/components/Featured.jsx b/src/components/Featured.jsx index f35d59b..f27ac43 100644 --- a/src/components/Featured.jsx +++ b/src/components/Featured.jsx @@ -1,14 +1,20 @@ -import './Featured.css'; +// Hooks import { useState, useEffect, useRef } from 'react'; -import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; + +// Data import featureJSON from '../data/feature.json'; +// Assets +import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import endwalkerBanner from '../images/featured/endwalker.png'; import newfoundAdventureBanner from '../images/featured/newfound-adventure.png'; import littleLadiesDayBanner from '../images/featured/little-ladies-day.png'; import moogleTreasureTroveBanner from '../images/featured/moogle-treasure-trove.png'; import hatchingTideBanner from '../images/featured/hatching-tide.png'; +// Styles +import '../styles/Featured.css'; + const banner = [ endwalkerBanner, newfoundAdventureBanner, @@ -65,8 +71,8 @@ const Featured = () => { bottom: '1rem', left: '1rem' }}> -

{events[index].date}

-

{events[index].title}

+

{events[index].date}

+

{events[index].title}

diff --git a/src/pages/Help.jsx b/src/pages/Help.jsx index 8ea4baa..310600e 100644 --- a/src/pages/Help.jsx +++ b/src/pages/Help.jsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; -import Divider from "../components/utility/Divider"; -import Return from "../components/utility/Return"; +import Divider from "../components/Divider"; +import Return from "../components/Return"; const Help = (props) => { diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 6a7709b..0be8a0e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'; import Searchbar from '../components/Searchbar'; import Banner from '../components/Banner'; import Featured from '../components/Featured'; -import Loading from '../components/utility/Loading'; +import Loading from '../components/Loading'; import brandIcon from '../images/brand-extended.png'; -import './Home.css'; +import '../styles/Home.css'; const Home = (props) => { const [results, setResults] = useState(null); diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx index 28496a0..ae03b74 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/Settings.jsx @@ -1,12 +1,19 @@ -import './Settings.css'; +// Hooks import { useState, useEffect } from 'react'; + +// Assets import { BsChevronDown, BsChevronUp } from 'react-icons/bs'; -import Button from '../components/utility/Button'; + +// Components +import Button from '../components/Button'; import Banner from '../components/Banner'; -import Divider from '../components/utility/Divider'; -import Loading from '../components/utility/Loading'; -import Checkbox from '../components/utility/Checkbox'; -import Return from '../components/utility/Return'; +import Divider from '../components/Divider'; +import Loading from '../components/Loading'; +import Checkbox from '../components/Checkbox'; +import Return from '../components/Return'; + +// Styles +import '../styles/Settings.css'; const splashName = [ 'None', diff --git a/src/components/Achievements.css b/src/styles/Achievements.css similarity index 100% rename from src/components/Achievements.css rename to src/styles/Achievements.css diff --git a/src/App.css b/src/styles/App.css similarity index 97% rename from src/App.css rename to src/styles/App.css index 042f909..03e5121 100644 --- a/src/App.css +++ b/src/styles/App.css @@ -14,12 +14,12 @@ @font-face { font-family: 'Comfortaa'; - src: url('fonts/Comfortaa.ttf'); + src: url('../fonts/Comfortaa.ttf'); } @font-face { font-family: 'Montserrat'; - src: url('fonts/Montserrat.ttf'); + src: url('../fonts/Montserrat.ttf'); } body { diff --git a/src/components/Banner.css b/src/styles/Banner.css similarity index 100% rename from src/components/Banner.css rename to src/styles/Banner.css diff --git a/src/components/utility/Bar.css b/src/styles/Bar.css similarity index 100% rename from src/components/utility/Bar.css rename to src/styles/Bar.css diff --git a/src/components/utility/Button.css b/src/styles/Button.css similarity index 100% rename from src/components/utility/Button.css rename to src/styles/Button.css diff --git a/src/pages/Character.css b/src/styles/Character.css similarity index 100% rename from src/pages/Character.css rename to src/styles/Character.css diff --git a/src/components/utility/Checkbox.css b/src/styles/Checkbox.css similarity index 100% rename from src/components/utility/Checkbox.css rename to src/styles/Checkbox.css diff --git a/src/components/Collection.css b/src/styles/Collection.css similarity index 100% rename from src/components/Collection.css rename to src/styles/Collection.css diff --git a/src/components/utility/Divider.css b/src/styles/Divider.css similarity index 100% rename from src/components/utility/Divider.css rename to src/styles/Divider.css diff --git a/src/components/Featured.css b/src/styles/Featured.css similarity index 94% rename from src/components/Featured.css rename to src/styles/Featured.css index 50b192b..2c2f9cb 100644 --- a/src/components/Featured.css +++ b/src/styles/Featured.css @@ -24,10 +24,6 @@ height: 100%; } -.featured__overlay p { - color: #d9dfe4; -} - .featured__banners { z-index: -1; display: flex; diff --git a/src/components/Footer.css b/src/styles/Footer.css similarity index 100% rename from src/components/Footer.css rename to src/styles/Footer.css diff --git a/src/components/Header.css b/src/styles/Header.css similarity index 100% rename from src/components/Header.css rename to src/styles/Header.css diff --git a/src/pages/Home.css b/src/styles/Home.css similarity index 100% rename from src/pages/Home.css rename to src/styles/Home.css diff --git a/src/components/Item.css b/src/styles/Item.css similarity index 100% rename from src/components/Item.css rename to src/styles/Item.css diff --git a/src/components/Jobs.css b/src/styles/Jobs.css similarity index 100% rename from src/components/Jobs.css rename to src/styles/Jobs.css diff --git a/src/components/utility/Loading.css b/src/styles/Loading.css similarity index 100% rename from src/components/utility/Loading.css rename to src/styles/Loading.css diff --git a/src/components/Navbar.css b/src/styles/Navbar.css similarity index 100% rename from src/components/Navbar.css rename to src/styles/Navbar.css diff --git a/src/components/Profile.css b/src/styles/Profile.css similarity index 100% rename from src/components/Profile.css rename to src/styles/Profile.css diff --git a/src/components/Quests.css b/src/styles/Quests.css similarity index 100% rename from src/components/Quests.css rename to src/styles/Quests.css diff --git a/src/components/Searchbar.css b/src/styles/Searchbar.css similarity index 98% rename from src/components/Searchbar.css rename to src/styles/Searchbar.css index 37ea277..eedd1a5 100644 --- a/src/components/Searchbar.css +++ b/src/styles/Searchbar.css @@ -10,7 +10,7 @@ background-color: var(--c-content-background-opaque); outline: 1px solid var(--c-mid-background); box-shadow: 0 .5rem 1rem var(--c-shadow); - border-radius: .25rem; + border-radius: .5rem; } .searchbar__icon { diff --git a/src/pages/Settings.css b/src/styles/Settings.css similarity index 100% rename from src/pages/Settings.css rename to src/styles/Settings.css diff --git a/src/components/utility/utility.css b/src/styles/utility.css similarity index 100% rename from src/components/utility/utility.css rename to src/styles/utility.css From 4d8399518f8ebb61c61c912dc5a0e065cdd908f8 Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Tue, 10 May 2022 20:59:04 +1200 Subject: [PATCH 04/17] Change button style --- src/index.js | 3 --- src/pages/Character.jsx | 5 ----- src/styles/Button.css | 36 +++++++----------------------------- src/styles/Character.css | 5 +++-- 4 files changed, 10 insertions(+), 39 deletions(-) diff --git a/src/index.js b/src/index.js index 5740dbf..5010577 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); diff --git a/src/pages/Character.jsx b/src/pages/Character.jsx index 5c3c086..57cb659 100644 --- a/src/pages/Character.jsx +++ b/src/pages/Character.jsx @@ -98,31 +98,26 @@ const Character = (props) => { { // Disable searchbar on navbar. props.setShowSearchbar(false); - console.log(results==null); }, []); return ( diff --git a/src/styles/App.css b/src/styles/App.css index 03e5121..fcb54c9 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -74,7 +74,6 @@ button { background-color: transparent; padding: 0; color: var(--c-minor-text); - transition: color .25s, box-shadow .25s; } button:hover { diff --git a/src/styles/Button.css b/src/styles/Button.css index 77943fc..6e2c16f 100644 --- a/src/styles/Button.css +++ b/src/styles/Button.css @@ -1,39 +1,23 @@ .button { overflow: hidden; position: relative; + border-radius: .25rem; padding: 1rem; - color: var(--c-minor-text); border: 1px solid var(--c-mid-background); - background-color: var(--c-content-background); - border-radius: .25rem; + color: var(--c-minor-text); width: 100%; - transition: color .25s; } .button--active { color: white; - box-shadow: 0 .5rem 1rem var(--c-shadow); + background-color: var(--c-mid-background) !important; } .button:hover { color: white; - box-shadow: 0 .5rem 1rem var(--c-shadow); -} - -.button__overlay { - z-index: -1; - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - background-color: var(--c-accent); - transition: opacity .25s; + background-color: var(--c-mid-background); } -.button:hover .button__overlay { - opacity: 1; +.button--nav { + border: none; } - -.button__overlay--active { - opacity: 1; -} \ No newline at end of file diff --git a/src/styles/Character.css b/src/styles/Character.css index e03b847..2c1d5aa 100644 --- a/src/styles/Character.css +++ b/src/styles/Character.css @@ -8,10 +8,12 @@ .character__nav { display: flex; - gap: 1rem; - /* border: 1px solid var(--c-mid-background); - border-radius: .5rem; - background-color: var(--c-content-background); */ + overflow: hidden; + padding: .5rem; + gap: .5rem; + border: 1px solid var(--c-mid-background); + border-radius: .25rem; + background-color: var(--c-content-background); } .section { diff --git a/src/styles/Searchbar.css b/src/styles/Searchbar.css index eedd1a5..a71e044 100644 --- a/src/styles/Searchbar.css +++ b/src/styles/Searchbar.css @@ -54,13 +54,13 @@ .recent__profile { display: flex; align-items: center; - gap: .5rem; + gap: 1rem; padding: .5rem; border-radius: .25rem; } .recent__profile:hover { - background-color: var(--c-accent); + background-color: var(--c-mid-background); color: white; } @@ -82,7 +82,7 @@ .recent__servers div:hover { cursor: pointer; - background-color: var(--c-accent); + background-color: var(--c-mid-background); color: white; } From 2a6f3735c4c3f06d61b2563a11db0c2b362d9356 Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sat, 25 Jun 2022 18:57:22 +1200 Subject: [PATCH 07/17] Add default profile icon to navbar --- src/components/Navbar.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index f38c8d4..0593a2a 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -3,6 +3,7 @@ import '../styles/Navbar.css'; import { Link } from 'react-router-dom'; import { RiSettings3Line } from 'react-icons/ri'; import { BiHelpCircle } from 'react-icons/bi'; +import { CgProfile } from 'react-icons/cg'; import Searchbar from './Searchbar'; const Navbar = (props) => { @@ -36,7 +37,18 @@ const Navbar = (props) => { - {profile} + { + props.referenceCharacter !== null ? + + + : + + } + {/* {profile} */} ); } From 4124bae31c3c93089dfa7b8fcd114dbd0e348fdb Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sat, 25 Jun 2022 19:16:01 +1200 Subject: [PATCH 08/17] Add forget reference feature --- src/pages/Settings.jsx | 12 +++++++++++- src/styles/Button.css | 3 ++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx index ae03b74..92fdb4e 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/Settings.jsx @@ -161,7 +161,17 @@ const Settings = (props) => {
} - {referenceBanner} + {referenceBanner} + + { + referenceBanner !== null ? + + : + null + } { isSearching ? : @@ -167,20 +182,8 @@ const Settings = (props) => { - +
{ return (
Glamour Indicator - {props.name + {props.name}/
- {props.name + {props.name}/

{props.name}

diff --git a/src/components/JobHeader.jsx b/src/components/JobHeader.jsx index 6b41e95..419ea97 100644 --- a/src/components/JobHeader.jsx +++ b/src/components/JobHeader.jsx @@ -3,7 +3,7 @@ const JobHeader = (props) => { return (
- +

{props.name}

diff --git a/src/components/JobItem.jsx b/src/components/JobItem.jsx index e3c7385..379827e 100644 --- a/src/components/JobItem.jsx +++ b/src/components/JobItem.jsx @@ -9,9 +9,9 @@ const JobItem = (props) => { style={{gridArea: nameNoGap}} href={link + nameNoGap} > - + job icon

+ className="job__level-text" style={{color: props.level === 90 ? "#f09744" : null}}> {props.level}

@@ -19,7 +19,7 @@ const JobItem = (props) => {

{name}

- {props.level == 90 ? "Max Level" : props.exp[0] + " / " + props.exp[1]} + {props.level === 90 ? "Max Level" : props.exp[0] + " / " + props.exp[1]}

{ - let profile; - if (props.referenceCharacter !== null) { - profile = - - - - } return ( ); } diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx index 9e4e933..f0c5622 100644 --- a/src/components/Searchbar.jsx +++ b/src/components/Searchbar.jsx @@ -27,7 +27,7 @@ const Searchbar = (props) => { return(
- Avatar + character avatar

{char.name}

{char.server}

diff --git a/src/containers/Achievements.jsx b/src/containers/Achievements.jsx index 1870870..36c1e39 100644 --- a/src/containers/Achievements.jsx +++ b/src/containers/Achievements.jsx @@ -1,5 +1,5 @@ // Hooks -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useFetchData } from '../hooks/useFetchData'; // Components @@ -21,28 +21,8 @@ const Achievements = (props) => { const capacity = 8; const {data, loading} = useFetchData("https://xivapi.com/character/" + props.data.ID + "?extended=1&data=AC"); - const [content, setContent] = useState(null); const [index, setIndex] = useState(0); - // Update - useEffect(() => { - if (!loading) { - setContent( -
    - {(data.Achievements.List.slice(index * capacity, (index + 1) * capacity)).map(achievement => - - )} -
- ) - } - }, [index, loading]) - return ( diff --git a/src/pages/Character.jsx b/src/containers/Character.jsx similarity index 94% rename from src/pages/Character.jsx rename to src/containers/Character.jsx index 3639365..eb3e546 100644 --- a/src/pages/Character.jsx +++ b/src/containers/Character.jsx @@ -4,11 +4,11 @@ import { useParams } from 'react-router-dom'; import { useFetchData } from '../hooks/useFetchData'; // Components -import Profile from '../containers/Profile'; -import Jobs from '../containers/Jobs'; -import Collection from '../containers/Collection'; -import Quests from '../containers/Quests'; -import Achievements from '../containers/Achievements'; +import Profile from './Profile'; +import Jobs from './Jobs'; +import Collection from './Collection'; +import Quests from './Quests'; +import Achievements from './Achievements'; import Loading from '../components/Loading'; import Banner from '../components/Banner'; import Button from '../components/Button'; @@ -90,7 +90,7 @@ const Character = (props) => {
} + avatar={character avatar} name={data.Character.Name} title={data.Character.Title.Name} misc={data.Character.Server} diff --git a/src/pages/Help.jsx b/src/containers/Help.jsx similarity index 96% rename from src/pages/Help.jsx rename to src/containers/Help.jsx index 8ac7709..5b77e4c 100644 --- a/src/pages/Help.jsx +++ b/src/containers/Help.jsx @@ -50,8 +50,9 @@ const Help = (props) => { for example, the id for the below character would be 38592216.

lodestone id location help image
diff --git a/src/pages/Home.jsx b/src/containers/Home.jsx similarity index 87% rename from src/pages/Home.jsx rename to src/containers/Home.jsx index 3672af7..5b9e5ea 100644 --- a/src/pages/Home.jsx +++ b/src/containers/Home.jsx @@ -26,12 +26,12 @@ const Home = (props) => { // Create character banners for each valid returned character. setResults(data.Results.map(result => ( } - link={"/" + result.ID} - key={result.ID} + type='search' + name={result.Name} + title={result.Server} + avatar={character avatar} + link={"/" + result.ID} + key={result.ID} /> ))) }); @@ -59,7 +59,7 @@ const Home = (props) => { Brand Logo { isLoading ? diff --git a/src/containers/Profile.jsx b/src/containers/Profile.jsx index dcfc023..2a5fe66 100644 --- a/src/containers/Profile.jsx +++ b/src/containers/Profile.jsx @@ -50,12 +50,12 @@ const Profile = (props) => {

{props.data.Character.GearSet.Attributes.at(-2).Attribute.Name}

{props.data.Character.GearSet.Attributes.at(-2).Value}

- +

{props.data.Character.GearSet.Attributes.at(-1).Attribute.Name}

{props.data.Character.GearSet.Attributes.at(-1).Value}

- +
{Object.values(props.data.Character.GearSet.Attributes).slice(0, -2).map(attribute =>
  • @@ -78,7 +78,7 @@ const Profile = (props) => {

    Grand Company

  • - + grand company rank icon
    {props.data.Character.GrandCompany.Company.Name + ", " + props.data.Character.GrandCompany.Rank.Name}
    • : @@ -87,13 +87,13 @@ const Profile = (props) => {

    Race / Clan / Gender

  • - -
    {props.data.Character.Race.Name + " / " + props.data.Character.Tribe.Name + " / " + (props.data.Character.Gender == 1 ? "Male" : "Female")}
    + gender icon +
    {props.data.Character.Race.Name + " / " + props.data.Character.Tribe.Name + " / " + (props.data.Character.Gender === 1 ? "Male" : "Female")}

    • City-state

  • - + town icon
    {props.data.Character.Town.Name}

    • Nameday

    @@ -104,11 +104,11 @@ const Profile = (props) => {

    Guardian Diety

  • - + diety icon
    {props.data.Character.GuardianDeity.Name}
    • { - props.data.FreeCompany == null ? + props.data.FreeCompany === null ? null : <>

    Free Company

    @@ -117,9 +117,9 @@ const Profile = (props) => { type='free-company' avatar={
    - - - + + +
    } fc={props.data.FreeCompany.Crest} diff --git a/src/pages/Settings.jsx b/src/containers/Settings.jsx similarity index 100% rename from src/pages/Settings.jsx rename to src/containers/Settings.jsx diff --git a/src/data/themes.json b/src/data/themes.json index 128eda5..30a0118 100644 --- a/src/data/themes.json +++ b/src/data/themes.json @@ -3,17 +3,15 @@ "name": "Light", "id": 0, "colors": { - "--c-background": "#e6e6e6", - "--c-content-background": "rgb(243, 242, 242, 0.5)", - "--c-content-background-opaque": "#ede8e7", - "--c-mid-background": "#d0d2d4", - "--c-notice-background": "#2c2e35", - "--c-minor-text": "#738094", - "--c-mid-text": "#526074", - "--c-major-text": "#3d4250", + "--c-background": "#ffffff", + "--c-content-background": "rgba(245, 244, 244, 0.815)", + "--c-content-background-opaque": "#f3f2f2", + "--c-mid-background": "#d1dae7", + "--c-minor-text": "#8c97a8", + "--c-mid-text": "#7389a5", + "--c-major-text": "#4a577e", "--c-accent": "#585bd5", - "--c-shadow": "rgba(0, 0, 0, 0.05)", - "--c-showcase-background": "#1b1c22" + "--c-shadow": "rgba(18, 18, 32, 0.1)" } }, "dark": { @@ -24,13 +22,11 @@ "--c-content-background": "rgba(29, 29, 32, .75)", "--c-content-background-opaque": "#1d1d20", "--c-mid-background": "#2e2e33", - "--c-notice-background": "#ecf1f3", "--c-minor-text": "#85888d", "--c-mid-text": "#b9c2c4", "--c-major-text": "#ecf1f3", "--c-accent": "#585bd5", - "--c-shadow": "rgba(0, 0, 0, .25)", - "--c-showcase-background": "#151618" + "--c-shadow": "rgba(0, 0, 0, .25)" } } } \ No newline at end of file diff --git a/src/styles/App.css b/src/styles/App.css index 0617e23..5b37e0f 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -1,13 +1,7 @@ -* { - --c--accent-transparent: #585ad511; +* { --color-experience: #cfb671; - --color-max-level: #f09744; - --color-free-company: #404040; --color-completed: #30bb65; --color-completed-transparent: #30bb6510; - --color-health: #5d9c22; - --color-mana: #be2c9f; - --color-news: #252333; box-sizing: border-box; scrollbar-color: var(--c-mid-background) transparent; } diff --git a/src/styles/Banner.css b/src/styles/Banner.css index f746689..fba5acd 100644 --- a/src/styles/Banner.css +++ b/src/styles/Banner.css @@ -24,13 +24,13 @@ } .free-company { - background-color: var(--color-free-company); + background-color: #404040; color: rgb(202, 206, 209); box-shadow: 0 0 1rem var(--c-shadow); } .free-company h2 { - color: var(--c-major-text); + color: white; } .reference { From dd1e57085227b9f6179a43f240c93e9dcd3cf94a Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sun, 26 Jun 2022 16:00:31 +1200 Subject: [PATCH 15/17] Use props destructuring for better readability --- src/App.jsx | 1 - src/components/Achievement.jsx | 14 +++++-- src/components/Banner.jsx | 23 +++++++---- src/components/Bar.jsx | 8 +++- src/components/Button.jsx | 15 +++++-- src/components/Checkbox.jsx | 11 +++-- src/components/Header.jsx | 13 ++++-- src/components/JobHeader.jsx | 10 +++-- src/components/JobItem.jsx | 30 ++++++++------ src/components/Loading.jsx | 5 ++- src/components/Navbar.jsx | 14 ++++--- src/components/Navigator.jsx | 22 ++++++---- src/components/Searchbar.jsx | 1 - src/containers/Achievements.jsx | 10 +++-- src/containers/Character.jsx | 10 +++-- src/containers/Collection.jsx | 8 +++- src/containers/Help.jsx | 7 ++-- src/containers/Home.jsx | 5 ++- src/containers/Jobs.jsx | 20 +++++---- src/containers/Profile.jsx | 72 +++++++++++++++++---------------- src/containers/Quests.jsx | 15 ++++--- src/containers/Settings.jsx | 45 ++++++++++++--------- 22 files changed, 224 insertions(+), 135 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index fd8fdb0..d044dfd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -119,7 +119,6 @@ const App = () => { } /> diff --git a/src/components/Achievement.jsx b/src/components/Achievement.jsx index 0d65809..6ebd658 100644 --- a/src/components/Achievement.jsx +++ b/src/components/Achievement.jsx @@ -8,21 +8,27 @@ import Item from "./Item"; * @returns */ const Achievement = (props) => { - const {data, loading} = useFetchData("https://xivapi.com/achievement/" + props.id) + const { + name, + icon, + points, + id + } = props; + const {data, loading} = useFetchData("https://xivapi.com/achievement/" + id) return ( loading ? null :
  • - +
    -

    {props.name}

    +

    {name}

    {data.AchievementCategory.Name}

    {data.Description}

    -

    {props.points}

    +

    {points}

    • ); } diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index 90f8f01..d1e30f2 100644 --- a/src/components/Banner.jsx +++ b/src/components/Banner.jsx @@ -3,16 +3,25 @@ import { Link } from 'react-router-dom'; import { ImDiamonds } from 'react-icons/im'; const Banner = (props) => { + const { + type, + name, + title, + avatar, + link, + misc, + content + } = props; return ( - - {props.avatar} + + {avatar}
    -

    {props.name}

    -

    {props.title}

    -

    {props.content}

    +

    {name}

    +

    {title}

    +

    {content}

    -
    -

    {props.misc}

    +
    +

    {misc}

    diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx index eacbf11..f7c3192 100644 --- a/src/components/Bar.jsx +++ b/src/components/Bar.jsx @@ -1,12 +1,16 @@ import '../styles/Bar.css'; const Bar = (props) => { + const { + width, + color + } = props; return (
    diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 81a6ab8..7fcf9f9 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,13 +1,20 @@ import '../styles/Button.css'; const Button = (props) => { + const { + type, + condition, + onClick, + style, + content + } = props; return( ); } diff --git a/src/components/Checkbox.jsx b/src/components/Checkbox.jsx index 5ef4c2d..b71d725 100644 --- a/src/components/Checkbox.jsx +++ b/src/components/Checkbox.jsx @@ -1,11 +1,16 @@ import '../styles/Checkbox.css'; const Checkbox = (props) => { + const { + type, + condition, + update + } = props; return (
    props.update(props.condition ? false : true)} + className={'checkbox checkbox--' + type + (condition ? ' checkbox--active' : '')} + onClick={() => update(condition ? false : true)} > -
    +
    ); } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index d0086fc..fde5f33 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,13 +1,18 @@ import Divider from './Divider'; import '../styles/Header.css'; const Header = (props) => { + const { + name, + minor, + major + } = props; return (
    -

    {props.name}

    -
    -

    {props.minor}

    -

    {props.major}

    +

    {name}

    +
    +

    {minor}

    +

    {major}

    diff --git a/src/components/JobHeader.jsx b/src/components/JobHeader.jsx index 419ea97..436f312 100644 --- a/src/components/JobHeader.jsx +++ b/src/components/JobHeader.jsx @@ -1,10 +1,14 @@ import Divider from './Divider'; const JobHeader = (props) => { + const { + name, + icon + } = props; return ( -
    +
    - -

    {props.name}

    + +

    {name}

    diff --git a/src/components/JobItem.jsx b/src/components/JobItem.jsx index 379827e..b4ee696 100644 --- a/src/components/JobItem.jsx +++ b/src/components/JobItem.jsx @@ -1,34 +1,38 @@ import Bar from './Bar'; const JobItem = (props) => { - const link = "https://na.finalfantasyxiv.com/" + (props.isCombat ? "jobguide/" : "crafting_gathering_guide/"); - let nameNoGap = (props.name).replace(/\s/g, ''); - const name = nameNoGap.charAt(0).toUpperCase() + nameNoGap.slice(1); + const { + isCombat, + name, + currentJob, + icon, + level, + exp + } = props; + const link = "https://na.finalfantasyxiv.com/" + (isCombat ? "jobguide/" : "crafting_gathering_guide/"); + let nameNoGap = (name).replace(/\s/g, ''); return ( - job icon + job icon

    - {props.level} + className="job__level-text" style={{color: level === 90 ? "#f09744" : null}}> + {level}

    -
    -

    {name}

    +

    {nameNoGap.charAt(0).toUpperCase() + nameNoGap.slice(1)}

    - {props.level === 90 ? "Max Level" : props.exp[0] + " / " + props.exp[1]} + {level === 90 ? "Max Level" : exp[0] + " / " + exp[1]}

    -
    -     ); } diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx index 5b3ae10..94f51a3 100644 --- a/src/components/Loading.jsx +++ b/src/components/Loading.jsx @@ -2,8 +2,11 @@ import loadingIcon from '../images/loading.svg'; import '../styles/Loading.css'; const Loading = (props) => { + const { + full + } = props; return( -
    +
    { + const { + showSearchbar, + referenceCharacter + } = props; return (