prettier rc, Countries file, ReadMe instructions

Author: ksample89

.prettierrc

@@ -1,9 +1,9 @@
 {
-  "printWidth": 80,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "semi": false,
   "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
   "singleQuote": true,
   "trailingComma": "all",
-  "arrowParens": "avoid"
-}
+  "useTabs": false
+}

README.md

@@ -4,9 +4,9 @@ This is a simple web app that based on the [react-boilerplate CRA template](http
 
 It currently has two pages, an index and a `/countries` page which downloads a list of countries from the CareRev API and displays links to a country detail page. Right now the link leads to a 404. Your task is to add the missing route which will download the details for the selected country and display them.
 
-**NOTE:** The task is broken up into smaller steps and shouldn't take more than an hour or two in total. If you find yourself stuck on any step, simply note where you ran into any problems and what you were trying to do so we can discuss it later, then move on to the next step.
+**NOTE:** If you find yourself stuck on any step, simply note where you ran into any problems and what you were trying to do so we can discuss it later, then move on to the next step.
 
-1. Get the app running with `yarn install` and `yarn start`
+1. Get the app running with `npm install` and `npm start`
 
 2. Add a route for `/country/:id`
 
@@ -20,6 +20,12 @@ It currently has two pages, an index and a `/countries` page which downloads a l
 
 7. Display that country's name and currency code in the container when it loads, using the selector(s).
 
-8. Bonus (optional): Add an error view in case the data fetching has a problem.
+8. Add an error view in case the data fetching has a problem.
 
-This added container should function roughly like the existing `Countries` container. In the interview, we'll discuss this app, ways to improve it, architectural concepts, best practices and what ideas you think are important in making a strong, reliable and easy to use app.
+9. Style the page with tailwind.
+
+10. Ensure the page meets accessibility standards.
+
+11. Add unit tests.
+
+This added container should function roughly like the existing `Countries` container. In the interview, we'll discuss this app, ways to improve it, architectural concepts, best practices and what ideas you think are important in making a strong, reliable and easy to use app.

src/app/containers/Countries/index.tsx

@@ -1,53 +1,41 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components/macro';
-import { useSelector, useDispatch } from 'react-redux';
-import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors';
-import { saga } from './saga';
-import { key, countriesReducer } from './reducer';
-import { actions } from './actions';
-import { selectCountries, selectLoading, selectError } from './selectors';
-import { LoadingIndicator } from 'app/components/LoadingIndicator';
-import { Link } from 'app/components/Link';
-import { PageWrapper } from 'app/components/PageWrapper';
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors'
+import { saga } from './saga'
+import { key, countriesReducer } from './reducer'
+import { actions } from './actions'
+import { selectCountries, selectLoading, selectError } from './selectors'
+import { LoadingIndicator } from 'app/components/LoadingIndicator'
+import { Link } from 'app/components/Link'
+import { PageWrapper } from 'app/components/PageWrapper'
 
-export function Countries() {
-  useInjectReducer({ key: key, reducer: countriesReducer });
-  useInjectSaga({ key: key, saga });
+export const Countries = () => {
+  useInjectReducer({ key: key, reducer: countriesReducer })
+  useInjectSaga({ key: key, saga })
 
-  const countries = useSelector(selectCountries);
-  const isLoading = useSelector(selectLoading);
-  const error = useSelector(selectError);
+  const countries = useSelector(selectCountries)
+  const isLoading = useSelector(selectLoading)
+  const error = useSelector(selectError)
 
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
   useEffect(() => {
-    dispatch(actions.fetchCountries());
-  }, [dispatch]);
+    dispatch(actions.fetchCountries())
+  }, [dispatch])
 
   return (
     <PageWrapper>
       <h1>Countries</h1>
       {isLoading && <LoadingIndicator small />}
-      {countries?.length > 0 ? (
-        <List>
+      {countries?.length > 0 && (
+        <ul>
           {countries.map(country => (
-            <Country key={country.id}>
+            <li key={country.id}>
               <Link to={`/country/${country.id}`}>{country.name}</Link>
-            </Country>
+            </li>
           ))}
-        </List>
-      ) : error ? (
-        <ErrorText>{error}</ErrorText>
-      ) : null}
+        </ul>
+      )}
+      {error && <div>{error}</div>}
     </PageWrapper>
-  );
+  )
 }
-
-const Country = styled.li`
-  color: blue;
-`;
-
-const ErrorText = styled.span`
-  color: ${p => p.theme.text};
-`;
-
-const List = styled.div``;