feat: add full changelog with pagination to changelog page (#8)

* deps: add flowbite and awesomefont to the repo

* feat: add new complete changelog with pagination

components/changelog/ChangeComponent.tsx

@@ -0,0 +1,41 @@
+import Change from '../../types/change';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCirclePlus, faWrench, faArrowUp, faBalanceScale, faQuestion} from '@fortawesome/free-solid-svg-icons';
+
+const ChangeComponent = (props: Change) => {
+    const { author_username, author_url, description, pr_url, pr_number, category } = props;
+    return (
+        <li className={'py-3 sm:py-4'}>
+            <div className={'flex items-center space-x-4'}>
+                <div className={'shrink-0'}>
+                    <FontAwesomeIcon className={'text-xl'} icon={determineIcon(category)}></FontAwesomeIcon>
+                </div>
+                <div className={'min-w-0 flex-1'}>
+                    <p className={'text-sm font-medium text-white-900'}>
+                        {description}
+                    </p>
+                    <p className="text-sm text-gray-400">
+                        contributed by <a href={author_url} className={'text-gray-400 hover:text-gray-500 hover:underline'}>{author_username}</a> in <a href={pr_url} className={'text-gray-400 hover:text-gray-500 hover:underline'}>PR #{pr_number}</a>
+                    </p>
+                </div>
+            </div>
+        </li>
+    )
+}
+
+const determineIcon = (category: string) => {
+    switch (category) {
+        case 'NEW':
+            return faCirclePlus;
+        case 'FIX':
+            return faWrench;
+        case 'IMPROVEMENT':
+            return faArrowUp;
+        case 'balance':
+            return faBalanceScale;
+        default:
+            return faQuestion;
+    }
+}
+
+export default ChangeComponent;

components/changelog/buildComponent.tsx

@@ -0,0 +1,60 @@
+import ChangeComponent from './ChangeComponent';
+import {Card} from 'flowbite-react';
+import Change from '../../types/change';
+import Build from '../../types/build';
+
+
+const BuildComponent = (props: Build) => {
+    const {version_number, date_created, changes} = props;
+    let changesList;
+
+    if (changes.length > 0) {
+        changesList = changes.map((change: Change, index: number) => {
+            return (
+            <ChangeComponent
+                key={index}
+                author_username={change.author_username}
+                author_url={change.author_url}
+                description={change.description}
+                pr_url={change.pr_url}
+                pr_number={change.pr_number}
+                category={change.category}
+                build={version_number}
+                date_added={date_created}/>)
+        })
+    } else {
+        changesList =
+            <li className={'py-3 sm:py-4'}>
+                <div className={'flex items-center space-x-4'}>
+                    <div className={'shrink-0'}>
+
+                    </div>
+                    <div className={'min-w-fit flex-1'}>
+                        <p className={'text-center text-gray-500'}>This build has no registered changes :(</p>
+                    </div>
+                </div>
+            </li>
+    }
+
+    return (
+        <div className={'max-w-xl min-w-sm'}>
+            <Card href={'#'}>
+                <div className={'mb-4 flex justify-between'}>
+                    <h5 className="text-xl font-bold leading-none text-white">
+                        Build: {version_number}
+                    </h5>
+                    <h5 className="text-xl font-bold leading-none text-white">
+                        Date: {date_created}
+                    </h5>
+                </div>
+                <div className="flow-root">
+                    <ul className="divide-y divide-gray-700">
+                        {changesList}
+                    </ul>
+                </div>
+            </Card>
+        </div>
+    )
+};
+
+export default BuildComponent;

components/changelog/changelogResultsPage.tsx

@@ -0,0 +1,34 @@
+import {AllChangesResponse} from '../../types/allChangesResponse';
+import BuildComponent from './buildComponent';
+import SimplePagination from '../pagination/simplePagination';
+
+interface ChangelogResultsPageProps extends AllChangesResponse {
+    handlePrevClicked: () => void;
+    handleNextClicked: () => void;
+}
+
+const ChangelogResultsPage = (props: ChangelogResultsPageProps) => {
+    const {next = null, previous = null, results, handleNextClicked, handlePrevClicked} = props;
+
+    return (<>
+            {results.map((result, index) => {
+                return (<div key={index}>
+                        <BuildComponent
+                            key={result.version_number}
+                            version_number={result.version_number}
+                            date_created={result.date_created}
+                            changes={result.changes}
+                        />
+                    </div>)
+            })}
+        <SimplePagination
+            enablePrev={previous != null}
+            enableNext={next != null}
+            onPrevClicked={handlePrevClicked}
+            onNextClicked={handleNextClicked} />
+        </>)
+}
+
+
+
+export default ChangelogResultsPage;

components/layout/prefabs/fixedFluidFixed/fixedSideContainer.tsx

@@ -0,0 +1,12 @@
+import LayoutChildren from '../../../../types/layoutChildren';
+
+const FixedSideContainer = (props: LayoutChildren) => {
+    const {children } = props;
+    return (
+        <div className={'w-fixed w-1/6 flex-shrink flex-grow-0 px-4'}>
+            {children}
+        </div>
+    )
+}
+
+export default FixedSideContainer;

components/layout/prefabs/fixedFluidFixed/fluidMainContainer.tsx

@@ -0,0 +1,13 @@
+import LayoutChildren from '../../../../types/layoutChildren';
+
+const FluidMainContainer = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <main role={'main'} className="w-full flex-grow pt-1 px-3">
+            {children}
+        </main>
+    );
+
+}
+
+export default FluidMainContainer;

components/layout/prefabs/flexPageContainer.tsx

@@ -0,0 +1,12 @@
+import LayoutChildren from '../../../types/layoutChildren';
+
+const flexPageContainer = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <div className={'w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow'}>
+            {children}
+        </div>
+    )
+}
+
+export default flexPageContainer;

components/pagination/simplePagination.tsx

@@ -0,0 +1,53 @@
+interface SimplePaginationProps {
+    enablePrev: boolean;
+    enableNext: boolean;
+    onPrevClicked: () => void;
+    onNextClicked: () => void;
+}
+
+const SimplePagination = (props: SimplePaginationProps) => {
+    const {enablePrev, enableNext, onPrevClicked, onNextClicked} = props;
+
+    const determineClass = (enabled: boolean) => {
+        if (enabled) {
+            return 'inline-flex items-center py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+        }
+        return 'inline-flex items-center py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l opacity-50 cursor-not-allowed';
+    }
+
+
+    return (<div className={'flex flex-col items-center'}>
+        <div className={'inline-flex mt-2 xs:mt-0'}>
+
+            <button
+                disabled={!enablePrev}
+                onClick={onPrevClicked}
+                className={determineClass(enablePrev)}>
+                <svg aria-hidden="true" className="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd"
+                          d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+                          clipRule="evenodd"></path>
+                </svg>
+                Prev
+            </button>
+
+            <button
+                disabled={!enableNext}
+                onClick={onNextClicked}
+                className={determineClass(enableNext)}>
+                Next
+                <svg aria-hidden="true" className="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd"
+                          d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                          clipRule="evenodd"></path>
+                </svg>
+            </button>
+
+
+        </div>
+    </div>);
+}
+
+export default SimplePagination;