Merge pull request #68 from dotkom/fix/course-list-align

fix(course-list): align table and split out infinite loading icon

Author: oleast

components/Loading/InfiniteLoading.tsx

@@ -0,0 +1,26 @@
+import { useIntersection } from 'common/hooks/useIntersection';
+import { AnimatedGraphIcon } from 'components/Graphics/AnimatedGraphIcon';
+import { Text } from 'components/Typography/Text';
+import React, { FC } from 'react';
+
+import styles from './infinite-loading.module.scss';
+
+interface Props {
+  isLoading: boolean;
+  triggerNextPage: () => void;
+}
+
+export const InifiniteLoading: FC<Props> = ({ isLoading, triggerNextPage }) => {
+  const ref = useIntersection(triggerNextPage);
+  return (
+    <>
+      {isLoading && (
+        <div className={styles.loadingContainer}>
+          <AnimatedGraphIcon className={styles.loadingIcon} />
+          <Text>Laster...</Text>
+        </div>
+      )}
+      <span ref={ref} />
+    </>
+  );
+};

components/Loading/infinite-loading.module.scss

@@ -0,0 +1,10 @@
+.loadingIcon {
+  width: 60px;
+  fill: var(--red);
+  margin-bottom: var(--spacing-1);
+}
+
+.loadingContainer {
+  margin: var(--spacing-4) auto;
+  text-align: center;
+}

views/CourseListView/course-list-view.module.scss

@@ -14,6 +14,16 @@
 
 .courseList {
   width: 100%;
+  th,
+  td {
+    &:nth-child(1),
+    &:nth-child(2) {
+      text-align: left;
+    }
+    &:nth-child(3) {
+      text-align: right;
+    }
+  }
 }
 
 .loadingIcon {

views/CourseListView/index.tsx

@@ -1,6 +1,5 @@
-import { useIntersection } from 'common/hooks/useIntersection';
 import { SearchInput } from 'components/forms/SearchInput';
-import { AnimatedGraphIcon } from 'components/Graphics/AnimatedGraphIcon';
+import { InifiniteLoading } from 'components/Loading/InfiniteLoading';
 import { Text } from 'components/Typography/Text';
 import { Course } from 'models/Course';
 import Head from 'next/head';
@@ -32,7 +31,6 @@ export const CourseListView: FC<Props> = ({
     resetPages();
     onSearchChange(event.target.value);
   };
-  const ref = useIntersection(nextPage);
 
   return (
     <>
@@ -70,13 +68,7 @@ export const CourseListView: FC<Props> = ({
             </tbody>
           </table>
         ) : null}
-        {isLoading && (
-          <div className={styles.loadingContainer}>
-            <AnimatedGraphIcon className={styles.loadingIcon} />
-            <Text>Laster...</Text>
-          </div>
-        )}
-        <span ref={ref} />
+        <InifiniteLoading isLoading={isLoading} triggerNextPage={nextPage} />
       </section>
     </>
   );