Skip to content
Permalink
Browse files

TypeScript: Update to 3.7/ Add Artist view

  • Loading branch information
tvillarete committed Dec 25, 2019
1 parent ba23a74 commit cc5fd5d530d4c17964dd29fd41bba3149d9a837a
1 .env

This file was deleted.

@@ -10,12 +10,14 @@
"@types/react-dom": "16.9.2",
"@types/styled-components": "^4.1.19",
"apollo-boost": "^0.4.7",
"apollo-client": "^2.6.4",
"apollo-utilities": "^1.3.2",
"graphql": "^14.5.8",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0",
"react-scripts": "^3.3.0-next.80",
"styled-components": "^4.4.0",
"typescript": "3.6.4"
"typescript": "3.7.3"
},
"scripts": {
"start": "react-scripts start",
@@ -0,0 +1,54 @@
import React, { useState, useEffect } from "react";
import { SelectableList, SelectableListOption } from "components";
import { useScrollHandler } from "hooks";
import ViewIds from "..";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";

type AlbumQuery = {
album: [
{
id: string;
name: string;
}
];
};

const ALBUM = gql`
query Album($name: String!) {
album(name: $name) {
id
name
}
}
`;

interface Props {
name: string;
}

const AlbumView = ({ name }: Props) => {
const { loading, error, data } = useQuery<AlbumQuery>(ALBUM, {
variables: { name }
});
const [options, setOptions] = useState<SelectableListOption[]>([]);

useEffect(() => {
if (data && data.album && !error) {
setOptions(
data.album.map(result => ({
label: result.name,
value: "Artist",
}))
);
}
}, [data, error]);

const [index] = useScrollHandler(ViewIds.album, options);

return (
<SelectableList loading={loading} options={options} activeIndex={index} />
);
};

export default AlbumView;
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { SelectableList, SelectableListOption } from "components";
import { useScrollHandler } from "hooks";
import ViewIds from "..";
import ViewIds, { AlbumView } from "App/views";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";

@@ -41,8 +41,9 @@ const ArtistView = ({ name }: Props) => {
setOptions(
data.artist.map(result => ({
label: result.album,
value: "Artist",
image: getArtwork(result.artwork)
value: () => <AlbumView name={result.album} />,
image: getArtwork(result.artwork),
viewId: "Album"
}))
);
}
@@ -30,6 +30,7 @@ const ArtistsView = () => {
setOptions(
data.artists.map(result => ({
label: result.artist,
viewId: ViewIds.artist,
value: () => <ArtistView name={result.artist} />
}))
);
@@ -0,0 +1,19 @@
import React from "react";
import { SelectableList, SelectableListOption } from "components";
import { useScrollHandler } from "hooks";
import ViewIds, { BrickGameView } from "App/views";

const options: SelectableListOption[] = [
{
label: "Brick",
value: () => <BrickGameView />
}
];

const GamesView = () => {
const [index] = useScrollHandler(ViewIds.games, options);

return <SelectableList options={options} activeIndex={index} />;
};

export default GamesView;
@@ -1,7 +1,7 @@
import React from "react";
import { SelectableList, SelectableListOption } from "components";
import { useScrollHandler } from "hooks";
import ViewIds, { MusicView, ArtistsView, BrickGameView } from "App/views";
import ViewIds, { MusicView, ArtistsView, GamesView } from "App/views";

const options: SelectableListOption[] = [
{
@@ -13,8 +13,8 @@ const options: SelectableListOption[] = [
value: () => <ArtistsView />
},
{
label: "Brick",
value: () => <BrickGameView />
label: "Games",
value: () => <GamesView />
}
];

@@ -2,13 +2,17 @@ export { default as HomeView } from "./HomeView";
export { default as MusicView } from "./MusicView";
export { default as ArtistsView } from "./ArtistsView";
export { default as ArtistView } from "./ArtistView";
export { default as AlbumView } from "./AlbumView";
export { default as GamesView } from "./GamesView";
export { default as BrickGameView } from "./BrickGameView";

const ViewIds: Record<string, string> = {
home: "Home",
music: "Music",
artists: "Artists",
artist: "Artist",
album: "Album",
games: "Games",
brickGame: "Brick"
};

@@ -6,6 +6,7 @@ import { LoadingIndicator } from "components";
export interface SelectableListOption {
label: string;
value: any;
viewId?: string;
image?: string;
}

@@ -1,3 +1,2 @@
export { default as useStateRef } from "./useStateRef";
export { default as useEventListener } from "./useEventListener";
export { default as useScrollHandler } from "./useScrollHandler";
@@ -29,11 +29,13 @@ const useScrollHandler = (
const centerClick = useCallback(() => {
if (!isActive) return;

const View = options[index].value;
const option = options[index];
const View = option.value;
const viewId = option.viewId || option.label;

showWindow({
type: WINDOW_TYPE.FULL,
id: options[index].label,
id: viewId,
component: View
});
}, [index, isActive, options, showWindow]);

This file was deleted.

@@ -14,10 +14,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"jsx": "react"
},
"include": ["src"],
"exclude": [
"*.jsx"
]
"exclude": ["*.jsx"],
}

0 comments on commit cc5fd5d

Please sign in to comment.
You can’t perform that action at this time.