{!!props.imgSrc ? (
- Crop your new profile picture
+ Crop your new profile picture
props.setCrop(percentCrop)}
onComplete={(c) => setCompletedCrop(c)}
aspect={aspect}
>
-
+
) : null}
diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
index e4db63a3..3807bd7d 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)}
@@ -254,7 +256,9 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
) : null}
- {showAuth && state.step !== authSteps.Success ? : null}
+ {showAuth && state.step !== authSteps.Success ? (
+ setShowAuth(false)} />
+ ) : null}
>
);
};
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..051da5c9
--- /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 React, { 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..41235a6c 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,12 @@ const Searchbar = (props = {}) => {
-
- {currentUser?.profile?.photo?.uri ? (
-
- ) : (
-
-
-
- )}
+
+
- {showProfile ?
: null}
);
};
diff --git a/packages/web-shared/fragments/fragments.js b/packages/web-shared/fragments/fragments.js
index d73978d6..0c6ac819 100644
--- a/packages/web-shared/fragments/fragments.js
+++ b/packages/web-shared/fragments/fragments.js
@@ -69,6 +69,20 @@ const CONTENT_SINGLE_FRAGMENT = gql`
fragment ContentSingleFragment on ContentItem {
title
htmlContent
+ commentsEnabled
+ comments {
+ id
+ isLiked
+ text
+ person {
+ id
+ firstName
+ lastName
+ photo {
+ uri
+ }
+ }
+ }
coverImage {
sources {
uri
diff --git a/packages/web-shared/package.json b/packages/web-shared/package.json
index 04ebc686..21739d87 100644
--- a/packages/web-shared/package.json
+++ b/packages/web-shared/package.json
@@ -42,7 +42,6 @@
"react-instantsearch-hooks-web": "^6.44.0",
"react-multi-carousel": "^2.8.2",
"react-player": "^2.11.2",
- "react-router-dom": "^6.7.0",
"react-transition-group": "^4.4.5",
"styled-components": "^5.3.6",
"styled-system": "^5.1.5",
@@ -56,6 +55,7 @@
"react-transition-group": "*",
"styled-components": "*",
"styled-system": "*",
- "tldts": "*"
+ "tldts": "*",
+ "react-router-dom": "*"
}
}
diff --git a/packages/web-shared/providers/AuthProvider.js b/packages/web-shared/providers/AuthProvider.js
index 74a742de..cd2e82ca 100644
--- a/packages/web-shared/providers/AuthProvider.js
+++ b/packages/web-shared/providers/AuthProvider.js
@@ -4,11 +4,8 @@ import React, { createContext, useContext, useEffect, useReducer } from 'react';
import { v4 as uuidv4 } from 'uuid';
import authSteps from '../components/Auth/authSteps';
-import {
- ANONYMOUS_ID,
- AUTH_REFRESH_TOKEN_KEY,
- AUTH_TOKEN_KEY,
-} from '../config/keys';
+import { ANONYMOUS_ID, AUTH_REFRESH_TOKEN_KEY, AUTH_TOKEN_KEY } from '../config/keys';
+import { useApolloClient } from '@apollo/client';
const AuthStateContext = createContext();
const AuthDispatchContext = createContext();
@@ -72,17 +69,15 @@ function reducer(state, action) {
}
function AuthProvider(props = {}) {
+ const client = useApolloClient();
const [state, dispatch] = useReducer(reducer, initialState);
- const { initialized, authenticated, token, refreshToken, anonymousId } =
- state;
+ const { initialized, authenticated, token, refreshToken, anonymousId } = state;
// Initialize auth state
useEffect(() => {
function restoreAuthentication() {
const storedToken = window.localStorage.getItem(AUTH_TOKEN_KEY);
- const storedRefreshToken = window.localStorage.getItem(
- AUTH_REFRESH_TOKEN_KEY
- );
+ const storedRefreshToken = window.localStorage.getItem(AUTH_REFRESH_TOKEN_KEY);
const storedAnonymousId = window.localStorage.getItem(ANONYMOUS_ID);
if (storedToken) {
@@ -108,8 +103,9 @@ function AuthProvider(props = {}) {
// Respond to changes in auth state (login/logout)
useEffect(() => {
function setTokensInLocalStorage() {
- if (token) {
+ if (token && token !== window.localStorage.getItem(AUTH_TOKEN_KEY)) {
window.localStorage.setItem(AUTH_TOKEN_KEY, token);
+ client.refetchQueries({ include: 'active' });
if (!authenticated) {
dispatch(update({ authenticated: true }));
@@ -150,9 +146,7 @@ function AuthProvider(props = {}) {
return (
-
- {props.children}
-
+ {props.children}
);
}
diff --git a/packages/web-shared/ui-kit/Avatar/Avatar.js b/packages/web-shared/ui-kit/Avatar/Avatar.js
index 780139f5..6c48e9da 100644
--- a/packages/web-shared/ui-kit/Avatar/Avatar.js
+++ b/packages/web-shared/ui-kit/Avatar/Avatar.js
@@ -1,20 +1,40 @@
import React from 'react';
import { withTheme } from 'styled-components';
+import { User } from '@phosphor-icons/react';
import { Box, systemPropTypes } from '../../ui-kit';
function Avatar(props = {}) {
return (
+ >
+ {!props.src ? (
+ props.firstName && props.lastName ? (
+
+ {props.firstName[0]}
+ {props.lastName[0]}
+
+ ) : (
+
+ )
+ ) : null}
+
);
}
diff --git a/packages/web-shared/ui-kit/Button/Button.js b/packages/web-shared/ui-kit/Button/Button.js
index 7c582139..a8698fcb 100644
--- a/packages/web-shared/ui-kit/Button/Button.js
+++ b/packages/web-shared/ui-kit/Button/Button.js
@@ -20,10 +20,12 @@ const Button = ({
{...props}
>
-
- {props.title}
-
- {props?.icon}
+ {props.title ? (
+
+ {props.title}
+
+ ) : null}
+ {props.icon ? {props?.icon} : null}
);
diff --git a/packages/web-shared/ui-kit/Button/Button.styles.js b/packages/web-shared/ui-kit/Button/Button.styles.js
index ddd048d5..37c0a48d 100644
--- a/packages/web-shared/ui-kit/Button/Button.styles.js
+++ b/packages/web-shared/ui-kit/Button/Button.styles.js
@@ -130,7 +130,7 @@ const buttonWidth = ({ width }) => {
`;
};
-const buttonColorState = ({ theme, disabled, focused, hovered }) => {
+const buttonColorState = ({ theme, variant, disabled, focused, hovered }) => {
if (disabled) {
return css`
color: ${theme.colors.text.secondary};
@@ -173,7 +173,7 @@ const buttonColorTypeProp = ({ variant }) => {
case 'secondary':
return css`
- color: ${themeGet('colors.text.action')};
+ color: ${themeGet('colors.text.secondary')};
`;
case 'link':
return css`
diff --git a/web-embeds/craco.config.js b/web-embeds/craco.config.js
index dcc14469..6bf671a4 100644
--- a/web-embeds/craco.config.js
+++ b/web-embeds/craco.config.js
@@ -1,3 +1,5 @@
+const webpack = require("webpack");
+
// craco.config.js
module.exports = {
webpack: {
@@ -6,6 +8,13 @@ module.exports = {
webpackConfig.output.filename = "static/js/index.js";
webpackConfig.output.chunkFilename = "static/js/[name].chunk.js";
+ webpackConfig.plugins = [
+ ...webpackConfig.plugins,
+ new webpack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ];
+
// Override CSS file names in production
if (env === "production") {
webpackConfig.plugins.forEach((plugin) => {
diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
index 06f7556a..5127c349 100644
--- a/web-embeds/public/index.html
+++ b/web-embeds/public/index.html
@@ -1,18 +1,17 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
+
-
+
-
-
-
-
-
-
+
+
-
-
-
-