add placeholder logo and site header component

.eslintrc

@@ -17,5 +17,8 @@
     "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
     "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ]
+  ],
+  "rules": {
+    "react/prop-types": "off"
+  }
 }

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.5.0",
     "axios": "^0.21.1",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
@@ -53,6 +53,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.2.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",

src/components/App/App.tsx

@@ -5,7 +5,7 @@ import { fetchUserById } from "state/userProfile/actions";
 import { getUsername } from "state/userProfile/selectors";
 
 import Loader from "../Loader/Loader";
-import UserHeader from "../UserHeader/UserHeader";
+import SiteHeader from "../SiteHeader/SiteHeader";
 
 import "styles/app.scss";
 
@@ -27,7 +27,7 @@ const App: FC = () => {
 
   return (
     <div className="app bg-gray-50 min-h-screen">
-      <UserHeader />
+      <SiteHeader />
     </div>
   );
 };

src/components/Loader/Loader.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from "react";
 
 const Loader: FC = () => (
-  <div className="loader">
-    <p>Loading...</p>
+  <div className="loader flex justify-center items-center min-h-screen">
+    <div className="loader__inner">
+      <p className="text-3xl text-gray-600 animate-pulse">Loading...</p>
+    </div>
   </div>
 );
 

src/components/SiteHeader/SiteHeader.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+
+import Logo from "assets/images/logo.svg";
+import UserAvatar from "../UserAvatar/UserAvatar";
+
+const SiteHeader: FC = () => (
+  <div className="fixed top-0 left-0 right-0 px-8 py-6 bg-white border-b border-gray-100 flex items-center">
+    <img src={Logo} alt="Company name" />
+    <UserAvatar className="ml-auto" />
+  </div>
+);
+
+export default SiteHeader;

src/components/UserHeader/UserHeader.test.tsx → src/components/UserAvatar/UserAvatar.test.tsx

@@ -2,22 +2,22 @@ import React from "react";
 import { screen } from "@testing-library/react";
 import renderConnected from "utilities/test/renderConnected";
 
-import UserHeader from "./UserHeader";
+import UserAvatar from "./UserAvatar";
 
 const setup = (initialState = {}) =>
   renderConnected({
-    ui: <UserHeader />,
+    ui: <UserAvatar />,
     initialState,
   });
 
-describe("UserHeader", () => {
+describe("UserAvatar", () => {
   it("should display username", () => {
     setup({
       userProfile: {
         username: "Steve",
       },
     });
-    const userHeaderText = screen.getByText("Logged in as Steve");
-    expect(userHeaderText).toBeInTheDocument();
+    const userAvatarText = screen.getByText("Logged in as Steve");
+    expect(userAvatarText).toBeInTheDocument();
   });
 });

src/components/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+import { useSelector } from "react-redux";
+import classNames from "classnames";
+
+import { getUsername } from "state/userProfile/selectors";
+
+interface UserHeaderProps {
+  className?: string;
+}
+
+const UserHeader: FC<UserHeaderProps> = ({ className }) => {
+  const userName = useSelector(getUsername);
+  const classes = classNames("user-profile", className);
+  return <div className={classes}>Logged in as {userName}</div>;
+};
+
+export default UserHeader;

src/types/index.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}

tsconfig.json

@@ -9,6 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "paths": {
       "api/*": ["./src/api/*"],
+      "assets/*": ["./src/assets/*"],
       "components/*": ["./src/components/*"],
       "state/*": ["./src/state/*"],
       "styles/*": ["./src/styles/*"],

webpack.config.js

@@ -33,6 +33,7 @@ module.exports = () => ({
     extensions: [".ts", ".tsx", ".js", ".jsx"],
     alias: {
       api: path.resolve(sourcePath, "api/"),
+      assets: path.resolve(sourcePath, "assets/"),
       components: path.resolve(sourcePath, "components/"),
       state: path.resolve(sourcePath, "state/"),
       styles: path.resolve(sourcePath, "styles/"),
@@ -69,6 +70,17 @@ module.exports = () => ({
         ],
         exclude: /node_modules/,
       },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        include: path.resolve(sourcePath, "assets/images"),
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[name].[ext]",
+            outputPath: "assets/images/",
+          },
+        },
+      },
     ],
   },