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