- +

-

Loading...

+ ); diff --git a/src/components/SiteHeader/SiteHeader.tsx b/src/components/SiteHeader/SiteHeader.tsx new file mode 100644 index 0000000..afc29c2 --- /dev/null +++ b/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 = () => ( + +); + +export default SiteHeader; diff --git a/src/components/UserHeader/UserHeader.test.tsx b/src/components/UserAvatar/UserAvatar.test.tsx similarity index 63% rename from src/components/UserHeader/UserHeader.test.tsx rename to src/components/UserAvatar/UserAvatar.test.tsx index 3ebb33c..f6908ab 100644 --- a/src/components/UserHeader/UserHeader.test.tsx +++ b/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: , + ui: , 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(); }); }); diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx new file mode 100644 index 0000000..a11617a --- /dev/null +++ b/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 = ({ className }) => { + const userName = useSelector(getUsername); + const classes = classNames("user-profile", className); + return

Logged in as {userName}

; +}; + +export default UserHeader; diff --git a/src/components/UserHeader/UserHeader.tsx b/src/components/UserHeader/UserHeader.tsx deleted file mode 100644 index 960e2c7..0000000 --- a/src/components/UserHeader/UserHeader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { FC } from "react"; -import { useSelector } from "react-redux"; - -import { getUsername } from "state/userProfile/selectors"; - -const UserHeader: FC = () => { - const userName = useSelector(getUsername); - return

Logged in as {userName}

; -}; - -export default UserHeader; diff --git a/src/types/index.d.ts b/src/types/index.d.ts new file mode 100644 index 0000000..e4d7e6d --- /dev/null +++ b/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; +} diff --git a/tsconfig.json b/tsconfig.json index a6a8924..87c7b53 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "allowSyntheticDefaultImports": true, "paths": { "api/*": ["./src/api/*"], + "assets/*": ["./src/assets/*"], "components/*": ["./src/components/*"], "state/*": ["./src/state/*"], "styles/*": ["./src/styles/*"], diff --git a/webpack.config.js b/webpack.config.js index 606639e..dfe584e 100644 --- a/webpack.config.js +++ b/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/", + }, + }, + }, ], },