Feature/person screen

package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "start": "run-p --race dev:firebase dev:react",
     "dev:firebase": "firebase serve -p 4000",
-    "dev:react": "set PORT=3006 && react-scripts start",
+    "dev:react": "set PORT=3005 && react-scripts start",
     "build": "react-scripts build",
     "predeploy": "npm run build",
     "deploy": "cd functions && firebase deploy --only hosting:gorazdo",

src/components/atoms/Avatar.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const StyledDiv = styled('div')`
-  width: ${(props) => props.theme.spacing(props.size)}px;
-  height: ${(props) => props.theme.spacing(props.size)}px;
+  width: ${(props) => props.theme.spacing(props.size)};
+  height: ${(props) => props.theme.spacing(props.size)};
   border-radius: 50%;
   border: 1px solid #000;
   background-size: cover;

src/components/atoms/Badge.js

@@ -14,8 +14,8 @@ const FONT_SIZES_DICTIONARY = {
   big: '18px',
 };
 
-const getHeight = (props) => SIZES_FACTORS[props.$size] * 8 + 'px';
-const getHalfHeight = (props) => SIZES_FACTORS[props.$size] * 4 + 'px';
+const getHeight = (props) => SIZES_FACTORS[props.$size] * 8;
+const getHalfHeight = (props) => SIZES_FACTORS[props.$size] * 4;
 
 const BadgeBack = styled('div')`
   height: ${getHeight};

src/components/atoms/Button.js

@@ -1,19 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const getButtonColor = (buttonThemeProperty, key = 'palette') => {
-  console.log(getButtonColor, buttonThemeProperty);
-  return (props) => {
-    console.log(props);
-    return props.theme.buttons[props[key]][buttonThemeProperty];
-  };
-};
-
 const StyledButton = styled.button`
   border: 2px solid black;
-  padding: ${(props) => props.theme.spacing(1)} 0;
+  padding: ${(props) => props.theme.spacing(1, 3)};
+  border-radius: ${(props) => props.theme.spacing(1)};
   cursor: pointer;
-  background: transparent;
+  background: ${(props) => props.theme.palette.primary.main};
   border: none;
   color: white;
   min-width: ${(props) => props.theme.spacing(4)};
@@ -33,9 +26,9 @@ const StyledButton = styled.button`
       props.theme.color('primary', 'main', (color) => color.lighten(0.2))};
   }
 `;
+
 export default StyledButton;
 
 export const Button = (props) => {
-  console.log(props);
   return <StyledButton {...props} />;
 };

src/components/atoms/Tag.js

@@ -7,15 +7,15 @@ import PropTypes from 'prop-types';
 */
 
 const TagBack = styled('div')`
-  height: ${(props) => props.theme.spacing(3) + 'px'};
-  border-radius: ${(props) => props.theme.spacing(2) + 'px'};
+  height: ${(props) => props.theme.spacing(3)};
+  border-radius: ${(props) => props.theme.spacing(2)};
   background: ${(props) => props.tagColor};
-  padding-left: ${(props) => props.theme.spacing(1.5) + 'px'};
-  padding-right: ${(props) => props.theme.spacing(1.5) + 'px'};
+  padding-left: ${(props) => props.theme.spacing(1.5)};
+  padding-right: ${(props) => props.theme.spacing(1.5)};
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: ${(props) => props.theme.spacing(1) + 'px'};
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const TagText = styled('span')`

src/components/atoms/Text.js

@@ -5,7 +5,11 @@ import React, {
   useEffect,
   useLayoutEffect,
 } from 'react';
-import { LocaleContext, FALLBACK_LOCALE } from 'contexts/Locale';
+import {
+  LocaleContext,
+  FALLBACK_LOCALE,
+  FALLBACK_LOCALE_2,
+} from 'contexts/Locale';
 
 const extractLocale = (value, locale) => {
   if (typeof value === 'object') {
@@ -15,6 +19,9 @@ const extractLocale = (value, locale) => {
     if (FALLBACK_LOCALE in value) {
       return value[FALLBACK_LOCALE];
     }
+    if (FALLBACK_LOCALE_2 in value) {
+      return `[${FALLBACK_LOCALE_2}] ${value[FALLBACK_LOCALE_2]}`;
+    }
     return JSON.stringify(value);
   }
   return value;

src/components/atoms/Typography.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 const StyledComponent = styled('span')`
   display: block;
   margin: 0;
+  margin-bottom: ${(props) => (props.gutterBottom ? '0.5em' : 0)};
   padding: 0;
   color: ${(props) => props.theme.palette.text.primary};
   font-size: ${(props) => props.theme.typography[props.variant].fontSize};
@@ -28,6 +29,7 @@ Typography.propTypes = {
     'h5',
     'h6',
   ]),
+  gutterBottom: PropTypes.bool,
 };
 
 Typography.defaultProps = {};

src/components/molecules/CourseLink.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { MdOpenInNew } from 'react-icons/md';
+import { Text } from 'components/atoms/Text';
+
+const StyledAnchor = styled('a')`
+  margin: ${(props) => props.theme.spacing(1)};
+  display: inline-block;
+  position: relative;
+  & > svg {
+    opacity: 0;
+    position: absolute;
+    bottom: 0;
+    transition: opacity 100ms;
+    margin-left: 0.3em;
+  }
+  &:hover > svg {
+    opacity: 0.6c;
+  }
+`;
+
+export const CourseLink = ({ title, link }) => {
+  return (
+    <StyledAnchor href={link} target="_blank" rel="noopener noreferrer">
+      <Text value={title} />
+      <MdOpenInNew />
+    </StyledAnchor>
+  );
+};
+
+CourseLink.propTypes = {
+  title: PropTypes.string,
+  link: PropTypes.string,
+};
+
+CourseLink.defaultProps = {
+  title: 'HTML Academy Javascript ',
+  link: 'https://htmlacademy.ru/courses',
+};

src/components/molecules/CourseLink.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CourseLink } from './CourseLink';
+
+export default {
+  title: 'Molecules/CourseLink',
+  component: CourseLink,
+  parameters: {
+    figma:
+      'https://www.figma.com/file/oW95CY1Vcnb7PYICpP4By3/Gorazdo?node-id=129%3A2',
+  },
+};
+
+const Template = (args) => <CourseLink {...args} />;
+
+export const Default = Template.bind({});

src/components/molecules/PanelArticles.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Typography } from 'components/atoms/Typography';
 import { Tag } from 'components/atoms/Tag';
 
-const SquarePicture = styled('div')`
+const SquarePicture = styled('img')`
   height: 80px;
   width: 80px;
-  border-radius: ${(props) => props.theme.spacing(1) + 'px'};
+  border-radius: ${(props) => props.theme.spacing(1)};
   background: ${(props) => props.theme.palette.action.selected};
 `;
 
 const PanelContainer = styled('div')`
   display: flex;
   height: 112px;
   width: 752px;
-  border-radius: ${(props) => props.theme.spacing(2) + 'px'};
-  padding-left: ${(props) => props.theme.spacing(1) + 'px'};
-  padding-right: ${(props) => props.theme.spacing(1) + 'px'};
+  border-radius: ${(props) => props.theme.spacing(2)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-right: ${(props) => props.theme.spacing(1)};
   justify-content: space-around;
   align-items: center;
   background: ${(props) => props.theme.palette.action.hover};
@@ -39,7 +38,7 @@ const StyledTitle = styled('div')`
 const TagsContainer = styled('div')`
   display: flex;
   justify-content: space-between;
-  padding-top: ${(props) => props.theme.spacing(1) + 'px'};
+  padding-top: ${(props) => props.theme.spacing(1)};
 `;
 
 const Date = styled('span')`
@@ -71,10 +70,10 @@ const COLOR_FACTORS = [
     textColor: '#F15D23',
   },
 ];
-export const PanelArticles = ({ title, colorTag }) => {
+export const PanelArticles = ({ title, cover, alt, colorTag }) => {
   return (
     <PanelContainer>
-      <SquarePicture></SquarePicture>
+      <SquarePicture src={cover} alt={alt} />
       <TextContainer>
         <StyledTitle>{title}</StyledTitle>
         <SecondLineContainer>
@@ -96,7 +95,6 @@ export const PanelArticles = ({ title, colorTag }) => {
 };
 
 PanelArticles.propTypes = {
-  title: PropTypes.string,
   colorTag: PropTypes.arrayOf(
     PropTypes.shape({
       color: PropTypes.string,
@@ -108,6 +106,5 @@ PanelArticles.propTypes = {
 };
 
 PanelArticles.defaultProps = {
-  title: 'Анонс новой версии Styled Components v5: Звериный оскал',
   colorTag: COLOR_FACTORS,
 };

src/components/molecules/UserTop.js

@@ -1,31 +1,33 @@
 import React from 'react';
 import styled from 'styled-components';
-
 import Box from 'components/atoms/Box';
 import { Avatar } from 'components/atoms/Avatar';
 import { Typography } from 'components/atoms/Typography';
 import { Text } from 'components/atoms/Text';
 
 const StyledBox = styled(Box)`
-  padding: ${(props) => props.theme.spacing(2)};
-  padding-top: ${(props) => props.theme.spacing(6)};
+  padding: ${(props) => props.theme.spacing(6)};
 `;
 
 const Hgroup = styled('hgroup')`
   margin-left: ${(props) => props.theme.spacing(2)};
 `;
 
 export const UserTop = ({ doc }) => {
+  // useEffect(() => {
+  //   doc.ref.update(anna);
+  // }, []);
+  console.log({ userDocument: doc });
   return (
     <StyledBox>
-      <Avatar url={doc.get('avatar')} size="12" />
+      <Avatar url={doc.get('avatar')} size={12} />
       <Hgroup>
-        <Typography variant="h6">
+        <Typography variant="h3">
           <Text doc={doc} path="firstName" />
           &nbsp;
           <Text doc={doc} path="lastName" />
         </Typography>
-        <Typography variant="h3">
+        <Typography variant="h6">
           <Text doc={doc} path="profession" />
         </Typography>
       </Hgroup>

src/contexts/Locale.js

@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 import { useSessionStorageState } from 'hooks/useSessionStorageState';
 
 export const FALLBACK_LOCALE = 'en';
+export const FALLBACK_LOCALE_2 = 'ru';
 export const AVAILABLE_LOCALES = ['en', 'ru'];
 
 export const LocaleContext = createContext(null);

src/contexts/Theme.js

@@ -1,9 +1,13 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext } from 'react';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 
 import dark from 'styles/themes/dark';
 import light from 'styles/themes/light';
 import { useSessionStorageState } from 'hooks/useSessionStorageState';
+import {
+  CssBaseline,
+  ThemeProvider as MUIThemeProvider,
+} from '@material-ui/core';
 
 const themes = { dark, light };
 
@@ -36,7 +40,12 @@ export const ThemeProvider = ({ children }) => {
 
   return (
     <ThemeContext.Provider value={[themeName, toggleTheme]}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      <StyledThemeProvider theme={theme}>
+        <MUIThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </MUIThemeProvider>
+      </StyledThemeProvider>
     </ThemeContext.Provider>
   );
 };

src/hooks/index.js

@@ -1,13 +1,5 @@
 import { useEffect, useState, useReducer, useMemo } from 'react';
 
-const getFirebase = () => {
-  const isFirebaseAvailable = typeof firebase !== 'undefined';
-  if (isFirebaseAvailable) {
-    return window.firebase;
-  }
-  return null;
-};
-
 const getFirebaseAppInstance = () => {
   try {
     const isFirebaseAvailable = typeof firebase !== 'undefined';
@@ -18,7 +10,9 @@ const getFirebaseAppInstance = () => {
     }
     return null;
   } catch (error) {
-    console.error(error.message);
+    if (!error.message.includes('app/no-app')) {
+      console.error(error);
+    }
     return null;
   }
 };
@@ -36,7 +30,11 @@ export const useFirebaseApp = () => {
         const app = getFirebaseAppInstance();
         const features = Array.from(app.container.providers.keys());
         setFirebaseInstance(app);
-        console.log(`Firebase SDK loaded with ${features.join(', ')}`);
+        console.groupCollapsed(
+          `Firebase SDK loaded with ${features.length} modules`
+        );
+        console.log(features);
+        console.groupEnd();
       } catch (error) {
         console.error(error);
         setFirebaseInstance(null);
@@ -157,3 +155,7 @@ const fetchData = async ({ aborted, dispatch, ref }) => {
     }
   }
 };
+
+export const useCurrentUser = () => {
+  return useFirebase()?.auth()?.currentUser ?? null;
+};

src/pages/admin/index.js

@@ -13,7 +13,7 @@ export const Admin = () => {
   );
 };
 
-export const FirebaseAuthContent = ({}) => {
+export const FirebaseAuthContent = () => {
   const auth = window.firebase.auth;
   const user = window.firebase.auth().currentUser;
   const ref = useRef();