Merge pull request #2 from DamonGreenhalgh/dev

XIV Tracker v1.2.2

changelog.md

@@ -4,30 +4,54 @@ 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.2] - 2022-05-08
+This update focuses on polishing up existing features and fixing bugs.
+
+### Added 
+
+- Added help section for finding the **Lodestone ID** of a character.
+- Added the ability to remove the current reference character.
+- Added default profile icon when no reference character has been allocated.
+
+### Changes
+
+- Changed directory structure.
+- Changed multiple component styles.
+- Changed the description of the reference character system for improved clarity.
+- Updated most components to use prop destructuring for better readability.
+- Updated `alt` text of `img` tags to be more descriptive.
+- Updated light theme.
+
+### Fixed
+
+- Fixed title not changing to **XIV Tracker |** `<Character Name>` when viewing character profile.
+- Fixed *Newfound Adventure* quest component displaying incorrect tooltip.
+- Fixed app crashing when viewing a character with unknown collection status.
+
+## [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

package.json

@@ -11,7 +11,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.jsx

@@ -1,18 +1,26 @@
 
+// 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';
-import Settings from './pages/Settings';
-import Help from './pages/Help';
+import Home from './containers/Home';
+import Character from './containers/Character';
+import Settings from './containers/Settings';
+import Help from './containers/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 (
     <BrowserRouter basename={process.env.PUBLIC_URL}>
@@ -111,7 +119,6 @@ const App = () => {
                 <Character 
                   setShowSearchbar={setShowSearchbar} 
                   referenceCharacter={referenceCharacter}
-                  setLoading={setLoading}
                 />
               } 
             />

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 : 
 
         <li className='achievement'>
-            <Item icon={"https://xivapi.com" + props.icon}/>
+            <Item icon={"https://xivapi.com" + icon}/>
             <div className='col gap-sm'>
                 <div className='achievement__header'>
-                    <h4>{props.name}</h4>
+                    <h4>{name}</h4>
                     <p style={{color: 'var(--color-experience)'}}>{data.AchievementCategory.Name}</p>
                 </div>
                 <p>{data.Description}</p>
             </div>
-            <h3 style={{marginLeft: 'auto', color: 'var(--color-completed)'}}>{props.points}</h3>
+            <h3 style={{marginLeft: 'auto', color: 'var(--color-completed)'}}>{points}</h3>
         </li>
     );
 }

src/components/Banner.jsx

@@ -1,18 +1,27 @@
-import './Banner.css';
+import '../styles/Banner.css';
 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 (
-    <Link className={'banner ' + props.type} to={props.link}>
-        {props.avatar}
+    <Link className={'banner ' + type} to={link}>
+        {avatar}
         <div className='col justify-center'>
-            <h2>{props.name}</h2>
-            <h3>{props.title}</h3>
-            <p>{props.content}</p>
+            <h2>{name}</h2>
+            <h3>{title}</h3>
+            <p>{content}</p>
         </div>
-        <div className='misc' style={{color: 'var(--color-completed)', marginLeft: 'auto'}}>
-            <p>{props.misc}</p>
+        <div className={"misc" + (misc === undefined ? " disabled" : "")} style={{color: 'var(--color-completed)', marginLeft: 'auto'}}>
+            <p>{misc}</p>
             <ImDiamonds style={{minHeight: '1rem', minWidth: '1rem'}}/>
         </div>
 

src/components/utility/Bar.jsx → src/components/Bar.jsx

@@ -1,12 +1,16 @@
-import './Bar.css';
+import '../styles/Bar.css';
 const Bar = (props) => {
+    const {
+        width,
+        color
+    } = props;
     return (
         <div className="bar">
             <div 
                 className="bar__completion" 
                 style={{
-                    width: props.width,
-                    backgroundColor: props.color
+                    width: width,
+                    backgroundColor: color
                 }} 
             />
         </div>

src/components/Button.jsx

@@ -0,0 +1,29 @@
+import '../styles/Button.css';
+
+const Button = (props) => {
+    const {
+        type,
+        condition,
+        onClick,
+        style,
+        content
+    } = props;
+    return(
+        <button 
+            className={"button button--" + type + (condition ? " button--active button--active--" + type : "")} 
+            onClick={onClick} 
+            style={style}
+        >
+            {content}
+        </button>
+    );
+}
+
+Button.defaultProps = {
+    type: '',
+    condition: false,
+    content: '',
+    onClick: null
+}
+
+export default Button;

src/components/Checkbox.jsx

@@ -0,0 +1,18 @@
+import '../styles/Checkbox.css';
+const Checkbox = (props) => {
+    const {
+        type,
+        condition,
+        update
+    } = props;
+    return (
+        <div 
+            className={'checkbox checkbox--' + type + (condition ? ' checkbox--active' : '')}
+            onClick={() => update(condition ? false : true)}
+        >
+            <div className={'checkbox__box checkbox__box--' + type + (condition ? ' checkbox__box--active' : '')} />
+        </div>
+    );
+}
+
+export default Checkbox;