From 6695253cc6d7259d3f3d825223209702c8a1c080 Mon Sep 17 00:00:00 2001 From: agrim0312 Date: Wed, 20 Dec 2023 15:30:15 +0530 Subject: [PATCH 1/5] button-piecesOS --- src/app/App.tsx | 10 +--------- src/app/components/Indicator.tsx | 34 +++++++++++--------------------- src/app/utils/launchPiecesOS.tsx | 19 ++++++++++++++++++ 3 files changed, 31 insertions(+), 32 deletions(-) create mode 100644 src/app/utils/launchPiecesOS.tsx diff --git a/src/app/App.tsx b/src/app/App.tsx index 0ca4ba3..3cc8cbe 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -5,6 +5,7 @@ import {Application} from "@pieces.app/pieces-os-client"; import {DataTextInput, DeleteAssetButton, RenameAssetInput} from './components/TextInput'; import {Header} from './components/Header' import {connect} from './utils/Connect' +import { Indicator } from "./components/Indicator"; // types type LocalAsset = { @@ -192,13 +193,4 @@ connect().then(__ => { } //agrim implemented - Upon connecting to the Pieces OS, there is a need to enhance the user experience by implementing a timer //that automatically hides the "You're Connected" text and shrinks the button after a certain duration - let time = 3000; - setTimeout(() => { - if (_indicator != null) { - let indicatorText = document.getElementById("indicator_text"); - indicatorText.innerText = ""; - _indicator.style.transition = "all 0.3s ease"; - _indicator.style.transform = "scale(0.8)"; - } - }, time); }) \ No newline at end of file diff --git a/src/app/components/Indicator.tsx b/src/app/components/Indicator.tsx index 4331db5..b563255 100644 --- a/src/app/components/Indicator.tsx +++ b/src/app/components/Indicator.tsx @@ -2,31 +2,19 @@ import * as React from "react"; // @ts-ignore import check from "../icons/check.png"; - -// this is your indicator badge that we will manipulate through the initial connect call. it will either -// be green or red depending on the current status. - -// (4) So in your designs I saw that you wanted to add the 'text connected and secured' and a check to the circle indicator. -// this should be pretty simple to add in with a few steps: -// -// a. First lets get the icon for the check mark - I got one from icons 8 here: https://icons8.com/icon/set/check/color -// b. Now lets move the text inside the pill here that you suggested -// c. then add the element after the you just added, styled it, and TODO: I added a ts-ignore above the image import (cant get it to go away) -// d. added an id to the image for later and we are good to go for now. -// -// lets head over to the App.tsx file at /app/App.tsx and we can get going on rearranging some pieces and parts of this -// landing index page. +import { launchPiecesOS } from "../utils/launchPiecesOS"; export function Indicator(): React.JSX.Element { return ( - <> -
- {/*

Connection Status

*/} -
- You're Connected! - {"checkmark"} -
+ <> +
+ +
+ + ); } \ No newline at end of file diff --git a/src/app/utils/launchPiecesOS.tsx b/src/app/utils/launchPiecesOS.tsx new file mode 100644 index 0000000..338f37a --- /dev/null +++ b/src/app/utils/launchPiecesOS.tsx @@ -0,0 +1,19 @@ +import { connect } from './Connect';; // Import the Promise type + +const launchPiecesOS = () => { + const url: string = 'pieces://launch'; + try { + const isPiecesOSConnected = navigator.userAgent.includes('PiecesOS'); + if (isPiecesOSConnected) { + console.log("Pieces OS is already connected."); + // Perform any additional actions for connected state + } else { + window.open(url, '_blank'); + console.log("Pieces OS is installed."); + window.location.reload();// Refresh the page + } + } catch { + console.error("Pieces OS is not installed."); + } // Add a missing closing parenthesis and semicolon here +} +export { launchPiecesOS }; \ No newline at end of file From 3213eea15dc10b186cf7b406c8776c1182072999 Mon Sep 17 00:00:00 2001 From: agrim0312 Date: Wed, 20 Dec 2023 15:55:28 +0530 Subject: [PATCH 2/5] updates-button-automatically --- src/app/utils/launchPiecesOS.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/app/utils/launchPiecesOS.tsx b/src/app/utils/launchPiecesOS.tsx index 338f37a..e09ec13 100644 --- a/src/app/utils/launchPiecesOS.tsx +++ b/src/app/utils/launchPiecesOS.tsx @@ -1,6 +1,6 @@ import { connect } from './Connect';; // Import the Promise type -const launchPiecesOS = () => { +const launchPiecesOS = async () => { const url: string = 'pieces://launch'; try { const isPiecesOSConnected = navigator.userAgent.includes('PiecesOS'); @@ -8,12 +8,27 @@ const launchPiecesOS = () => { console.log("Pieces OS is already connected."); // Perform any additional actions for connected state } else { - window.open(url, '_blank'); + await window.open(url, '_blank'); console.log("Pieces OS is installed."); window.location.reload();// Refresh the page } } catch { console.error("Pieces OS is not installed."); + } + finally { + connect().then((data: JSON) => { + // define the indicator now that it exists. + const _indicator = document.getElementById("indicator"); + + // conditional for the response back on application. + // + // (1) first @jordan-pieces came in here and added this turing statement here inside a new + // if statement. this is an upgrade in comparison to the previous if statement that would not check to + // see if the _indicator itself is added to the DOM yet. + if (_indicator != null) { + _indicator != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red"; + } + }) } // Add a missing closing parenthesis and semicolon here } export { launchPiecesOS }; \ No newline at end of file From 34344015eb822a9b7ecdc9b2bd0ac05ff751f124 Mon Sep 17 00:00:00 2001 From: agrim0312 Date: Thu, 21 Dec 2023 01:23:53 +0530 Subject: [PATCH 3/5] error-boundary-implemented --- src/app/App.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 3cc8cbe..be50f9c 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -30,6 +30,7 @@ export function App(): React.JSX.Element { const [array, setArray] = useState>([]); const [selectedIndex, setSelectedIndex] = useState(-1); + const [error, setError] = useState(null); const refresh = (_newAsset: LocalAsset) => { setArray(prevArray => [...prevArray, _newAsset]) @@ -62,14 +63,25 @@ export function App(): React.JSX.Element { refresh(_local); } - }) - + }).catch((error) => { + console.error(error); + setError(error); + }); } + return (
-
- +
+ {error &&
Pieces OS is not running in the background. Click You're Connected to connect
}
Date: Wed, 20 Dec 2023 20:40:20 +0530 Subject: [PATCH 4/5] text-updated --- src/app/App.tsx | 3 ++- src/app/components/Indicator.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index be50f9c..2567d5e 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -81,7 +81,7 @@ export function App(): React.JSX.Element { padding: '20px', borderRadius: '9px', display: "flex", - boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Connected to connect
} + boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Not Connected to connect
}
{ if (_indicator != null) { __ != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red"; } + _indicator.firstElementChild.innerHTML = __ != undefined ? "You're Connected!" : "You're Not Connected"; //agrim implemented - Upon connecting to the Pieces OS, there is a need to enhance the user experience by implementing a timer //that automatically hides the "You're Connected" text and shrinks the button after a certain duration }) \ No newline at end of file diff --git a/src/app/components/Indicator.tsx b/src/app/components/Indicator.tsx index b563255..696dc82 100644 --- a/src/app/components/Indicator.tsx +++ b/src/app/components/Indicator.tsx @@ -10,7 +10,7 @@ export function Indicator(): React.JSX.Element {
From 756d4930405dff4fd9280fc7f542fb8953545e4a Mon Sep 17 00:00:00 2001 From: agrim0312 Date: Thu, 21 Dec 2023 13:53:31 +0530 Subject: [PATCH 5/5] button-state-managed --- src/app/App.tsx | 4 ++-- src/app/components/Header.tsx | 8 ++++++-- src/app/components/Indicator.tsx | 10 +++++++--- src/app/utils/launchPiecesOS.tsx | 1 + 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 2567d5e..628307c 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -65,14 +65,14 @@ export function App(): React.JSX.Element { } }).catch((error) => { console.error(error); - setError(error); + setError(true); }); } return (
-
+
{error &&

Pieces OS Client SDK for TypescriptOpen Source by Pieces

- +
) } \ No newline at end of file diff --git a/src/app/components/Indicator.tsx b/src/app/components/Indicator.tsx index 696dc82..9c91f42 100644 --- a/src/app/components/Indicator.tsx +++ b/src/app/components/Indicator.tsx @@ -4,13 +4,17 @@ import * as React from "react"; import check from "../icons/check.png"; import { launchPiecesOS } from "../utils/launchPiecesOS"; -export function Indicator(): React.JSX.Element { +interface IndicatorProps{ + isConnected: boolean +} + +export function Indicator({isConnected}:IndicatorProps): React.JSX.Element { return ( <>
diff --git a/src/app/utils/launchPiecesOS.tsx b/src/app/utils/launchPiecesOS.tsx index e09ec13..cfe759f 100644 --- a/src/app/utils/launchPiecesOS.tsx +++ b/src/app/utils/launchPiecesOS.tsx @@ -28,6 +28,7 @@ const launchPiecesOS = async () => { if (_indicator != null) { _indicator != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red"; } + _indicator.firstElementChild.innerHTML = _indicator != undefined ? "You're Connected!" : "You're Not Connected"; }) } // Add a missing closing parenthesis and semicolon here }