parent
31196ffdf5
commit
b282a002b8
10 changed files with 469 additions and 364 deletions
@ -1 +1,13 @@ |
|||||||
Started from: https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/ |
Started from: https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/ |
||||||
|
|
||||||
|
|
||||||
|
TODO: |
||||||
|
|
||||||
|
- Ranking system |
||||||
|
- Have "ranking contexts". These can be stored in the database. |
||||||
|
- Per artist (this removes need for "per album", which can be a subset) |
||||||
|
- Per tag |
||||||
|
- Per playlist |
||||||
|
- Have a linking table between contexts <-> artists/songs. This linking table should include an optional ranking score. |
||||||
|
- The ranking score allows ranking songs per query or per query element. It is a floating point so we can always insert stuff in between. |
||||||
|
- Visually, the system shows ranked items in a table and unranked items in another. User can drag to rank. |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { Paper } from '@material-ui/core'; |
||||||
|
import { DisplayItem } from '../types/DisplayItem'; |
||||||
|
import ItemListItem from './ItemListItem'; |
||||||
|
import ItemList from './ItemList'; |
||||||
|
import * as serverApi from '../api'; |
||||||
|
import StoreIcon from '@material-ui/icons/Store'; |
||||||
|
import { ReactComponent as GooglePlayIcon } from '../assets/googleplaymusic_icon.svg'; |
||||||
|
|
||||||
|
|
||||||
|
export interface SongItem extends serverApi.SongDetails { |
||||||
|
songSignature: any |
||||||
|
} |
||||||
|
export function isSongItem(q: any): q is SongItem { |
||||||
|
return 'songSignature' in q; |
||||||
|
} |
||||||
|
export function toSongItem(i: serverApi.SongDetails) { |
||||||
|
const r: any = i; |
||||||
|
r['songSignature'] = true; |
||||||
|
return r; |
||||||
|
} |
||||||
|
|
||||||
|
export interface ArtistItem extends serverApi.ArtistDetails { |
||||||
|
artistSignature: any |
||||||
|
} |
||||||
|
export function isArtistItem(q: any): q is ArtistItem { |
||||||
|
return 'artistSignature' in q; |
||||||
|
} |
||||||
|
export function toArtistItem(i: serverApi.ArtistDetails) { |
||||||
|
const r: any = i; |
||||||
|
r['artistSignature'] = true; |
||||||
|
return r; |
||||||
|
} |
||||||
|
|
||||||
|
export type Item = SongItem | ArtistItem; |
||||||
|
|
||||||
|
const getStoreIcon = (url: String) => { |
||||||
|
if (url.includes('play.google.com')) { |
||||||
|
return <GooglePlayIcon height='30px' width='30px' />; |
||||||
|
} |
||||||
|
return <StoreIcon />; |
||||||
|
} |
||||||
|
|
||||||
|
function toDisplayItem(item: Item): DisplayItem | undefined { |
||||||
|
if (isSongItem(item)) { |
||||||
|
return { |
||||||
|
title: item.title, |
||||||
|
artistNames: item.artists && item.artists.map((artist: serverApi.ArtistDetails) => { |
||||||
|
return artist.name; |
||||||
|
}) || ['Unknown'], |
||||||
|
tagNames: item.tags && item.tags.map((tag: serverApi.TagDetails) => { |
||||||
|
return tag.name; |
||||||
|
}) || [], |
||||||
|
storeLinks: item.storeLinks && item.storeLinks.map((url: String) => { |
||||||
|
return { |
||||||
|
icon: getStoreIcon(url), |
||||||
|
url: url |
||||||
|
} |
||||||
|
}) || [], |
||||||
|
} |
||||||
|
} else if (isArtistItem(item)) { |
||||||
|
return { |
||||||
|
name: item.name ? item.name : "Unknown", |
||||||
|
tagNames: [], // TODO
|
||||||
|
storeLinks: item.storeLinks && item.storeLinks.map((url: String) => { |
||||||
|
return { |
||||||
|
icon: getStoreIcon(url), |
||||||
|
url: url |
||||||
|
} |
||||||
|
}) || [], |
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
items: Item[] |
||||||
|
} |
||||||
|
|
||||||
|
export default function BrowseWindow(props: IProps) { |
||||||
|
return <Paper> |
||||||
|
<ItemList> |
||||||
|
{props.items.map((item: Item) => { |
||||||
|
const di = toDisplayItem(item); |
||||||
|
return di && <ItemListItem item={di} />; |
||||||
|
})} |
||||||
|
</ItemList> |
||||||
|
</Paper>; |
||||||
|
} |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
|
||||||
|
import { Query, toApiQuery } from '../types/Query'; |
||||||
|
import FilterControl from './FilterControl'; |
||||||
|
import * as serverApi from '../api'; |
||||||
|
import BrowseWindow, { toSongItem, toArtistItem, Item } from './BrowseWindow'; |
||||||
|
import { FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox } from '@material-ui/core'; |
||||||
|
|
||||||
|
const _ = require('lodash'); |
||||||
|
|
||||||
|
export interface TypesIncluded { |
||||||
|
songs: boolean, |
||||||
|
artists: boolean, |
||||||
|
tags: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
interface ItemTypeCheckboxesProps { |
||||||
|
types: TypesIncluded, |
||||||
|
onChange: (types: TypesIncluded) => void; |
||||||
|
} |
||||||
|
|
||||||
|
function ItemTypeCheckboxes(props: ItemTypeCheckboxesProps) { |
||||||
|
const songChange = (v: any) => { |
||||||
|
props.onChange({ |
||||||
|
songs: v.target.checked, |
||||||
|
artists: props.types.artists, |
||||||
|
tags: props.types.tags |
||||||
|
}); |
||||||
|
} |
||||||
|
const artistChange = (v: any) => { |
||||||
|
props.onChange({ |
||||||
|
songs: props.types.songs, |
||||||
|
artists: v.target.checked, |
||||||
|
tags: props.types.tags |
||||||
|
}); |
||||||
|
} |
||||||
|
const tagChange = (v: any) => { |
||||||
|
props.onChange({ |
||||||
|
songs: props.types.songs, |
||||||
|
artists: props.types.artists, |
||||||
|
tags: v.target.checked |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return <FormControl component='fieldset'> |
||||||
|
<FormLabel component='legend'>Result types</FormLabel> |
||||||
|
<FormGroup> |
||||||
|
<FormControlLabel |
||||||
|
control={<Checkbox checked={props.types.songs} onChange={songChange} name='Songs' />} |
||||||
|
label="Songs" |
||||||
|
/> |
||||||
|
<FormControlLabel |
||||||
|
control={<Checkbox checked={props.types.artists} onChange={artistChange} name='Artists' />} |
||||||
|
label="Artists" |
||||||
|
/> |
||||||
|
<FormControlLabel |
||||||
|
control={<Checkbox checked={props.types.tags} onChange={tagChange} name='Tags' />} |
||||||
|
label="Tags" |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</FormControl>; |
||||||
|
} |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
query: Query | undefined, |
||||||
|
typesIncluded: TypesIncluded, |
||||||
|
onQueryChange: (q: Query) => void, |
||||||
|
onTypesChange: (t: TypesIncluded) => void, |
||||||
|
} |
||||||
|
|
||||||
|
export default function QueryBrowseWindow(props: IProps) { |
||||||
|
const [songs, setSongs] = useState<serverApi.SongDetails[]>([]); |
||||||
|
const [artists, setArtists] = useState<serverApi.ArtistDetails[]>([]); |
||||||
|
//const [tags, setTags] = useState<serverApi.TagDetails[]>([]);
|
||||||
|
|
||||||
|
const songItems: Item[] = songs.map(toSongItem); |
||||||
|
const artistItems: Item[] = artists.map(toArtistItem); |
||||||
|
|
||||||
|
var items: Item[] = []; |
||||||
|
props.typesIncluded.songs && items.push(...songItems); |
||||||
|
props.typesIncluded.artists && items.push(...artistItems); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!props.query) { return; } |
||||||
|
const q = _.cloneDeep(props.query); |
||||||
|
|
||||||
|
const request: serverApi.QueryRequest = { |
||||||
|
query: toApiQuery(props.query), |
||||||
|
songOffset: 0, |
||||||
|
songLimit: 5, // TODO
|
||||||
|
artistOffset: 0, |
||||||
|
artistLimit: 5, |
||||||
|
tagOffset: 0, |
||||||
|
tagLimit: 5, |
||||||
|
} |
||||||
|
const requestOpts = { |
||||||
|
method: 'POST', |
||||||
|
headers: { 'Content-Type': 'application/json' }, |
||||||
|
body: JSON.stringify(request) |
||||||
|
}; |
||||||
|
fetch(serverApi.QueryEndpoint, requestOpts) |
||||||
|
.then((response: any) => response.json()) |
||||||
|
.then((json: any) => { |
||||||
|
'songs' in json && _.isEqual(q, props.query) && setSongs(json.songs); |
||||||
|
'artists' in json && _.isEqual(q, props.query) && setArtists(json.artists); |
||||||
|
}); |
||||||
|
}, [props.query]); |
||||||
|
|
||||||
|
return <> |
||||||
|
<FilterControl |
||||||
|
query={props.query} |
||||||
|
onChangeQuery={props.onQueryChange} |
||||||
|
/> |
||||||
|
<ItemTypeCheckboxes |
||||||
|
types={props.typesIncluded} |
||||||
|
onChange={props.onTypesChange} |
||||||
|
/> |
||||||
|
<BrowseWindow items={items} /> |
||||||
|
</> |
||||||
|
} |
||||||
@ -0,0 +1,145 @@ |
|||||||
|
const models = require('../models'); |
||||||
|
const { Op } = require("sequelize"); |
||||||
|
import * as api from '../../client/src/api'; |
||||||
|
import { EndpointError, EndpointHandler, catchUnhandledErrors } from './types'; |
||||||
|
|
||||||
|
enum QueryType { |
||||||
|
Song = 0, |
||||||
|
Artist, |
||||||
|
Tag, |
||||||
|
} |
||||||
|
|
||||||
|
const sequelizeOps: any = { |
||||||
|
[api.QueryFilterOp.Eq]: Op.eq, |
||||||
|
[api.QueryFilterOp.Ne]: Op.ne, |
||||||
|
[api.QueryFilterOp.In]: Op.in, |
||||||
|
[api.QueryFilterOp.NotIn]: Op.notIn, |
||||||
|
[api.QueryFilterOp.Like]: Op.like, |
||||||
|
[api.QueryElemOp.And]: Op.and, |
||||||
|
[api.QueryElemOp.Or]: Op.or, |
||||||
|
}; |
||||||
|
|
||||||
|
const sequelizeProps: any = { |
||||||
|
[QueryType.Song]: { |
||||||
|
[api.QueryElemProperty.songTitle]: "title", |
||||||
|
[api.QueryElemProperty.songId]: "id", |
||||||
|
[api.QueryElemProperty.artistName]: "$Artists.name$", |
||||||
|
[api.QueryElemProperty.albumName]: "$Albums.name$", |
||||||
|
}, |
||||||
|
[QueryType.Artist]: { |
||||||
|
[api.QueryElemProperty.songTitle]: "$Songs.title$", |
||||||
|
[api.QueryElemProperty.songId]: "$Songs.id$", |
||||||
|
[api.QueryElemProperty.artistName]: "name", |
||||||
|
[api.QueryElemProperty.albumName]: "$Albums.name$", |
||||||
|
}, |
||||||
|
[QueryType.Tag]: { |
||||||
|
[api.QueryElemProperty.songTitle]: "$Songs.title$", |
||||||
|
[api.QueryElemProperty.songId]: "$Songs.id$", |
||||||
|
[api.QueryElemProperty.artistName]: "$Artists.name$", |
||||||
|
[api.QueryElemProperty.albumName]: "$Albums.name$", |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Returns the "where" clauses for Sequelize, per object type.
|
||||||
|
const getSequelizeWhere = (queryElem: api.QueryElem, type: QueryType) => { |
||||||
|
var where: any = { |
||||||
|
[Op.and]: [] |
||||||
|
}; |
||||||
|
|
||||||
|
if (queryElem.prop && queryElem.propOperator && queryElem.propOperand) { |
||||||
|
// Visit a filter-like subquery leaf.
|
||||||
|
where[Op.and].push({ |
||||||
|
[sequelizeProps[type][queryElem.prop]]: { |
||||||
|
[sequelizeOps[queryElem.propOperator]]: queryElem.propOperand |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
if (queryElem.childrenOperator && queryElem.children) { |
||||||
|
// Recursively visit a nested subquery.
|
||||||
|
|
||||||
|
const children = queryElem.children.map((child: api.QueryElem) => getSequelizeWhere(child, type)); |
||||||
|
where[Op.and].push({ |
||||||
|
[sequelizeOps[queryElem.childrenOperator]]: children |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return where; |
||||||
|
} |
||||||
|
|
||||||
|
export const QueryEndpointHandler: EndpointHandler = async (req: any, res: any) => { |
||||||
|
if (!api.checkQueryRequest(req.body)) { |
||||||
|
const e: EndpointError = { |
||||||
|
internalMessage: 'Invalid Query request: ' + JSON.stringify(req.body), |
||||||
|
httpStatus: 400 |
||||||
|
}; |
||||||
|
throw e; |
||||||
|
} |
||||||
|
const reqObject: api.QueryRequest = req.body; |
||||||
|
|
||||||
|
try { |
||||||
|
const songs = (reqObject.songLimit > 0) && await models.Song.findAll({ |
||||||
|
// NOTE: have to disable limit and offset because of bug: https://github.com/sequelize/sequelize/issues/11938.
|
||||||
|
// Custom pagination is implemented before responding.
|
||||||
|
where: getSequelizeWhere(reqObject.query, QueryType.Song), |
||||||
|
include: [models.Artist, models.Album, models.Tag], |
||||||
|
//limit: reqObject.limit,
|
||||||
|
//offset: reqObject.offset,
|
||||||
|
}) |
||||||
|
const artists = (reqObject.artistLimit > 0) && await models.Artist.findAll({ |
||||||
|
// NOTE: have to disable limit and offset because of bug: https://github.com/sequelize/sequelize/issues/11938.
|
||||||
|
// Custom pagination is implemented before responding.
|
||||||
|
where: getSequelizeWhere(reqObject.query, QueryType.Artist), |
||||||
|
include: [models.Song, models.Album, models.Tag], |
||||||
|
//limit: reqObject.limit,
|
||||||
|
//offset: reqObject.offset,
|
||||||
|
}) |
||||||
|
const tags = (reqObject.tagLimit > 0) && await models.Tag.findAll({ |
||||||
|
// NOTE: have to disable limit and offset because of bug: https://github.com/sequelize/sequelize/issues/11938.
|
||||||
|
// Custom pagination is implemented before responding.
|
||||||
|
where: getSequelizeWhere(reqObject.query, QueryType.Tag), |
||||||
|
include: [models.Song, models.Album, models.Artist], |
||||||
|
//limit: reqObject.limit,
|
||||||
|
//offset: reqObject.offset,
|
||||||
|
}) |
||||||
|
|
||||||
|
const response: api.QueryResponse = { |
||||||
|
songs: (reqObject.songLimit <= 0) ? [] : await Promise.all(songs.map(async (song: any) => { |
||||||
|
const artists = await song.getArtists(); |
||||||
|
const tags = await song.getTags(); |
||||||
|
return <api.SongDetails>{ |
||||||
|
id: song.id, |
||||||
|
title: song.title, |
||||||
|
storeLinks: song.storeLinks, |
||||||
|
artists: artists.map((artist: any) => { |
||||||
|
return <api.ArtistDetails>{ |
||||||
|
id: artist.id, |
||||||
|
name: artist.name, |
||||||
|
} |
||||||
|
}), |
||||||
|
tags: tags.map((tag: any) => { |
||||||
|
return <api.TagDetails>{ |
||||||
|
id: tag.id, |
||||||
|
name: tag.name, |
||||||
|
} |
||||||
|
}), |
||||||
|
}; |
||||||
|
}).slice(reqObject.songOffset, reqObject.songOffset + reqObject.songLimit)), |
||||||
|
// TODO: custom pagination due to bug mentioned above
|
||||||
|
artists: (reqObject.artistLimit <= 0) ? [] : await Promise.all(artists.map(async (artist: any) => { |
||||||
|
return <api.ArtistDetails>{ |
||||||
|
id: artist.id, |
||||||
|
name: artist.name, |
||||||
|
}; |
||||||
|
}).slice(reqObject.artistOffset, reqObject.artistOffset + reqObject.artistLimit)), |
||||||
|
tags: (reqObject.tagLimit <= 0) ? [] : await Promise.all(tags.map(async (tag: any) => { |
||||||
|
return <api.TagDetails>{ |
||||||
|
id: tag.id, |
||||||
|
name: tag.name, |
||||||
|
}; |
||||||
|
}).slice(reqObject.tagOffset, reqObject.tagOffset + reqObject.tagLimit)), |
||||||
|
}; |
||||||
|
res.send(response); |
||||||
|
} catch (e) { |
||||||
|
catchUnhandledErrors(e); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,98 +0,0 @@ |
|||||||
const models = require('../models'); |
|
||||||
const { Op } = require("sequelize"); |
|
||||||
import * as api from '../../client/src/api'; |
|
||||||
import { EndpointError, EndpointHandler, catchUnhandledErrors } from './types'; |
|
||||||
|
|
||||||
const sequelizeOps: any = { |
|
||||||
[api.SongQueryFilterOp.Eq]: Op.eq, |
|
||||||
[api.SongQueryFilterOp.Ne]: Op.ne, |
|
||||||
[api.SongQueryFilterOp.In]: Op.in, |
|
||||||
[api.SongQueryFilterOp.NotIn]: Op.notIn, |
|
||||||
[api.SongQueryFilterOp.Like]: Op.like, |
|
||||||
[api.SongQueryElemOp.And]: Op.and, |
|
||||||
[api.SongQueryElemOp.Or]: Op.or, |
|
||||||
}; |
|
||||||
|
|
||||||
const sequelizeProps: any = { |
|
||||||
[api.SongQueryElemProperty.title]: "title", |
|
||||||
[api.SongQueryElemProperty.id]: "id", |
|
||||||
[api.SongQueryElemProperty.artistNames]: "$Artists.name$", |
|
||||||
[api.SongQueryElemProperty.albumNames]: "$Albums.name$", |
|
||||||
}; |
|
||||||
|
|
||||||
// Returns the "where" clauses for Sequelize, per object type.
|
|
||||||
const getSequelizeWhere = (queryElem: api.SongQueryElem) => { |
|
||||||
var where: any = { |
|
||||||
[Op.and]: [] |
|
||||||
}; |
|
||||||
|
|
||||||
if (queryElem.prop && queryElem.propOperator && queryElem.propOperand) { |
|
||||||
// Visit a filter-like subquery leaf.
|
|
||||||
where[Op.and].push({ |
|
||||||
[sequelizeProps[queryElem.prop]]: { |
|
||||||
[sequelizeOps[queryElem.propOperator]]: queryElem.propOperand |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
if (queryElem.childrenOperator && queryElem.children) { |
|
||||||
// Recursively visit a nested subquery.
|
|
||||||
|
|
||||||
const children = queryElem.children.map((child: api.SongQueryElem) => getSequelizeWhere(child)); |
|
||||||
where[Op.and].push({ |
|
||||||
[sequelizeOps[queryElem.childrenOperator]]: children |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return where; |
|
||||||
} |
|
||||||
|
|
||||||
export const QuerySongsEndpointHandler: EndpointHandler = async (req: any, res: any) => { |
|
||||||
if (!api.checkQuerySongsRequest(req.body)) { |
|
||||||
const e: EndpointError = { |
|
||||||
internalMessage: 'Invalid QuerySongs request: ' + JSON.stringify(req.body), |
|
||||||
httpStatus: 400 |
|
||||||
}; |
|
||||||
throw e; |
|
||||||
} |
|
||||||
const reqObject: api.QuerySongsRequest = req.body; |
|
||||||
|
|
||||||
try { |
|
||||||
console.log('Song query:', reqObject.query, "where: ", getSequelizeWhere(reqObject.query)) |
|
||||||
const songs = await models.Song.findAll({ |
|
||||||
// NOTE: have to disable limit and offset because of bug: https://github.com/sequelize/sequelize/issues/11938.
|
|
||||||
// Custom pagination is implemented before responding.
|
|
||||||
where: getSequelizeWhere(reqObject.query), |
|
||||||
include: [models.Artist, models.Album, models.Tag], |
|
||||||
//limit: reqObject.limit,
|
|
||||||
//offset: reqObject.offset,
|
|
||||||
}) |
|
||||||
|
|
||||||
const response: api.QuerySongsResponse = { |
|
||||||
songs: await Promise.all(songs.map(async (song: any) => { |
|
||||||
const artists = await song.getArtists(); |
|
||||||
const tags = await song.getTags(); |
|
||||||
return <api.SongDetails>{ |
|
||||||
id: song.id, |
|
||||||
title: song.title, |
|
||||||
storeLinks: song.storeLinks, |
|
||||||
artists: artists.map((artist: any) => { |
|
||||||
return <api.ArtistDetails>{ |
|
||||||
id: artist.id, |
|
||||||
name: artist.name, |
|
||||||
} |
|
||||||
}), |
|
||||||
tags: tags.map((tag: any) => { |
|
||||||
return <api.TagDetails>{ |
|
||||||
id: tag.id, |
|
||||||
name: tag.name, |
|
||||||
} |
|
||||||
}), |
|
||||||
}; |
|
||||||
}).slice(reqObject.offset, reqObject.offset + reqObject.limit)) |
|
||||||
// TODO: custom pagination due to bug mentioned above
|
|
||||||
}; |
|
||||||
res.send(response); |
|
||||||
} catch (e) { |
|
||||||
catchUnhandledErrors(e); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue