diff --git a/.env b/.env
index 2f7b592a..5d987f52 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-REACT_APP_DATABASE='http://localhost:3000/'
\ No newline at end of file
+REACT_APP_DATABASE='http://localhost:3000/'
+REACT_APP_RECAPTCHA_SITE_KEY='6LcZ-kkqAAAAAFdmy2tD1gKFdjxb0D71w5VMaisr'
\ No newline at end of file
diff --git a/README.md b/README.md
index a8e2d912..819aca86 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,18 @@
# PromoCursed
+ВАЖНАЯ ИНФОРМАЦИЯ!!!
+
+По какой-то причине при передаче объекта песни в CurrentTrack и получение свойств объекта в этом компонента
+появляются ошибки. Их не было до какого-то момента, но я не успел к сроку выявить причины (я долго дебажил),
+но результата это не принесло. До сих пор причины для меня остаются, к сожалению, загадкой...
+
+Что было добавлено/исправлено после очной демонстрации:
+
+1. Компоненты были раскиданы по папкам
+2. Переименовал некоторые папки (например, API),
+3. Добавил новые компоненты
+4. Роутинг и страницы
+5. Валидация форм
+
+Должен был добавить плеер с воспроизведением песен, но из-за ошибок, про которые я написал выше, не удалось.
+Пришлось жестко передать объект песни прямо в коде компонента.
diff --git a/data.json b/data.json
index 533d0e69..591e0c3f 100644
--- a/data.json
+++ b/data.json
@@ -7,7 +7,7 @@
"band_name": "Nevroz",
"albumid": "1",
"album_name": "Album 1",
- "source": "source_path",
+ "source": "/src/songs/Nirvana_-_Smells_Like_Teen_Spirit_75941061.mp3",
"cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
"playlists": [
"1",
@@ -23,7 +23,7 @@
"band_name": "Nevroz",
"albumid": "1",
"album_name": "Album 1",
- "source": "source_path",
+ "source": "/src/songs/Blur_-_Song_2_47967381.mp3",
"cover": "https://cdn1.ozone.ru/s3/multimedia-t/6893834213.jpg",
"playlists": [
"2"
@@ -38,7 +38,7 @@
"band_name": "noizemchik",
"albumid": "2",
"album_name": "Ругань из-за Стёпы",
- "source": "source_path",
+ "source": "/src/songs/Noice_MC_-_Rugan_iz-za_steny_63872179.mp3",
"cover": "https://sun9-11.userapi.com/impg/yfCwuWXI6NkFVC2HvMlegM2qWLlenkeiiRyvNQ/jpH8m1wlLqs.jpg?size=604x604&quality=95&sign=60a1d1877b49631fb6078db88715fc88&c_uniq_tag=UKrig2vg02reyBH_ML0OKeqt5gm_2jpwEXD7NJBUXoQ&type=album"
,
"playlists": [
@@ -54,7 +54,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD_-_Crazy_Frog_75801748.mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"2", "3"
@@ -69,7 +69,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -84,7 +84,7 @@
"band_name": "Nevroz",
"albumid": "1",
"album_name": "Album 1",
- "source": "source_path",
+ "source": "/src/songs/Nirvana_-_Smells_Like_Teen_Spirit_75941061.mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"1", "2"
@@ -99,7 +99,7 @@
"band_name": "Nevroz",
"albumid": "1",
"album_name": "Album 1",
- "source": "source_path",
+ "source": "/src/songs/Blur_-_Song_2_47967381.mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"2"
@@ -114,7 +114,7 @@
"band_name": "noizemchik",
"albumid": "2",
"album_name": "Ругань из-за Стёпы",
- "source": "source_path",
+ "source": "/src/songs/Noice_MC_-_Rugan_iz-za_steny_63872179.mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh"
,
"playlists": [
@@ -130,7 +130,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD_-_Crazy_Frog_75801748.mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"2", "3"
@@ -145,7 +145,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -160,7 +160,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -175,7 +175,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -190,7 +190,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -205,7 +205,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -220,7 +220,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -235,7 +235,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
@@ -250,7 +250,7 @@
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "/src/songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
"playlists": [
"3"
diff --git a/package-lock.json b/package-lock.json
index 5874c70f..67468a63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dotenv": "^0.1.3",
+ "react-google-recaptcha": "^3.1.0",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
"styled-components": "^6.1.12",
@@ -46,6 +47,7 @@
"@storybook/react-webpack5": "^8.2.9",
"@storybook/test": "^8.2.9",
"@types/node-fetch": "^2.6.11",
+ "@types/react-google-recaptcha": "^2.1.9",
"eslint-plugin-storybook": "^0.8.0",
"prop-types": "^15.8.1",
"storybook": "^8.2.9",
@@ -9518,6 +9520,16 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-google-recaptcha": {
+ "version": "2.1.9",
+ "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz",
+ "integrity": "sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/react-transition-group": {
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
@@ -24607,6 +24619,19 @@
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"license": "MIT"
},
+ "node_modules/react-async-script": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+ "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+ "license": "MIT",
+ "dependencies": {
+ "hoist-non-react-statics": "^3.3.0",
+ "prop-types": "^15.5.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.4.1"
+ }
+ },
"node_modules/react-colorful": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
@@ -24948,6 +24973,19 @@
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
"license": "MIT"
},
+ "node_modules/react-google-recaptcha": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+ "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+ "license": "MIT",
+ "dependencies": {
+ "prop-types": "^15.5.0",
+ "react-async-script": "^1.2.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.4.1"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index a8f01c48..abbb917b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dotenv": "^0.1.3",
+ "react-google-recaptcha": "^3.1.0",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
"styled-components": "^6.1.12",
@@ -74,6 +75,7 @@
"@storybook/react-webpack5": "^8.2.9",
"@storybook/test": "^8.2.9",
"@types/node-fetch": "^2.6.11",
+ "@types/react-google-recaptcha": "^2.1.9",
"eslint-plugin-storybook": "^0.8.0",
"prop-types": "^15.8.1",
"storybook": "^8.2.9",
diff --git a/public/index.html b/public/index.html
index 3463473d..22a63a05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,6 +20,10 @@
href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
rel="stylesheet"
/>
+
React App
diff --git a/src/App.css b/src/App.css
index 607653b7..4d2cafdf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -85,21 +85,17 @@
}
.AdBlock {
-
+ border-top: none !important;
+ border-bottom: none !important;
}
.song-table-row {
- border: #61dafb !important;
- border-style: solid !important;
- border-width: 1px !important;
- border-radius: 5px !important;
+
}
.song-table-row:hover {
- border: #61dafb !important;
- border-style: solid !important;
- border-width: 1px !important;
- border-radius: 5px !important;
+ outline: #9b9b9b solid 1px !important;
+ outline-offset: -1px !important;
}
@@ -158,4 +154,31 @@
.menu-block {
font-weight: 400;
font-size: 42px;
+}
+
+.login {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 20px;
+ height: 100%;
+ width: 40%;
+ font-size: 24px;
+ background-color: #fff;
+ margin: 200px;
+}
+
+.login-button {
+ font-family: 'Roboto', sans-serif;
+}
+
+.login-button:hover {
+ background-color: transparent !important;
+ border-color: #ad0000 !important;
+ color: #ad0000 !important;
+}
+
+.bg-gradient {
+ background-image: linear-gradient(-45deg, red 0%, yellow 25%, yellow 51%, #ad0000 100%);
}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 3ee4a537..862f1a78 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,46 +24,14 @@ import { Profilepage } from './pages/Profilepage';
import { Layout } from './components/layoutComponents/Layout';
function App() {
- const [songs, setSongs] = React.useState([]);
- const [albums, setAlbums] = React.useState([]);
- const [genres, setGenres] = React.useState([]);
- const [bands, setBands] = React.useState([]);
- const [playlists, setPlaylist] = React.useState([]);
- const [ads, setAds] = React.useState([]);
-
- async function fetchData() {
-
- const responseSongs = getSongs();
- // const responseAlbums = await axios.get('http://localhost:3000/albums');
- const responseGenres = getGenres();
- // const responseBands = await axios.get('http://localhost:3000/bands');
- const responsePlaylists = getPlaylists();
- const responseAds = getAds();
-
- setSongs((await responseSongs).data);
- // setAlbums(responseAlbums.data);
- setGenres((await responseGenres).data);
- // setBands(responseBands.data);
- setPlaylist((await responsePlaylists).data);
- setAds((await responseAds).data);
- }
-
- useEffect(
- () => {
- fetchData();
- },
- []
- )
-
- const song = songs[1];
return (
-
+
}>
- } />
+ } />
} />
} />
} />
diff --git a/src/components/layoutComponents/AdBlock.tsx b/src/components/layoutComponents/AdBlock.tsx
index f3baa4cf..46d39268 100644
--- a/src/components/layoutComponents/AdBlock.tsx
+++ b/src/components/layoutComponents/AdBlock.tsx
@@ -1,7 +1,10 @@
+import React, { useEffect } from "react";
import { IAdvertisement } from "../../models/IModels";
import { AdCard } from "../cardComponents/AdCard";
+import { getAds } from "../../API/api";
+
+export function AdBlock({ads}: {ads: IAdvertisement[]}) {
-export function AdBlock({ads}: {ads: any[]}) {
return (
{ads.map(ad =>
)}
diff --git a/src/components/layoutComponents/MenuBlock.tsx b/src/components/layoutComponents/MenuBlock.tsx
index fcd8efa5..5a3c7418 100644
--- a/src/components/layoutComponents/MenuBlock.tsx
+++ b/src/components/layoutComponents/MenuBlock.tsx
@@ -18,17 +18,17 @@ export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
const chartTab = {
label: 'Чарт',
key: 'Chart',
- children: songs?
: null
+ children: songs? : null
};
const playlistsTab = {
label: 'Плейлисты',
key: 'Playlists',
- children: playlists && genres ? : null
+ children: playlists && genres ? : null
};
const newSongsTab = {
label: 'Новинки',
key: 'New',
- children: songs? : null
+ children: songs? : null
};
const tabs = [chartTab, playlistsTab, newSongsTab];
diff --git a/src/components/menuComponents/FullPlaylistBlock.tsx b/src/components/menuComponents/FullPlaylistBlock.tsx
index d1bf9686..98c731e1 100644
--- a/src/components/menuComponents/FullPlaylistBlock.tsx
+++ b/src/components/menuComponents/FullPlaylistBlock.tsx
@@ -1,9 +1,10 @@
import { IGenre, IPlaylist } from "../../models/IModels";
-import { getPlaylistsByGenre } from "../../API/api";
+import { getGenres, getPlaylists, getPlaylistsByGenre } from "../../API/api";
import { PlaylistsBlock } from "./PlaylistsBlock";
+import React, { useEffect } from "react";
-export function FullPlaylistBlock({playlists}: {playlists: IPlaylist[]}, {genres}: {genres: IGenre[]}) {
-
+export function FullPlaylistBlock({playlists, genres}: {playlists: IPlaylist[], genres: IGenre[]}) {
+
let genres_list: string[] = [];
let list_of_playlist_list = [];
diff --git a/src/components/menuComponents/SongsBlock.tsx b/src/components/menuComponents/SongsBlock.tsx
index a4e6fb1a..d82a619e 100644
--- a/src/components/menuComponents/SongsBlock.tsx
+++ b/src/components/menuComponents/SongsBlock.tsx
@@ -5,9 +5,21 @@ import { Track } from '../songComponents/Track';
import axios from 'axios';
import { Table, Button, Empty } from 'antd';
import { PlayCircleFilled, PlayCircleOutlined } from '@ant-design/icons';
+import { getSongs } from '../../API/api';
-export function SongsBlock({songs}: {songs: ISong[]}) {
+export function SongsBlock() {
+
+ const [songs, setSongs] = useState([]);
+
+ const fetchData = async () => {
+ const response = getSongs();
+ setSongs((await response).data);
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, []);
const columns = [
{
@@ -50,10 +62,10 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
]
return (
-
+
({...s, play: ''}))}
columns={columns}
diff --git a/src/components/songComponents/CurrentTrack.tsx b/src/components/songComponents/CurrentTrack.tsx
index 0150d368..0e568b39 100644
--- a/src/components/songComponents/CurrentTrack.tsx
+++ b/src/components/songComponents/CurrentTrack.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { Button, Col, Grid, Row, Table } from 'antd';
-import { BackwardFilled, FastForwardFilled, FastBackwardFilled, PlayCircleFilled, PlayCircleOutlined, StepBackwardFilled, StepForwardFilled, HeartOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { BackwardFilled, FastForwardFilled, FastBackwardFilled, PlayCircleFilled, PlayCircleOutlined, StepBackwardFilled, StepForwardFilled, HeartOutlined, ShareAltOutlined, PauseCircleFilled, PauseCircleOutlined } from '@ant-design/icons';
import { ISong, SongProps } from '../../models/IModels';
import styled from 'styled-components'
+import useSound from 'use-sound';
+import { getSongs } from '../../API/api';
const Song = styled.div`
align-items: center;
@@ -10,16 +12,22 @@ const Song = styled.div`
bottom: 0;
width: 75%;`
-export function CurrentTrack() {
+type CurrentSongProps = {
+ song: ISong
+ isPlayingVariable: boolean
+}
- const song = {
+export function CurrentTrack({song, isPlayingVariable}: CurrentSongProps) {
+
+
+ song = {
"id": "5",
"song_name": "Кем я стал",
"band_id": "3",
"band_name": "DSPD",
"albumid": "3",
"album_name": "Album 3",
- "source": "source_path",
+ "source": "../../songs/DSPD feat. даня хренников - Кем я стал_(audio-lord.ru).mp3",
"cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
"playlists": [
"3",
@@ -28,6 +36,20 @@ export function CurrentTrack() {
genre_name: "Rock",
};
+
+ const [isPlaying, setIsPlaying] = useState(isPlayingVariable);
+ const [play, { pause, duration, sound }] = useSound(song.source, {volume: 0.5});
+
+
+ const playingButton = () => {
+ if (isPlaying) {
+ pause();
+ setIsPlaying(false);
+ } else {
+ play();
+ setIsPlaying(true);
+ }
+ };
return (
@@ -35,7 +57,7 @@ export function CurrentTrack() {
}>
- }>
+ : }>
}>
diff --git a/src/index.css b/src/index.css
index ceeeed8f..a677f6dd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,15 +4,9 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ font-family: 'Roboto', sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-
- background-image: url('https://www.fonstola.ru/images/201301/fonstola.ru_86743.jpg');
- background-repeat: no-repeat;
- background-size: cover;
}
code {
@@ -33,4 +27,76 @@ footer {
position: absolute;
bottom: 0;
width: 100%;
+}
+
+.roboto-thin {
+ font-family: "Roboto", sans-serif;
+ font-weight: 100;
+ font-style: normal;
+}
+
+.roboto-light {
+ font-family: "Roboto", sans-serif;
+ font-weight: 300;
+ font-style: normal;
+}
+
+.roboto-regular {
+ font-family: "Roboto", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.roboto-medium {
+ font-family: "Roboto", sans-serif;
+ font-weight: 500;
+ font-style: normal;
+}
+
+.roboto-bold {
+ font-family: "Roboto", sans-serif;
+ font-weight: 700;
+ font-style: normal;
+}
+
+.roboto-black {
+ font-family: "Roboto", sans-serif;
+ font-weight: 900;
+ font-style: normal;
+}
+
+.roboto-thin-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 100;
+ font-style: italic;
+}
+
+.roboto-light-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 300;
+ font-style: italic;
+}
+
+.roboto-regular-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 400;
+ font-style: italic;
+}
+
+.roboto-medium-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 500;
+ font-style: italic;
+}
+
+.roboto-bold-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 700;
+ font-style: italic;
+}
+
+.roboto-black-italic {
+ font-family: "Roboto", sans-serif;
+ font-weight: 900;
+ font-style: italic;
}
\ No newline at end of file
diff --git a/src/models/IModels.ts b/src/models/IModels.ts
index 253d5f6a..2bac27b1 100644
--- a/src/models/IModels.ts
+++ b/src/models/IModels.ts
@@ -24,15 +24,16 @@ export interface IGenre {
export interface ISong {
id: string
song_name: string;
- band_name: string;
- cover: string;
- genreid: string;
- albumid: string;
- source: string;
band_id: string;
+ band_name: string;
+ albumid: string;
album_name: string;
- genre_name: string;
+ source: string;
+ cover: string;
playlists: string[];
+ genreid: string;
+ genre_name: string;
+
}
export interface IPlaylist {
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index f221e982..22962554 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,10 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { getSongs, getGenres, getPlaylists, getAds } from "../API/api";
import { AdBlock } from "../components/layoutComponents/AdBlock";
import { MenuBlock } from "../components/layoutComponents/MenuBlock";
import { CurrentTrack } from "../components/songComponents/CurrentTrack";
-import { IPlaylist, ISong, IAlbum, IGenre, IAdvertisement } from "../models/IModels";
+import { IPlaylist, ISong, IAlbum, IGenre, IAdvertisement, IBand } from "../models/IModels";
+
+
+export function Homepage() {
+ const [albums, setAlbums] = useState([]);
+
+ const [bands, setBands] = useState([]);
+
+ const [songs, setSongs] = useState([]);
+ const [ads, setAds] = useState([]);
+
+
+ const [playlists, setPlaylist] = React.useState([]);
+ const [genres, setGenres] = React.useState([]);
+
+ const fetchData = async () => {
+ const [responseSongs, responseAds, responsePlaylists, responseGenres] = await Promise.all([
+ getSongs(),
+ getAds(),
+ getPlaylists(),
+ getGenres(),
+ ]);
+
+ setSongs(responseSongs.data);
+ setAds(responseAds.data);
+ setPlaylist(responsePlaylists.data);
+ setGenres(responseGenres.data);
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, []);
-export function Homepage({playlists, songs, genres, albums, ads}: {playlists: IPlaylist[], songs: ISong[], genres: IGenre[], albums: IAlbum[], ads: IAdvertisement[]}) {
return (
- <> >
+ <>
+
+
+ >
);
}
\ No newline at end of file
diff --git a/src/pages/Loginpage.tsx b/src/pages/Loginpage.tsx
index 5384ce22..ae1bb407 100644
--- a/src/pages/Loginpage.tsx
+++ b/src/pages/Loginpage.tsx
@@ -1,32 +1,53 @@
-import { Form } from 'antd'
+import { LockOutlined, MailOutlined } from '@ant-design/icons';
+import { Form, Input, Button, Checkbox } from 'antd'
+import { Link } from 'react-router-dom';
export function Loginpage() {
return (
-