Clear unnecessary parts

components/album.module.scss

@@ -1,6 +1,8 @@
 .item {
     border-radius: .5rem;
-    background-color: lightgray;
+    background-color: white;
+    color: whitesmoke;
+    border-width: 1px;
 
     .cover {
         position: relative;
@@ -13,8 +15,6 @@
         background-position: center center;
         opacity: 1;
         transition: all .2s linear;
-        border: 1px solid white;
-        box-shadow: 0 0 8px silver;
 
         .title {
             position: absolute;
@@ -29,7 +29,6 @@
             font-size: 1rem;
             font-weight: normal;
             text-decoration: none;
-            color: white;
             background-color: #0008;
             background-image: linear-gradient(to bottom,transparent,black);
             opacity: .8;
@@ -46,7 +45,6 @@
             border-top-right-radius: .5rem;
             border-bottom-left-radius: .5rem;
             background-color: #0006;
-            color: #fff;
             font-size: .8rem;
             opacity: .8;
             transition: all .2s linear;

components/element-counter.tsx

@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import styles from './element-counter.module.scss';
 
 type ElementCounterProps = {
@@ -8,7 +9,10 @@ type ElementCounterProps = {
   };
 };
 
-const ElementCounter = ({ count, text }: ElementCounterProps) => {
+const ElementCounter: FunctionComponent<ElementCounterProps> = ({
+  count,
+  text,
+}) => {
   return (
     <div className={styles.count}>
       <small>{`${count} ${count == 1 ? text.singular : text.plural}`}</small>

components/footer.module.scss

@@ -1,5 +1 @@
-.footer {
-    padding: 1rem;
-    text-align: center;
-    border-top-width: 1px;
-}
+.footer {}

components/footer.tsx

@@ -2,11 +2,7 @@ import { FunctionComponent } from 'react';
 import styles from './footer.module.scss';
 
 const Footer: FunctionComponent = () => {
-  return (
-    <footer className={styles.footer}>
-      <small>&copy; 2022 orbanszlrd</small>
-    </footer>
-  );
+  return <footer className={styles.footer}></footer>;
 };
 
 export default Footer;

components/header.tsx

@@ -1,7 +1,6 @@
-import Navbar from './navbar';
-
-import styles from './header.module.scss';
 import { FunctionComponent } from 'react';
+import styles from './header.module.scss';
+import Navbar from './navbar';
 
 const Header: FunctionComponent = () => {
   return (

components/layout.tsx

@@ -1,9 +1,8 @@
+import { FunctionComponent } from 'react';
+import styles from './layout.module.scss';
 import Header from './header';
 import Footer from './footer';
 
-import styles from './layout.module.scss';
-import { FunctionComponent } from 'react';
-
 export interface LayoutProps {
   children: React.ReactNode;
 }

components/loader.module.scss

@@ -6,7 +6,6 @@
     right: 0;
     bottom:0;
     z-index: 1;
-    background-color: rgba(255,255,255,1);
 
     .spinner {
         position: relative;
@@ -15,7 +14,6 @@
         transform: translate(-50%,-50%);
         text-align: center;
         font-size: 2rem;
-        color: gray;
         animation: spin infinite 2s linear;
         }
 

components/loader.tsx

@@ -1,6 +1,5 @@
 import { FunctionComponent } from 'react';
 import { FaSpinner } from 'react-icons/fa';
-
 import styles from './loader.module.scss';
 
 const Loader: FunctionComponent = () => {

components/navbar.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { FunctionComponent } from 'react';
 import { FaGithub, FaHome, FaImages } from 'react-icons/fa';
-
 import styles from './navbar.module.scss';
 
 const Navbar: FunctionComponent = () => {

pages/_app.tsx

@@ -1,17 +1,14 @@
 import '../styles/globals.scss';
-
 import type { AppProps } from 'next/app';
-
 import { Provider } from 'react-redux';
-
 import { store } from '../app/store';
 
-function MyApp({ Component, pageProps }: AppProps) {
+function GooglePhotosApp({ Component, pageProps }: AppProps) {
   return (
     <Provider store={store}>
       <Component {...pageProps} />
     </Provider>
   );
 }
 
-export default MyApp;
+export default GooglePhotosApp;

pages/albums.tsx

@@ -1,28 +1,22 @@
 import { NextPage } from 'next';
 import Head from 'next/head';
-
 import { useEffect, useState } from 'react';
-
-import { AppDispatch, RootState } from '../app/store';
 import { useSelector, useDispatch } from 'react-redux';
+import { GoogleAlbum } from '../types/google';
+import { AppDispatch, RootState } from '../app/store';
 import { setFilter, fetchAllGoogleAlbums } from '../features/photoSlice';
-
+import styles from '../styles/Albums.module.scss';
 import AlbumList from '../components/album-list';
+import ElementCounter from '../components/element-counter';
 import Filter from '../components/filter';
 import Layout from '../components/layout';
 import Loader from '../components/loader';
-import { GoogleAlbum } from '../types/google';
-
-import styles from '../styles/Albums.module.scss';
-import ElementCounter from '../components/element-counter';
 
 const Albums: NextPage = () => {
   const loading = useSelector((state: RootState) => state.photo.loading);
   const albums = useSelector((state: RootState) => state.photo.albums);
   const filter = useSelector((state: RootState) => state.photo.filter);
-
   const dispatch: AppDispatch = useDispatch();
-
   const [filteredAlbums, setFilteredAlbums] = useState(albums);
 
   const setTitleFilter = (titleFilter: string) => {
@@ -55,7 +49,9 @@ const Albums: NextPage = () => {
         <meta name="description" content="Albums" />
       </Head>
 
-      {!loading ? (
+      {loading ? (
+        <Loader />
+      ) : (
         <section className={styles.container}>
           <Filter
             placeholder="Search"
@@ -68,10 +64,9 @@ const Albums: NextPage = () => {
           />
           <AlbumList albums={filteredAlbums} />
         </section>
-      ) : (
-        <Loader />
       )}
     </Layout>
   );
 };
+
 export default Albums;

pages/api/albums.ts

@@ -39,11 +39,9 @@ const getGoogleAlbums = async (
 };
 
 export default async function Albums(
-  req: NextApiRequest,
+  _req: NextApiRequest,
   res: NextApiResponse<GoogleAlbum[]>
 ) {
-  console.log(req.cookies);
-
   const bearerToken = await getGoogleApiToken();
 
   let nextPageToken: string | undefined = '';

pages/index.tsx

@@ -1,9 +1,8 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import styles from '../styles/Home.module.css';
+import styles from '../styles/Index.module.scss';
 
 import Layout from '../components/layout';
-import Link from 'next/link';
 
 const Home: NextPage = () => {
   return (
@@ -13,18 +12,7 @@ const Home: NextPage = () => {
         <meta name="description" content="Home" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <div className={styles.container}>
-        <main className={styles.main}>
-          <h1 className={styles.title}>
-            <Link href="/albums">
-              <a title="Albums">
-                <span>Albums</span>
-              </a>
-            </Link>
-          </h1>
-        </main>
-      </div>
+      <div className={styles.container}></div>
     </Layout>
   );
 };

styles/Index.module.scss

@@ -0,0 +1,3 @@
+.container {
+
+}