Fetches artist and shows name

client/src/api.ts

@@ -130,7 +130,7 @@ export function checkQueryElem(elem: any): boolean {
         });
     }
     return (elem.childrenOperator && elem.children) ||
-        (elem.prop && elem.propOperand && elem.propOperator) ||
+        ("prop" in elem && "propOperand" in elem && "propOperator" in elem) ||
         Object.keys(elem).length === 0;
 }
 export function checkQueryRequest(req: any): boolean {

client/src/components/MainWindow.tsx

@@ -5,7 +5,7 @@ import AppBar from './appbar/AppBar';
 import QueryWindow, { QueryWindowReducer, QueryWindowState } from './windows/QueryWindow';
 import { NewTabProps } from './appbar/AddTabMenu';
 import { newWindowState, newWindowReducer, WindowState, WindowType } from './windows/Windows';
-import EditArtistWindow from './windows/EditArtistWindow';
+import ArtistWindow from './windows/ArtistWindow';
 var _ = require('lodash');
 
 const darkTheme = createMuiTheme({
@@ -99,8 +99,8 @@ export default function MainWindow(props: any) {
                     state={tabState}
                     dispatch={tabDispatch}
                 />
-            case WindowType.EditArtist:
-                return <EditArtistWindow
+            case WindowType.Artist:
+                return <ArtistWindow
                     state={tabState}
                     dispatch={tabDispatch}
                 />

client/src/components/appbar/AddTabMenu.tsx

@@ -23,7 +23,7 @@ export default function AddTabMenu(props: IProps) {
         <MenuItem disabled={true}>New Tab</MenuItem>
         {([
             WindowType.Query,
-            WindowType.EditArtist
+            WindowType.Artist
         ]).map((v: WindowType) => <MenuItem
             onClick={() => {
                 props.onClose();

client/src/components/windows/ArtistWindow.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import { Box } from '@material-ui/core';
+import * as serverApi from '../../api';
+
+export interface ArtistMetadata {
+    name: string,
+}
+
+export interface ArtistWindowState {
+    artistId: number,
+    metadata: ArtistMetadata | null,
+}
+
+export enum ArtistWindowStateActions {
+    SetMetadata = "SetMetadata",
+}
+
+export function ArtistWindowReducer(state: ArtistWindowState, action: any) {
+    switch (action.type) {
+        case ArtistWindowStateActions.SetMetadata:
+            return { ...state, metadata: action.value }
+        default:
+            throw new Error("Unimplemented QueryWindow state update.")
+    }
+}
+
+export interface IProps {
+    state: ArtistWindowState,
+    dispatch: (action: any) => void
+}
+
+export async function getArtistMetadata(id: number) {
+    const query = {
+        prop: serverApi.QueryElemProperty.artistId,
+        propOperand: id,
+        propOperator: serverApi.QueryFilterOp.Eq,
+    };
+
+    var q: serverApi.QueryRequest = {
+        query: query,
+        offsetsLimits: {
+            artistOffset: 0,
+            artistLimit: 1,
+        },
+        ordering: {
+            orderBy: {
+                type: serverApi.OrderByType.Name,
+            },
+            ascending: true,
+        },
+    };
+
+    const requestOpts = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(q),
+    };
+
+    return (async () => {
+        const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts)
+        let json: any = await response.json();
+        let artist = json.artists[0];
+        return {
+            name: artist.name
+        }
+    })();
+}
+
+export default function ArtistWindow(props: IProps) {
+    let metadata = props.state.metadata;
+
+    useEffect(() => {
+        getArtistMetadata(props.state.artistId)
+            .then((m: ArtistMetadata) => {
+                console.log("metadata", m);
+                props.dispatch({
+                    type: ArtistWindowStateActions.SetMetadata,
+                    value: m
+                });
+            })
+    }, []);
+
+    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+        <Box
+            m={1}
+            width="80%"
+        >
+            {metadata && metadata.name}
+        </Box>
+    </Box>
+}

client/src/components/windows/EditArtistWindow.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Box } from '@material-ui/core';
-
-export interface EditArtistWindowState {
-
-}
-
-export enum EditArtistWindowStateActions {
-}
-
-export function EditArtistWindowReducer(state: EditArtistWindowState, action: any) {
-    return state;
-}
-
-export interface IProps {
-    state: EditArtistWindowState,
-    dispatch: (action: any) => void
-}
-
-export default function EditArtistWindow(props: IProps) {
-    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
-        <Box
-            m={1}
-            width="80%"
-        >
-            Hello!
-        </Box>
-    </Box>
-}

client/src/components/windows/Windows.tsx

@@ -1,16 +1,16 @@
 import { QueryWindowReducer, QueryWindowState } from "./QueryWindow";
-import { EditArtistWindowReducer, EditArtistWindowState } from "./EditArtistWindow";
+import { ArtistWindowReducer, ArtistWindowState } from "./ArtistWindow";
 
 export enum WindowType {
     Query = "Query",
-    EditArtist = "EditArtist",
+    Artist = "Artist",
 }
 
-export type WindowState = QueryWindowState | EditArtistWindowState;
+export type WindowState = QueryWindowState | ArtistWindowState;
 
 export const newWindowReducer = {
     [WindowType.Query]: QueryWindowReducer,
-    [WindowType.EditArtist]: EditArtistWindowReducer,
+    [WindowType.Artist]: ArtistWindowReducer,
 }
 
 export const newWindowState = {
@@ -21,7 +21,10 @@ export const newWindowState = {
             resultsForQuery: null,
         };
     },
-    [WindowType.EditArtist]: () => {
-
+    [WindowType.Artist]: () => {
+        return {
+            artistId: 1,
+            metadata: null,
+        }
     }
 }

server/endpoints/QueryEndpointHandler.ts

@@ -377,6 +377,8 @@ export const QueryEndpointHandler: EndpointHandler = async (req: any, res: any,
             }),
         }
 
+        console.log("Query repsonse", response);
+
         res.send(response);
     } catch (e) {
         catchUnhandledErrors(e);