From cfbbcf828ae62d96875e33c226ccc49de3d7b8c9 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Tue, 28 Jul 2020 12:05:13 +0200 Subject: [PATCH 1/4] Add server error display --- src/components/App.tsx | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 260c7a1..72512d4 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -25,7 +25,10 @@ const QUERY_ARTISTS = gql` export default function App() { const [inputValue, setInputValue] = useState(''); - const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS); + const [ + getArtists, + { data, error, loading, variables }, + ] = useLazyQuery(QUERY_ARTISTS); const [artists, setArtists] = useState([]); const [suggestions, setSuggestions] = useState([]); const [selected, setSelected] = useState(false); @@ -86,7 +89,7 @@ export default function App() { }; useEffect(() => { - if (data && data.queryArtists !== []) { + if (data && data.queryArtists && data.queryArtists !== []) { // Limit artists to 5 const updatedArtists = data.queryArtists.slice(0, 5); const updatedSuggestions: string[] = updatedArtists.map( @@ -98,6 +101,18 @@ export default function App() { } }, [data]); + // Create flag to filter "No search query" errors + let errorNoSearchQuery = false; + if (error && error.graphQLErrors) { + error.graphQLErrors.forEach((error) => { + if (error.message === 'Error: 400: No search query') { + errorNoSearchQuery = true; + } else { + errorNoSearchQuery = false; + } + }); + } + return (
@@ -110,6 +125,15 @@ export default function App() { {selected && ( )} + {error && !errorNoSearchQuery && ( +
+ 
+						{error.graphQLErrors.map(({ message }, i) => (
+							{message}
+						))}
+
+
+ )} ); } From bae264ec6e37e696be82949e086e6d98c121d2b8 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Tue, 28 Jul 2020 12:15:43 +0200 Subject: [PATCH 2/4] Remove unused div --- src/components/App.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 72512d4..b15c11f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -25,10 +25,9 @@ const QUERY_ARTISTS = gql` export default function App() { const [inputValue, setInputValue] = useState(''); - const [ - getArtists, - { data, error, loading, variables }, - ] = useLazyQuery(QUERY_ARTISTS); + const [getArtists, { data, error, loading, variables }] = useLazyQuery( + QUERY_ARTISTS, + ); const [artists, setArtists] = useState([]); const [suggestions, setSuggestions] = useState([]); const [selected, setSelected] = useState(false); @@ -126,13 +125,11 @@ export default function App() { )} {error && !errorNoSearchQuery && ( -
- 
-						{error.graphQLErrors.map(({ message }, i) => (
-							{message}
-						))}
-
-
+ 
+					{error.graphQLErrors.map(({ message }, i) => (
+						{message}
+					))}
+
)} ); From 60037e1d48b6a82ee9c04778f5837f41c0258529 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Wed, 29 Jul 2020 12:59:56 +0200 Subject: [PATCH 3/4] Improve Search input --- src/components/Search.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 2c40c16..47ab20e 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -19,13 +19,10 @@ export const Search = ({ justify='center' margin={{ top: 'large' }} > - + handleChange(e.target.value)} @@ -33,7 +30,9 @@ export const Search = ({ icon={} dropHeight='large' placeholder='Type an artist name' + autoFocus + aria-label='Search for an artist name' /> -); +); \ No newline at end of file From 1390da577b7c79083a437433f4fb38468f51ad30 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Mon, 3 Aug 2020 00:44:11 +0200 Subject: [PATCH 4/4] Update Readme --- README.md | 16 ++++++++++++++-- src/components/App.tsx | 2 +- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 89ea5b3..a84bb61 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,17 @@ # Spoti Search -A frontend to search for an artist and display its albums +A react application using typescript showing the albums of an artist the user is searching for using a GraphQL endpoint. -## Graphql backend +## Using the app + - Clone the git repo [from here](https://github.com/ruihildt/spoti-search). + - Installing libraries: `yarn install` + - Running the app: `yarn start` + - Build the app to deploy it: `yarn build` + +## Tech Stack + - [CRA with Typescript](https://create-react-app.dev/docs/adding-typescript/) + - [Apollo / GraphQL](https://www.apollographql.com/docs/react/) + - [Grommet](https://v2.grommet.io/) (an accessible framework/component library for react) + - [Lodash](https://lodash.com/) (for debouncing the query) + +## Graphql endpoint https://spotify-graphql-server.herokuapp.com/graphql \ No newline at end of file diff --git a/src/components/App.tsx b/src/components/App.tsx index b15c11f..172ec9f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -25,7 +25,7 @@ const QUERY_ARTISTS = gql` export default function App() { const [inputValue, setInputValue] = useState(''); - const [getArtists, { data, error, loading, variables }] = useLazyQuery( + const [getArtists, { data, error }] = useLazyQuery( QUERY_ARTISTS, ); const [artists, setArtists] = useState([]);