Add AppHeader and Login to MicroService

ApollosProject · Apr 4, 2024 · f3fa8e3 · f3fa8e3
1 parent 101467f
commit f3fa8e3
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 50 deletions.
diff --git 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 <Logo source={currentChurch?.logo} {...props} />;
-}
-
 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 = (
-    <Styled.FeedWrapper>
-      <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
-    </Styled.FeedWrapper>
+    <>
+      <AppHeader />
+      <Styled.FeedWrapper>
+        <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
+      </Styled.FeedWrapper>
+    </>
   );
 
   const routerConfig = [
@@ -66,7 +55,6 @@ function App({ searchParams, url }) {
   if (churchSlug) {
     return (
       <AppProvider church={churchSlug} modal="true">
-        <ChurchLogo display="flex" alignItems="center" justifyContent="center" marginTop="40px" />
         {/** When using SSR, avoid the router. it crashes */}
         {ssr ? mainRoute : <RouterProvider router={router} />}
       </AppProvider>

diff --git a/packages/web-shared/components/AppHeader/AppHeader.js 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 <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} />;
+}
+
+const AppHeader = () => (
+  <>
+    <Box
+      py={8}
+      px={16}
+      height={58}
+      alignItems="center"
+      backgroundColor="fill.paper"
+      borderBottom="1px solid"
+      borderColor="text.quaternary"
+      position="fixed"
+      display="flex"
+      flexDirection="row"
+      justifyContent="space-between"
+      boxShadow="small"
+      top={0}
+      left={0}
+      right={0}
+      zIndex={999}
+    >
+      <Box>
+        <ChurchLogo size="30px" />
+      </Box>
+
+      <ProfileButton />
+    </Box>
+    <Box height={58} />
+  </>
+);
+
+export default AppHeader;
diff --git a/packages/web-shared/components/AppHeader/index.js 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
@@ -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 ? (
             <>
-              <Styled.Title mb="xs">My Profile</Styled.Title>
+              <H4 color="text.secondary" mb="xs">
+                My Profile
+              </H4>
               <Box>
                 <ListItem
                   onClick={() => setShowDetails(true)}

diff --git 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
@@ -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 (
+    <Box position="relative">
+      <Box onClick={handleOpenProfile} cursor="pointer">
+        {currentUser?.profile?.photo?.uri ? (
+          <Avatar src={currentUser?.profile?.photo?.uri} width={30} alt="avatar" />
+        ) : (
+          <Box
+            borderRadius="100%"
+            backgroundColor="fill.system"
+            height={30}
+            width={30}
+            alignItems="center"
+            justifyContent="center"
+            display="flex"
+            color="text.secondary"
+          >
+            <User size={16} weight="bold" />
+          </Box>
+        )}
+      </Box>
+      {showProfile ? <Profile handleCloseProfile={() => setShowProfile(false)} /> : null}
+    </Box>
+  );
+};
+
+export default ProfileButton;
diff --git 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 = {}) => {
               </Box>
             </Styled.InterfaceWrapper>
           </Styled.Interface>
-          <Box padding="12px" onClick={handleOpenProfile}>
-            {currentUser?.profile?.photo?.uri ? (
-              <Avatar src={currentUser?.profile?.photo?.uri} width="38px" alt="avatar" />
-            ) : (
-              <Styled.Profile>
-                <User size={18} weight="bold" color={userExist ? 'white' : null} />
-              </Styled.Profile>
-            )}
-          </Box>
+          <ProfileButton />
         </Box>
         <SearchResults autocompleteState={autocompleteState} autocomplete={autocompleteInstance} />
       </Styled.Wrapper>
-      {showProfile ? <Profile handleCloseProfile={handleCloseProfile} /> : null}
     </Box>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import AppHeader from './AppHeader';

		export default AppHeader;