finished remote component logic

oslabs-beta · Apr 1, 2023 · 8bd3e45 · 8bd3e45
1 parent d30778d
commit 8bd3e45
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 155 deletions.
diff --git a/client/components/Destination.js b/client/components/Destination.js
@@ -2,13 +2,13 @@ import React from 'react';
 import {
  updateDestinationAccessId,
  updateDestinationSecretKey,
- accountIdHandler
+ updateAccountId,
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 
 const Destination = (props) => {
  const dispatch = useDispatch();
- const { destination } = useSelector((state) => state.GUI);
+ const { origin, destination } = useSelector((state) => state.GUI);
 
  return (
  <>
@@ -28,7 +28,7 @@ const Destination = (props) => {
  <input
  name="accessId"
  onChange={(e) => {
- const newState = props.accessIdHandler(e, destination);
+ const newState = props.accessIdHandler(e, origin, destination);
  dispatch(updateDestinationAccessId(newState));
  }}
  ></input>
@@ -43,7 +43,7 @@ const Destination = (props) => {
  <input
  name="secretKey"
  onChange={(e) => {
- const newState = props.secretKeyHandler(e, destination);
+ const newState = props.secretKeyHandler(e, origin, destination);
  dispatch(updateDestinationSecretKey(newState));
  }}
  ></input>
@@ -53,17 +53,21 @@ const Destination = (props) => {
  <div>
  {' '}
  <label htmlFor="accountId">Account Id:</label>
- {destination.accountId ? (
- <div>{'\u2705'}</div>
- ) : (
- <input name="accountId"></input>
- )}
+ <input
+ name="accountId"
+ onChange={(e) => {
+ const newState = props.accountIdHandler(
+ e,
+ origin,
+ destination,
+ props.remoteType
+ );
+ dispatch(updateAccountId(newState));
+ }}
+ ></input>
+ {destination.accountId.length > 1 && <div>{'\u2705'}</div>}
  </div>
  )}
-
- {!destination.accessId && !destination.secretKey && (
- <button type="submit">Submit</button>
- )}
  </>
  );
 };

diff --git a/client/components/Origin.js b/client/components/Origin.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {
  updateOriginSecretKey,
  updateOriginAccessId,
+ updateAccountId,
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -10,7 +11,7 @@ const Origin = (props) => {
  const { origin, destination } = useSelector((state) => state.GUI);
 
  return (
- <form>
+ <>
  <h1>Origin</h1>
  {props.name && (
  <h2>
@@ -27,7 +28,11 @@ const Origin = (props) => {
  name="accessId"
  id="originAccessId"
  onChange={(e) => {
- const newState = props.originAccessIdHandler(e, origin, destination);
+ const newState = props.originAccessIdHandler(
+ e,
+ origin,
+ destination
+ );
  dispatch(updateOriginAccessId(newState));
  }}
  ></input>
@@ -53,21 +58,22 @@ const Origin = (props) => {
  <div>
  {' '}
  <label htmlFor="accountId">Account Id:</label>
- {origin.accountId ? (
- <div>{'\u2705'}</div>
- ) : (
- <input
- name="accountId"
- id="originAccountId"
- onChange={(e) => {
- const newState = props.accountIdHandler(e, origin, destination);
- dispatch(updateAccountId(newState));
- }}
- ></input>
- )}
+ <input
+ name="accountId"
+ onChange={(e) => {
+ const newState = props.accountIdHandler(
+ e,
+ origin,
+ destination,
+ props.remoteType
+ );
+ dispatch(updateAccountId(newState));
+ }}
+ ></input>
+ {origin.accountId.length > 1 && <div>{'\u2705'}</div>}
  </div>
  )}
- </section>
+ </>
  );
 };
 

diff --git a/client/components/RemoteContainer.js b/client/components/RemoteContainer.js
@@ -10,6 +10,7 @@ export const RemoteContainer = (props) => {
  <>
  {' '}
  <Origin
+ remoteType={'origin'}
  originAccessIdHandler={originAccessIdHandler}
  secretKeyHandler={originsecretKeyHandler}
  accountIdHandler={accountIdHandler}
@@ -19,6 +20,7 @@ export const RemoteContainer = (props) => {
  <div>
  {origin.accessId && origin.secretKey && (
  <Destination
+ remoteType={'destination'}
  accessIdHandler={destinationAccessIdHandler}
  secretKeyHandler={destinationSecretKeyHandler}
  accountIdHandler={accountIdHandler}
@@ -37,24 +39,23 @@ const originAccessIdHandler = (e, origin, destination) => {
  accessId
  );
  const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(accessId);
- // const provider = checkInputCredentials(e.target.value);
  if (isAmazonAccessId || isCloudflareAccessId) {
  const provider = isAmazonAccessId ? 'Amazon' : 'CloudFlare';
  const providerService = isAmazonAccessId ? 'S3' : 'R2';
- const destinationProvider = provider === 'Amazon' ? 'CloudFlare' :'Amazon';
- const destinationService = provider === 'Amazon' ? 'R2' :'S3';
+ const destinationProvider = provider === 'Amazon' ? 'CloudFlare' : 'Amazon';
+ const destinationService = provider === 'Amazon' ? 'R2' : 'S3';
  return {
  origin: {
  ...origin,
  name: provider,
  accessId: accessId,
- service: providerService
+ service: providerService,
  },
  destination: {
  ...destination,
  name: destinationProvider,
- service: destinationService
- }
+ service: destinationService,
+ },
  };
  } else {
  //this should probably just return a red check mark
@@ -88,19 +89,18 @@ const originsecretKeyHandler = (e, origin) => {
  }
 };
 
-const destinationAccessIdHandler = (e, destination) => {
+const destinationAccessIdHandler = (e, origin, destination) => {
  const accessId = e.target.value;
- const isAmazonAccessId = /(?<![A-Z0-9])[A-Z0-9]{20}(?![A-Z0-9])/.test(
- accessId
- );
- const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(accessId);
- // const provider = checkInputCredentials(e.target.value);
- if (isAmazonAccessId || isCloudflareAccessId) {
- // const provider = isAmazonAccessId ? 'Amazon' : 'CloudFlare';
+ const isValidAccessId =
+ origin.name === 'Amazon'
+ ? /^[a-z0-9]{32}$/.test(accessId)
+ : /(?<![A-Z0-9])[A-Z0-9]{20}(?![A-Z0-9])/.test(accessId);
+ if (isValidAccessId) {
+ const provider = origin.name === 'CloudFlare' ? 'Amazon' : 'CloudFlare';
  return {
  destination: {
  ...destination,
- // name: provider,
+ name: provider,
  accessId: accessId,
  },
  };
@@ -111,13 +111,16 @@ const destinationAccessIdHandler = (e, destination) => {
  }
 };
 
-const destinationSecretKeyHandler = (e, destination) => {
+const destinationSecretKeyHandler = (e, origin, destination) => {
  const secretKey = e.target.value;
- const isAmazonSecretKey =
- /(?<![A-Za-z0-9/+=])[A-Za-z0-9/+=]{40}(?![A-Za-z0-9/+=])/.test(secretKey);
- const isCloudflareSecretKey = /^[a-z0-9]{64}$/.test(secretKey);
- if (isAmazonSecretKey || isCloudflareSecretKey) {
- const provider = isAmazonSecretKey ? 'Amazon' : 'CloudFlare';
+ const isValidAccessId =
+ origin.name === 'Amazon'
+ ? /^[a-z0-9]{64}$/.test(secretKey)
+ : /(?<![A-Za-z0-9/+=])[A-Za-z0-9/+=]{40}(?![A-Za-z0-9/+=])/.test(
+ secretKey
+ );
+ if (isValidAccessId) {
+ const provider = origin.name === 'CloudFlare' ? 'Amazon' : 'CloudFlare';
  return {
  destination: {
  ...destination,
@@ -136,87 +139,17 @@ const destinationSecretKeyHandler = (e, destination) => {
  }
 };
 
-const accountIdHandler = (e) => {
-
-}
-
-//these were formatter functions...
-
-const updateOriginState = () => {};
-
-const updatedDestinationState = () => {};
-
-//original input credential checks...
-
-const checkInputCredentials = (string) => {
- const isAmazonAccessId = /(?<![A-Z0-9])[A-Z0-9]{20}(?![A-Z0-9])/.test(string);
- const isAmazonSecretKey =
- /(?<![A-Za-z0-9/+=])[A-Za-z0-9/+=]{40}(?![A-Za-z0-9/+=])/.test(string);
-
- const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(string);
- const isCloudflareSecretKey = /^[a-z0-9]{64}$/.test(string);
- if (isAmazonAccessId || isAmazonSecretKey) {
- return 'Amazon';
- } else if (isCloudflareAccessId || isCloudflareSecretKey) {
- return 'CloudFlare';
+const accountIdHandler = (e, origin, destination, parentComponent) => {
+ console.log(e.target, parentComponent);
+ if (parentComponent === 'origin') {
+ return {
+ origin: { ...origin, accountId: e.target.value },
+ destination: { ...destination },
+ };
  } else {
- return false;
+ return {
+ destination: { ...destination, accountId: e.target.value },
+ origin: { ...origin },
+ };
  }
 };
-
-// const formatState = (
-// provider,
-// accessId,
-// secretKey,
-// accountId,
-// currentOrigin,
-// currentDestination
-// ) => {
-// if (currentOrigin.name) {
-// const updatedDestination = Object.assign({}, currentDestination);
-// updatedDestination.accessId = accessId;
-// updatedDestination.secretKey = secretKey;
-// updatedDestination.accountId = accountId;
-// return {
-// origin: { ...currentOrigin },
-// destination: { ...updatedDestination },
-// };
-// }
-// if (provider === 'Amazon') {
-// return {
-// origin: {
-// name: provider,
-// accessId: accessId,
-// secretKey: secretKey,
-// accountId: null,
-// service: 'S3',
-// },
-// destination: {
-// render: true,
-// name: 'CloudFlare',
-// secretKey: null,
-// accessId: null,
-// accountId: null,
-// service: 'R2',
-// },
-// };
-// } else {
-// return {
-// origin: {
-// name: 'CloudFlare',
-// accessId: accessId,
-// secretKey: secretKey,
-// accountId: null,
-// service: 'R2',
-// },
-// destination: {
-// render: true,
-// name: provider,
-// secretKey: null,
-// accessId: null,
-// accountId: null,
-// service: 'S3',
-// },
-// };
-// }
-// };
diff --git a/client/slice.js b/client/slice.js
@@ -43,8 +43,10 @@ const slice = createSlice({
  state.destination = action.payload.destination;
  },
  updateAccountId: (state, action) => {
- state.origin = state.action.payload
- }
+ const {origin, destination} = action.payload
+ state.origin = origin;
+ state.destination = destination;
+ },
  },
 });
 
@@ -57,4 +59,5 @@ export const {
  updateOriginSecretKey,
  updateDestinationSecretKey,
  updateDestinationAccessId,
+ updateAccountId,
 } = slice.actions;
diff --git a/client/store.js b/client/store.js
@@ -1,10 +1,8 @@
 import { configureStore } from '@reduxjs/toolkit';
-import test from './testSlice';
 import GUI from './slice'
 
 const store = configureStore({
  reducer: {
- test,
  GUI,
  },
 });

diff --git a/client/testSlice.js b/client/testSlice.js