-
- 
-
+
+
+
+
+
+
+
+
+
- Edit src/App.tsx and save to reload.
-
- Learn React
-
-
-
+
+
+
+
+
+
+
+
+ {getPromptContent(promptStep)}
+
+
+
+
+
+
+
);
}
diff --git a/app/client/src/api/config.ts b/app/client/src/api/config.ts
new file mode 100644
index 0000000..0584c2d
--- /dev/null
+++ b/app/client/src/api/config.ts
@@ -0,0 +1,16 @@
+/* istanbul ignore file */
+let host;
+let protocol;
+let port;
+
+if (!host && !protocol && !port) {
+ host = window.location.host.split(':')[0];
+ protocol = 'http';
+ port = 3131;
+}
+
+export default {
+ host,
+ port,
+ protocol,
+};
diff --git a/app/client/src/api/generator.ts b/app/client/src/api/generator.ts
new file mode 100644
index 0000000..4debac7
--- /dev/null
+++ b/app/client/src/api/generator.ts
@@ -0,0 +1,14 @@
+/* istanbul ignore file */
+import config from './config';
+
+export default (resourceName = '') => {
+ const { port, protocol, host } = config;
+
+ const resourcePath = resourceName;
+
+ if (!host) {
+ return `/localhost`;
+ }
+
+ return `${protocol}://${host}:${port}/${resourcePath}`;
+};
diff --git a/app/client/src/components/ConnectingIndicator/ConnectingIndicatorIcon.tsx b/app/client/src/components/ConnectingIndicator/ConnectingIndicatorIcon.tsx
new file mode 100644
index 0000000..54a58e3
--- /dev/null
+++ b/app/client/src/components/ConnectingIndicator/ConnectingIndicatorIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Icon } from '@blueprintjs/core';
+import { Col, Row } from 'react-flexbox-grid';
+
+interface ConnectingIndicatorIconProps {
+ connectionIconType: "feed" | "feed-subscribed";
+}
+
+function ConnectingIndicatorIcon(props: ConnectingIndicatorIconProps) {
+ const { connectionIconType } = props;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ case 2:
+ return (
+
+
+ );
+ case 3:
+ return (
+ My Device Info:
+
+ Device IP: {myIP}
+
+ Device is trying to connect
-Device is trying to connect, do you allow?
+
- {devices.map((device) => {
+ {connectedDevicesService.getDevices().map((device) => {
return (
-
-
- {device.deviceIP}
-
- {device.deviceType}
- {device.deviceOS}
- {device.sharingSessionID}
-
+
+
+
+
+
+
diff --git a/app/components/DeviceInfoCallout/index.tsx b/app/components/DeviceInfoCallout/index.tsx
new file mode 100644
index 0000000..2ddafe9
--- /dev/null
+++ b/app/components/DeviceInfoCallout/index.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import React from 'react';
+import { Callout, Text, H4, Tooltip, Position } from '@blueprintjs/core';
+import { Row, Col } from 'react-flexbox-grid';
+
+interface DeviceInfoCalloutProps {
+ deviceType: string | undefined;
+ deviceIP: string | undefined;
+ deviceOS: string | undefined;
+ sharingSessionID: string | undefined;
+ deviceBrowser: string | undefined;
+}
+
+function getContentOfTooltip() {
+ return (
+ <>
+
+ {`This should match with 'Device IP' displayed on the screen of device
+ that is trying to connect.`}
+
+
+
+ {`If IPs don't match click 'Deny' or 'Disconnect' button immediately to
+ secure your computer!`}
+
+
+
+ );
+}
+
+export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) {
+ const {
+ deviceType,
+ deviceIP,
+ deviceOS,
+ sharingSessionID,
+ deviceBrowser,
+ } = props;
+
+ return (
+ <>
+
+
+
+ Device Type: {deviceType}
+
+
+
+
+ Device Browser: {deviceBrowser}
+
+
+ Device OS: {deviceOS}
+
+
+
+
+ );
+}
diff --git a/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx b/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
index 18d8711..6c016cb 100644
--- a/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
+++ b/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
@@ -1,7 +1,4 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable react/destructuring-assignment */
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
import { Row, Col } from 'react-flexbox-grid';
import { Icon, Text } from '@blueprintjs/core';
import { createStyles, makeStyles } from '@material-ui/core/styles';
@@ -31,12 +28,10 @@ interface SettingRowLabelAndInput {
export default function SettingRowLabelAndInput(
props: SettingRowLabelAndInput
) {
+ const { icon, label, input } = props;
const { isDarkTheme } = useContext(SettingsContext);
- const getClassesCallback = useCallback(() => {
- // TODO: dont use callback inside callback, then how to use styles with theme?
- return useStylesWithTheme(isDarkTheme)();
- }, [isDarkTheme]);
+ const getClassesCallback = useStylesWithTheme(isDarkTheme);
return (
@@ -44,19 +39,20 @@ export default function SettingRowLabelAndInput(
{props.label}
+ {label}
{props.input}
+ {input}
);
diff --git a/app/components/SettingsOverlay/SettingsOverlay.spec.tsx b/app/components/SettingsOverlay/SettingsOverlay.spec.tsx
index 41017ce..0048e80 100644
--- a/app/components/SettingsOverlay/SettingsOverlay.spec.tsx
+++ b/app/components/SettingsOverlay/SettingsOverlay.spec.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-boolean-value */
import React, { Suspense } from 'react';
import Enzyme, { mount } from 'enzyme';
import EnzymeToJson from 'enzyme-to-json';
@@ -6,7 +5,6 @@ import Adapter from 'enzyme-adapter-react-16';
import { BrowserRouter as Router } from 'react-router-dom';
import SettingsOverlay from './SettingsOverlay';
import { SettingsProvider } from '../../containers/SettingsProvider';
-import { ConnectedDevicesProvider } from '../../containers/ConnectedDevicesProvider';
Enzyme.configure({ adapter: new Adapter() });
jest.useFakeTimers();
@@ -16,11 +14,9 @@ it('should match exact snapshot', () => {
<>
Loading...
}>
+ Partner Device Info: +
+
+
+ Device IP: {deviceIP}
+
+
+
+
+ Session ID: {sharingSessionID}
+
+
+
+
-
-
-