diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 6547aa03..be0c4d2a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,9 +19,9 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token with: - tag_name: 0.3.2 - release_name: 0.3.2 + tag_name: 0.3.5 + release_name: 0.3.5 body: | - Added ability for global-facet declaration. + Added ability to Preview facets draft: false prerelease: false diff --git a/public/manifest.json b/public/manifest.json index 759148f7..7baa7c0e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Facet", - "version": "0.3.4", + "version": "0.3.5", "description": "Facet.ninja | Deploy - Learn - Adapt", "icons": { "512": "facet_logo_512x512.png" diff --git a/readme_assets/DOCUMENTATION.md b/readme_assets/DOCUMENTATION.md index cf1398b8..a8d6fa9d 100644 --- a/readme_assets/DOCUMENTATION.md +++ b/readme_assets/DOCUMENTATION.md @@ -31,6 +31,6 @@ Last but not least, copy the snippet of code generated from the facet-extension. (//todo image) This will give you the single line that you need to paste into your `` HTML code. The line looks like this: -`` +`` The ID refers to the ID of your website. Once this line of code is integrated in your system, you will be able to see the configurations applied from the facet extension. diff --git a/src/AppProvider.jsx b/src/AppProvider.jsx index ad242f0a..528cd868 100644 --- a/src/AppProvider.jsx +++ b/src/AppProvider.jsx @@ -32,7 +32,7 @@ const AppProvider = ({ children }) => { const [addedFacets, setAddedFacets] = useState(['Default-Facet']); const [canDeleteElement, setCanDeleteElement] = useState(false); const [disabledFacets, setDisabledFacets] = useState([]); - const [textToCopy, setTextToCopy] = useState(``); + const [textToCopy, setTextToCopy] = useState(``); const [expanded, setExpanded] = useState([]); const [facetMap, setFacetMap] = useFacetMap(); @@ -145,10 +145,6 @@ const AppProvider = ({ children }) => { }); } - const onLoginClick = (val) => { - setLoading(val); - } - const loadJWT = async () => { const jwt = await AmplifyService.getCurrentUserJTW(); if (jwt) { @@ -171,7 +167,7 @@ const AppProvider = ({ children }) => { try { const workspaceId = await getKeyFromLocalStorage(api.workspace.workspaceId); const domainRes = await getOrPostDomain(workspaceId); - const text = ``; + const text = ``; setTextToCopy(text); } catch (e) { console.log('[ERROR][loadCopySnippet]', e); @@ -181,7 +177,7 @@ const AppProvider = ({ children }) => { const getJSUrl = async () => { const workspaceId = await getKeyFromLocalStorage(api.workspace.workspaceId); const domainRes = await getOrPostDomain(workspaceId); - const result = `${APIUrl.apiBaseURL}/facet.ninja.js?id=${domainRes.response.id}`; + const result = `${APIUrl.apiBaseURL}/js?id=${domainRes.response.id}`; setJSUrl(result); } @@ -398,7 +394,7 @@ const AppProvider = ({ children }) => { jsUrl, loggedInUser, setLoggedInUser, url, setUrl, login, isUserAuthenticated, setIsUserAuthenticated, - workspaceId, email, setEmail, loading, setLoading, onLoginClick, + workspaceId, email, setEmail, loading, setLoading, currAuthState, setCurrAuthState, jwt, setJwt, nonRolledOutFacets, setNonRolledOutFacets }} > diff --git a/src/index.jsx b/src/index.jsx index 83c40f64..2776c188 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -18,7 +18,6 @@ import 'typeface-roboto'; import FacetSnackbar from './shared/FacetSnackbar'; import AmplifyService from './services/AmplifyService'; import WelcomeAbroadStandalone from './shared/WelcomeAbroad/WelcomeAbroadStandalone'; -import TmpSimpleModal from './shared/TmpSimpleModal'; Amplify.configure(awsExports); @@ -55,8 +54,6 @@ chrome && chrome.runtime.onMessage && chrome.runtime.onMessage.addListener( }, ); -console.log('CHECKME', window.IN_PREVIEW, window.JSURL); - // Adds facetizer into the client's DOM if (!document.getElementById('popup') && !document.getElementById('facet-welcome-page') && !window.IN_PREVIEW) { const { body } = document; diff --git a/src/popup/LoadingPopup.jsx b/src/popup/LoadingPopup.jsx new file mode 100644 index 00000000..3577631e --- /dev/null +++ b/src/popup/LoadingPopup.jsx @@ -0,0 +1,28 @@ +import styled from 'styled-components'; +import FacetImage from '../shared/FacetImage'; +import MarginTop from '../shared/MarginTop'; +import Loading from '../shared/Loading'; +import facetLogo from '../static/images/facet_main_logo.svg' + +const TopDiv = styled.div` + padding: 1rem; +`; + +const GridDiv = styled.div` + display: grid; + grid-template-columns: 80% 10% 10%; + align-items: center; + justify-content: center; +`; + +export default () => { + return + +
+ +
+ + + + ; +} \ No newline at end of file diff --git a/src/popup/Main.jsx b/src/popup/Main.jsx index faa5e8c0..2e35b43d 100644 --- a/src/popup/Main.jsx +++ b/src/popup/Main.jsx @@ -2,8 +2,6 @@ import React, { useContext, useEffect, useState } from 'react'; import styled from 'styled-components'; -import { useSnackbar } from 'notistack'; -import { Auth } from 'aws-amplify'; import { getKeyFromLocalStorage, setKeyInLocalStorage, clearStorage } from '../shared/loadLocalStorage'; import { api, APIUrl, isPluginEnabled as isPluginEnabledConstant, authState as authStateConstant, color, fontSize, snackbar, LoginTypes, ChromeRequestType, @@ -43,61 +41,37 @@ const MarginTop = styled.div` margin-top: ${(props) => props.value}; `; -const CenteredDiv = styled.div` -text-align: center; -`; - -const PaddingDiv = styled.div` -padding: 1rem; -`; - export default () => { - const { setJwt, url, isPluginEnabled, setIsPluginEnabled, setCurrAuthState, setUrl, loading, setLoading, logout } = useContext(AppContext); - const [textToCopy, setTextToCopy] = useState(``); - + const { url, setUrl, isPluginEnabled, setIsPluginEnabled, logout } = useContext(AppContext); const [hasWhitelistedDomainVal, setHasWhitelistedDomainVal] = useState(isDevelopment ? true : false); + const [loading, setLoading] = useState(true); + const onEnablePluginCB = async (e) => { + setLoading(true); chrome?.tabs?.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, { [isPluginEnabledConstant]: e }, async () => { setKeyInLocalStorage(isPluginEnabledConstant, e); const isPluginEnabledValue = await getKeyFromLocalStorage(isPluginEnabledConstant); setKeyInLocalStorage(isPluginEnabledConstant, isPluginEnabledValue); setIsPluginEnabled(isPluginEnabledValue); + setLoading(false); }); }); setKeyInLocalStorage(isPluginEnabledConstant, e); setIsPluginEnabled(e); }; - const loadCopySnippet = async () => { - try { - const workspaceId = await getKeyFromLocalStorage(api.workspace.workspaceId); - chrome?.tabs?.query({ active: true, currentWindow: true }, async function (tabs) { - var currentTab = tabs[0]; // there will be only one in this array - const loc = new URL(currentTab.url); - const domainRes = await getOrPostDomain(workspaceId); - setUrl(loc.hostname); - const text = ``; - setTextToCopy(text); - }); - } catch (e) { - console.log('[ERROR][loadCopySnippet]', e); - } - }; - - useEffect(() => { - loadCopySnippet(); - }, [url, setTextToCopy]); - useEffect(() => { - setLoading(isDevelopment ? false : true); + setLoading(isDevelopment() ? false : true); async function loadState() { + chrome?.tabs?.query({ active: true, currentWindow: true }, async function (tabs) { var currentTab = tabs[0]; // there will be only one in this array const loc = new URL(currentTab.url); + setUrl(loc.hostname); const result = await hasWhitelistedDomain(loc.hostname); - setLoading(false); setHasWhitelistedDomainVal(result); + setLoading(false); }); } loadState(); @@ -117,12 +91,11 @@ export default () => { setLoading(false); triggerDOMReload(); } - const btnElement = hasWhitelistedDomainVal ?
- + { removeWhitelistUrl(url) }} text="Click here" /> - -
: { whiteListDomain(url) }} text={`Whitelist ${url}`} />; + + : { whiteListDomain(url) }} text={`Add domain to workspace`} />; const loadingElement = @@ -162,7 +135,6 @@ export default () => { : null} ; - return ( loading ? loadingElement : coreElement ); diff --git a/src/popup/PopupProvider.jsx b/src/popup/PopupProvider.jsx index 47d33a34..55ce1a04 100644 --- a/src/popup/PopupProvider.jsx +++ b/src/popup/PopupProvider.jsx @@ -29,10 +29,6 @@ export default ({ children }) => { triggerDOMReload(); } - const onLoginClick = (val) => { - setLoading(val); - } - const loadJWT = async () => { const jwt = await AmplifyService.getCurrentUserJTW(); setJwt(jwt); @@ -58,7 +54,7 @@ export default ({ children }) => { return {children} diff --git a/src/popup/SigninPopup.jsx b/src/popup/SigninPopup.jsx index 89cccbad..013e4f04 100644 --- a/src/popup/SigninPopup.jsx +++ b/src/popup/SigninPopup.jsx @@ -11,6 +11,7 @@ import FacetButton from '../shared/FacetButton'; import FacetLink from '../shared/FacetLink'; import StyledPopupDiv from './StyledPopupDiv'; import { color } from '../shared/constant'; +import LoadingPopup from './LoadingPopup'; const StyledDiv = styled.div` width: 25rem; @@ -24,20 +25,23 @@ const InnerStyledDiv = styled.div` export default () => { const [hasUserLoggedIn, setHasUserLoggedIn] = useState(false); + const [loading, setLoading] = useState(true); useEffect(() => { // Create an scoped async function in the hook async function loadState() { const userHasLoggedIn = await isUserLoggedIn(); setHasUserLoggedIn(userHasLoggedIn); + setLoading(false); } loadState(); }, []); const onLoginClick = () => { // todo open new tab with auth stuff - if (isDevelopment) { + if (isDevelopment()) { setHasUserLoggedIn(true); + return; } chrome?.tabs?.query({ active: true, currentWindow: true }, function (tabs) { var currTab = tabs[0]; @@ -47,7 +51,7 @@ export default () => { const onRegisterClick = () => { // todo open new tab with auth stuff - if (isDevelopment) { + if (isDevelopment()) { setHasUserLoggedIn(true); } chrome?.tabs?.query({ active: true, currentWindow: true }, function (tabs) { @@ -56,7 +60,7 @@ export default () => { }); } - const element = hasUserLoggedIn ?
: + let element = hasUserLoggedIn ?
:
@@ -68,6 +72,8 @@ export default () => { + element = loading ? : element; + return {element} diff --git a/src/shared/Loading/index.jsx b/src/shared/Loading/index.jsx index 16735b93..c9f5c4b4 100644 --- a/src/shared/Loading/index.jsx +++ b/src/shared/Loading/index.jsx @@ -71,7 +71,7 @@ const useStyles = makeStyles({ }, }); -export default function CustomizedProgressBars() { +export default function Loading() { const classes = useStyles(); return ( diff --git a/src/shared/constant.js b/src/shared/constant.js index 1dc4bfc4..af601476 100644 --- a/src/shared/constant.js +++ b/src/shared/constant.js @@ -3,8 +3,8 @@ const facetizerId = 'facetizer'; const facetKey = 'facet-settings' const isPluginEnabled = 'isPluginEnabled'; const isUserAuthenticated = 'isUserAuthenticated'; -const apiBaseURL = 'https://api.facet.ninja'; -const testBaseURL = 'https://test.api.facet.ninja'; +const apiBaseURL = 'https://api.facet.run'; +const testBaseURL = 'https://test.api.facet.run'; const localBaseURL = 'http://localhost:3002'; const authState = {