Merge pull request #6 from iosifnicolae2/frontend-update-

Integrate API.
radio-crestin · Apr 10, 2022 · 1cf3818 · 1cf3818
2 parents 358f9b8 + 3379acb
commit 1cf3818
Show file tree

Hide file tree

Showing 23 changed files with 353 additions and 2,795 deletions.
diff --git a/frontend/components/Container/Container.module.scss b/frontend/components/Container/Container.module.scss
@@ -2,15 +2,13 @@
 @use 'styles/mixinHelper';
 
 .container {
-  max-width: 65%;
+  max-width: 1500px;
+  width: 90%;
   margin: 0 auto;
 
-  @include mixinHelper.onDesktop {
-    max-width: 90%;
-  }
 
   @include mixinHelper.onTablet {
-    max-width: 100%;
+    width: 100%;
     margin: 0;
   }
 }
diff --git a/frontend/components/Footer/Footer.module.scss b/frontend/components/Footer/Footer.module.scss
@@ -0,0 +1,20 @@
+@use 'styles/mixinHelper';
+
+.links {
+  display: flex;
+  flex-direction: row;
+  gap: 0 30px;
+  font-weight: 500;
+  font-size: 18px;
+  color: #646464;
+  margin-top: 150px;
+  margin-bottom: 82px;
+  flex-wrap: wrap;
+
+  @include mixinHelper.onMobile{
+    margin-top: 50px;
+    margin-bottom: 30px;
+    padding: 0 30px;
+    gap: 10px 20px;
+  }
+}
diff --git a/frontend/components/Footer/Footer.tsx b/frontend/components/Footer/Footer.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+import styles from "./Footer.module.scss";
+import links from "./links.json";
+
+export default function Footer() {
+  return (
+    <>
+      <div className={styles.links}>
+        {links.map(link => (
+          <Link key={link.name} href={link.href}>
+            <a target={link.target}>{link.name}</a>
+          </Link>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/frontend/components/Footer/links.json b/frontend/components/Footer/links.json
@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Contact",
+    "href": "/",
+    "target": "_blank"
+  },
+  {
+    "name": "Authenticate",
+    "href": "/",
+    "target": "_blank"
+  },
+  {
+    "name": "Github",
+    "href": "https://github.com/iosifnicolae2/radio-crestin.com",
+    "target": "_blank"
+  },
+  {
+    "name": "API",
+    "href": "/",
+    "target": "_blank"
+  }
+]
diff --git a/frontend/components/StationCategories/StationCategories.module.scss b/frontend/components/StationCategories/StationCategories.module.scss
@@ -6,8 +6,10 @@
   margin-bottom: 57px;
 
   @include mixinHelper.onTablet{
-    overflow-y: scroll;
-    padding-bottom: 5px;
+    overflow-x: scroll;
+    justify-content: start;
+    padding-left: 30px;
+    padding-bottom: 20px;
   }
 
   .item_category{
@@ -19,6 +21,14 @@
     line-height: 33px;
     cursor: pointer;
 
+    @include mixinHelper.onDesktop{
+      padding: 5px 20px;
+    }
+
+    @include mixinHelper.onTablet{
+      padding: 5px 10px;
+    }
+
     &:first-child{
       background: #F9AC59;;
     }

diff --git a/frontend/components/StationCategories/StationCategories.tsx b/frontend/components/StationCategories/StationCategories.tsx
@@ -15,6 +15,7 @@ export default function StationCategories() {
     <div className={styles.container}>
       {stationCategories.map((item: IStationCategory) => (
         <div
+          key={item.id}
           className={styles.item_category}
           onClick={() => handleClick(item.id)}>
           {item.name}

diff --git a/frontend/components/StationHeader/StationHeader.module.scss b/frontend/components/StationHeader/StationHeader.module.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   margin: 2rem auto;
   padding: 36px;
-  height: 638px;
+  min-height: 520px;
   background: #FFD9AF;
   border-radius: 25px;
   box-shadow: 1px 2px 18px 0 #0000001A;
@@ -24,9 +24,11 @@
   }
 
   .currentStation {
-    height: 100%;
     display: flex;
+    gap: 0 30px;
+    height: 100%;
     z-index: 0;
+    margin-top: 50px;
 
     @include mixinHelper.onTablet{
       flex-direction: column-reverse;
@@ -35,7 +37,7 @@
 }
 
 .matrix{
-  width: 500px;
+  width: 550px;
   position: absolute;
   bottom: 0;
   left: 0;

diff --git a/frontend/components/StationHeader/StationHeader.tsx b/frontend/components/StationHeader/StationHeader.tsx
@@ -1,31 +1,33 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import InviteButton from "@/components/InviteButton/InviteButton";
 import RandomStationButton from "@/components/RandomStationButton/RandomStationButton";
 import StationInformation from "@/components/StationInformation/StationInformation";
 import styles from "./StationHeader.module.scss";
 import dynamic from "next/dynamic";
 import { useStations } from "../../hooks/stations";
-import { getStationsMetadata } from "../../services/stations";
-import { Station, StationGroup } from "../../types";
 import Circle_matrix_desktop from "@/public/circle_matrix_desktop.svg";
+import { Station } from "../../types";
 
 export const StationPlayer = dynamic(
   () => import("components/StationPlayer/StationPlayer"),
   {
     ssr: true,
   },
 );
-export default function StationHeader(props: any) {
-  const { stations, station_groups, isLoading, isError } = useStations({
-    refreshInterval: 10000,
-    initialStationsMetadata: {
-      station_groups: [],
-      stations: [],
-    },
-  });
-  const selectedStation = stations[0];
+
+export default function StationHeader(station: Station) {
+  const [showChild, setShowChild] = useState(false);
   const [started, setStarted] = useState(false);
+
+  useEffect(() => {
+    setShowChild(true);
+  }, []);
+
+  if (!showChild) {
+    return null;
+  }
+
   return (
     <div className={styles.header}>
       <div className={styles.row}>
@@ -34,12 +36,12 @@ export default function StationHeader(props: any) {
       </div>
       <div className={styles.currentStation}>
         <StationPlayer
-          key={selectedStation?.id}
-          station={selectedStation}
+          key={station?.id}
+          station={station}
           started={started}
           onStop={() => setStarted(false)}
         />
-        <StationInformation />
+        <StationInformation station={station} />
         <img
           className={styles.matrix}
           src={Circle_matrix_desktop.src}

diff --git a/frontend/components/StationInformation/StationInformation.module.scss b/frontend/components/StationInformation/StationInformation.module.scss
@@ -1,13 +1,13 @@
 @use 'styles/mixinHelper';
 
-.container{
+.container {
   display: flex;
-  justify-content: center;
   flex-direction: column;
-  width: 50%;
+  max-width: 60%;
 
-  @include mixinHelper.onTablet{
-    width: unset;
+  @include mixinHelper.onTablet {
+    max-width: unset;
+    padding-bottom: 50px;
   }
 
   .station {
@@ -18,43 +18,41 @@
       font-size: 50px;
     }
 
-    &_RatingContainer{
+    &_RatingContainer {
       display: flex;
       align-items: center;
       gap: 0 7px;
       margin-top: 10px;
       margin-bottom: 10px;
 
-      .facebookIcon{
-        width: 22px
-      }
-
-      .rating{
+      .rating {
         font-size: 20px;
       }
     }
-    &_NumberOfListeners{
+
+    &_NumberOfListeners {
       font-size: 20px;
       line-height: 30px;
       display: flex;
       align-items: center;
       margin-bottom: 35px;
     }
 
-    &_Quote{
+    &_Quote {
       font-weight: 500;
       font-size: 24px;
       line-height: 36px;
       margin-bottom: 35px;
     }
 
-    &_ReadMore{
+    &_ReadMore {
       font-weight: 700;
       font-size: 22px;
       line-height: 33px;
       align-items: center;
       display: block;
-      &:hover{
+
+      &:hover {
         text-decoration: underline;
       }
     }

diff --git a/frontend/components/StationInformation/StationInformation.tsx b/frontend/components/StationInformation/StationInformation.tsx
@@ -1,15 +1,18 @@
 import React from "react";
-import styles from "./StationInformation.module.scss";
 import Rating from "react-rating";
+
+import styles from "./StationInformation.module.scss";
+
 import Star from "@/public/Star.svg";
 import StarRed from "@/public/Star_red.svg";
 import StarGray from "@/public/Star_gray.svg";
 import FacebookIcon from "@/public/facebook.svg";
 import Link from "@/public/link.svg";
 
 export default function StationInformation(props: any) {
-  const StationRating = 4.2;
-  const NumberOfListeners = 25;
+  const { station } = props;
+  const StationRating = 4.5;
+  const NumberOfListeners = station.now_playing.listeners;
   const ReadMoreLink = "https://www.facebook.com/";
 
   const onRatingChange = (rating: number) => {
@@ -18,15 +21,32 @@ export default function StationInformation(props: any) {
 
   return (
     <div className={styles.container}>
-      <h1 className={styles.station_Name}>Aripi spre cer1</h1>
+      <h1 className={styles.station_Name}>{station.title}</h1>
 
       <div className={styles.station_RatingContainer}>
+        {/*@ts-ignore*/}
         <Rating
           onChange={rating => onRatingChange(rating)}
           placeholderRating={StationRating}
-          emptySymbol={<img src={StarGray.src} alt={"empty symbol"} />}
-          placeholderSymbol={<img src={Star.src} alt={"placeholder symbol"} />}
-          fullSymbol={<img src={StarRed.src} alt={"fullSymbol"} />}
+          emptySymbol={
+            <img
+              src={StarGray.src}
+              height={22}
+              width={22}
+              alt={"empty symbol"}
+            />
+          }
+          placeholderSymbol={
+            <img
+              src={Star.src}
+              height={22}
+              width={22}
+              alt={"placeholder symbol"}
+            />
+          }
+          fullSymbol={
+            <img src={StarRed.src} height={22} width={22} alt={"fullSymbol"} />
+          }
         />
         {/*@ts-ignore*/}
         {StationRating !== 0 && (
@@ -35,14 +55,16 @@ export default function StationInformation(props: any) {
         <img
           src={FacebookIcon.src}
           className={styles.facebookIcon}
-          alt={"empty symbol"}
+          alt={"facebook icon"}
+          height={22}
+          width={22}
         />
       </div>
 
       {/*@ts-ignore*/}
-      {NumberOfListeners !== 0 && (
+      {NumberOfListeners && (
         <p className={styles.station_NumberOfListeners}>
-          {NumberOfListeners} de persoane ascultă împreună cu tine
+          {NumberOfListeners} persoane ascultă împreună cu tine
         </p>
       )}
       <p className={styles.station_Quote}>
@@ -56,11 +78,7 @@ export default function StationInformation(props: any) {
         href={ReadMoreLink}
         target={"_blank"}>
         Continuă citirea articolului “Limba care dezbină”
-        <img
-          src={Link.src}
-          className={styles.facebookIcon}
-          alt={"empty symbol"}
-        />
+        <img src={Link.src} alt={"link symbol"} height={22} width={22} />
       </a>
     </div>
   );