From e8066975fd06aae83a83aeba6349909047783f20 Mon Sep 17 00:00:00 2001 From: Conrad VanLandingham Date: Thu, 4 Apr 2024 14:01:14 -0500 Subject: [PATCH] Add AppHeader and Login to MicroService (#203) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🐛 Issue You can't login on micro service. We will need login for user commenting. ## ✏️ Solution Add an AppHeader and Profile button. ## 🔬 To Test 1. `cd micro-service && yarn dev` 2. navigate to a content item (or don't - this shows on the error home page) ## 📸 Screenshots
🎥 Video uploaded on Graphite:
--- micro-service/src/App.js | 28 ++++------- .../components/AppHeader/AppHeader.js | 46 +++++++++++++++++++ .../web-shared/components/AppHeader/index.js | 3 ++ .../web-shared/components/Profile/Profile.js | 6 ++- .../components/Profile/Profile.styles.js | 10 ++-- .../components/Profile/ProfileButton.js | 40 ++++++++++++++++ .../components/Searchbar/Searchbar.js | 26 ++--------- 7 files changed, 109 insertions(+), 50 deletions(-) create mode 100644 packages/web-shared/components/AppHeader/AppHeader.js create mode 100644 packages/web-shared/components/AppHeader/index.js create mode 100644 packages/web-shared/components/Profile/ProfileButton.js diff --git a/micro-service/src/App.js b/micro-service/src/App.js index 59b932fb..9ae97bcf 100644 --- a/micro-service/src/App.js +++ b/micro-service/src/App.js @@ -8,9 +8,9 @@ import { RouterProvider, } from '@apollosproject/web-shared/providers'; +import AppHeader from '@apollosproject/web-shared/components/AppHeader'; + import { Button, Box, BodyText } from '@apollosproject/web-shared/ui-kit'; -import { Logo } from '@apollosproject/web-shared/components'; -import { useCurrentChurch } from '@apollosproject/web-shared/hooks'; import Styled from './App.styles'; import ErrorPage from './error-page'; @@ -24,20 +24,6 @@ Sentry.init({ tracesSampleRate: 1.0, }); -function ChurchLogo(props) { - const { currentChurch } = useCurrentChurch(); - - //Can't set favicon in SSR - if (typeof document !== 'undefined') { - const favicon = document.querySelector('link[rel="icon"]'); - if (currentChurch?.logo) { - favicon.href = currentChurch.logo; - } - } - - return ; -} - function App({ searchParams, url }) { const churchSlug = getChurchSlug(url); const _root = searchParams?.root; @@ -47,9 +33,12 @@ function App({ searchParams, url }) { const ssr = typeof document === 'undefined'; const mainRoute = ( - - - + <> + + + + + ); const routerConfig = [ @@ -66,7 +55,6 @@ function App({ searchParams, url }) { if (churchSlug) { return ( - {/** When using SSR, avoid the router. it crashes */} {ssr ? mainRoute : } diff --git a/packages/web-shared/components/AppHeader/AppHeader.js b/packages/web-shared/components/AppHeader/AppHeader.js new file mode 100644 index 00000000..850577a2 --- /dev/null +++ b/packages/web-shared/components/AppHeader/AppHeader.js @@ -0,0 +1,46 @@ +import Wordmark from '../Wordmark'; +import { useCurrentChurch } from '../../hooks'; +import { Box, Avatar } from '../../ui-kit'; +import { User } from '@phosphor-icons/react'; + +import SearchStyles from '../Searchbar/Search.styles'; + +import ProfileButton from '../Profile/ProfileButton'; + +function ChurchLogo(props) { + const { currentChurch } = useCurrentChurch(); + + return ; +} + +const AppHeader = () => ( + <> + + + + + + + + + +); + +export default AppHeader; diff --git a/packages/web-shared/components/AppHeader/index.js b/packages/web-shared/components/AppHeader/index.js new file mode 100644 index 00000000..7692071c --- /dev/null +++ b/packages/web-shared/components/AppHeader/index.js @@ -0,0 +1,3 @@ +import AppHeader from './AppHeader'; + +export default AppHeader; diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js index e4db63a3..bdcdd00a 100644 --- a/packages/web-shared/components/Profile/Profile.js +++ b/packages/web-shared/components/Profile/Profile.js @@ -7,7 +7,7 @@ import { Link } from 'react-router-dom'; import Color from 'color'; import ImageUploader from './ImageUploader'; -import { Button, Avatar, BodyText, Box, Card, H4, ListItem } from '../../ui-kit'; +import { Button, Avatar, BodyText, Box, H4, ListItem } from '../../ui-kit'; import Logo from '../Logo'; import { UserCirclePlus, @@ -158,7 +158,9 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => { {/* Profile Actions */} {state.token && !showDetails && !imgSrc ? ( <> - My Profile +

+ My Profile +

setShowDetails(true)} diff --git a/packages/web-shared/components/Profile/Profile.styles.js b/packages/web-shared/components/Profile/Profile.styles.js index e73d10e3..465e75f3 100644 --- a/packages/web-shared/components/Profile/Profile.styles.js +++ b/packages/web-shared/components/Profile/Profile.styles.js @@ -1,7 +1,7 @@ import { withTheme } from 'styled-components'; import styled, { css } from 'styled-components'; import { themeGet } from '@styled-system/theme-get'; -import { H4, Card, utils } from '../../ui-kit'; +import Card from '../../ui-kit/Card'; import { system } from '../../ui-kit/_lib/system'; import Color from 'color'; @@ -12,6 +12,7 @@ const Profile = withTheme(styled.div` position: absolute; transition: opacity 0.3s ease; z-index: 9999; + right: 0; @media screen and (max-width: ${themeGet('breakpoints.sm')}) { position: fixed; @@ -20,12 +21,8 @@ const Profile = withTheme(styled.div` right: 0; left: 0; } - ${system}; -`); -const Title = withTheme(styled(H4)` - color: ${themeGet('colors.text.secondary')}; - font-size: ${utils.rem('16px')}; + ${system}; `); const ProfileCard = withTheme(styled(Card)` @@ -87,7 +84,6 @@ const AppLinks = withTheme(styled.div` const Styled = { Profile, - Title, CloseIcon, UploadIcon, AppLinks, diff --git a/packages/web-shared/components/Profile/ProfileButton.js b/packages/web-shared/components/Profile/ProfileButton.js new file mode 100644 index 00000000..407a36c6 --- /dev/null +++ b/packages/web-shared/components/Profile/ProfileButton.js @@ -0,0 +1,40 @@ +import { Box, Avatar } from '../../ui-kit'; +import { User } from '@phosphor-icons/react'; +import { useCurrentUser } from '../../hooks'; +import { useState } from 'react'; +import Profile from './Profile'; + +const ProfileButton = (props) => { + const [showProfile, setShowProfile] = useState(false); + const { currentUser } = useCurrentUser(); + + const handleOpenProfile = () => { + setShowProfile(true); + }; + + return ( + + + {currentUser?.profile?.photo?.uri ? ( + + ) : ( + + + + )} + + {showProfile ? setShowProfile(false)} /> : null} + + ); +}; + +export default ProfileButton; diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js index 153df467..9f4a1fd6 100644 --- a/packages/web-shared/components/Searchbar/Searchbar.js +++ b/packages/web-shared/components/Searchbar/Searchbar.js @@ -1,23 +1,23 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { User, MagnifyingGlass, ArrowLeft } from '@phosphor-icons/react'; +import { MagnifyingGlass, ArrowLeft } from '@phosphor-icons/react'; import { systemPropTypes } from '../../ui-kit/_lib/system'; -import { Box, Avatar } from '../../ui-kit'; +import { Box } from '../../ui-kit'; import { useCurrentUser } from '../../hooks'; import { useSearchState } from '../../providers/SearchProvider'; -import Profile from '../Profile'; import Autocomplete from '../Searchbar/Autocomplete'; import SearchResults from '../Searchbar/SearchResults'; +import ProfileButton from '../Profile/ProfileButton'; + import Styled from './Search.styles'; const MOBILE_BREAKPOINT = 428; const Searchbar = (props = {}) => { const searchState = useSearchState(); - const [showProfile, setShowProfile] = useState(false); const [showTextPrompt, setShowTextPrompt] = useState(true); const [autocompleteInstance, setAutocompleteInstance] = useState(null); const [autocompleteState, setAutocompleteState] = useState({ @@ -94,13 +94,6 @@ const Searchbar = (props = {}) => { } }, [autocompleteState.isOpen]); - const handleOpenProfile = () => { - setShowProfile(true); - }; - const handleCloseProfile = () => { - setShowProfile(false); - }; - const handleGetAutocompleteInstance = (instance) => { setAutocompleteInstance(instance); }; @@ -146,19 +139,10 @@ const Searchbar = (props = {}) => { - - {currentUser?.profile?.photo?.uri ? ( - - ) : ( - - - - )} - + - {showProfile ? : null} ); };