Skip to content

Commit

Permalink
Refactor Inbox and Spam pages (#1449)
Browse files Browse the repository at this point in the history 
* refact: removed commented and unused code

* fix: inbox re-factor

* fix: renamed Spam.tsx

* Updating Spam.tsx for github

* Rebasing spam.tsx to Spam.tsx

---------

Co-authored-by: harshrajat <[email protected]>
  • Loading branch information
@hrithik73 @HarshRajat
hrithik73 and HarshRajat authored Mar 27, 2024
1 parent b7fea51 commit a92e257
Show file tree
Hide file tree
Showing 7 changed files with 261 additions and 439 deletions.
10 changes: 10 additions & 0 deletions .localsdk.env
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@

# TO SETUP LOCAL SDK
# ENFORCE_WEBPACK_LOCAL - CAN BE TRUE OR FALSE
ENFORCE_WEBPACK_LOCAL=FALSE

# NEED ABSOLUTE PATH TO DIST UIWEB PACKAGE
LOCAL_PUSH_SDK_UIWEB_ABS_PATH=/Users/Prodigy/Desktop/Inhouse/PUSH/push-sdk/dist/packages/uiweb

# STORAGE FOR RESTORING
STORAGE_FOR_RESTORING_PACKAGE_JSON=@pushprotocol/uiweb:1.3.1-alpha.8
66 changes: 49 additions & 17 deletions src/components/InboxComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,13 @@ import { FiSearch, FiSliders } from 'react-icons/fi';

// Internal Components
import { Item } from 'primaries/SharedStyling';
import Feedbox from 'segments/Feedbox';
import SpamBox from 'segments/spam';
import Inbox from 'segments/Inbox';
import SpamBox from 'segments/Spam';

// Internal Configs
import GLOBALS from 'config/Globals';
import APP_PATHS from 'config/AppPaths';

const InboxComponent = ({isSpam}) => {
const InboxComponent = ({ isSpam }) => {
const [showInbox, setShowInbox] = useState(!isSpam);
const [showFilter, setShowFilter] = useState(false);
const [search, setSearch] = useState('');
Expand All @@ -28,17 +27,23 @@ const InboxComponent = ({isSpam}) => {
toggleShowInbox();
setShowFilter(false);
setSearch('');
navigate(path)
navigate(path);
};

return (
<Container>
<NavBoxHolder>
<NavHolder>
<NavTitleButton isActive={showInbox} onClick={()=>handleToggle(APP_PATHS.Inbox)}>
<NavTitleButton
isActive={showInbox}
onClick={() => handleToggle(APP_PATHS.Inbox)}
>
Inbox
</NavTitleButton>
<NavTitleButton isActive={!showInbox} onClick={()=>handleToggle(APP_PATHS.Spam)}>
<NavTitleButton
isActive={!showInbox}
onClick={() => handleToggle(APP_PATHS.Spam)}
>
Spam
</NavTitleButton>
</NavHolder>
Expand All @@ -52,19 +57,46 @@ const InboxComponent = ({isSpam}) => {
setSearch(e.target.value);
}}
/>
<ItemIcon position="absolute" top="0" bottom="0" left="22px">
<FiSearch size={18} style={{ color: '#657795' }} />
<ItemIcon
position="absolute"
top="0"
bottom="0"
left="22px"
>
<FiSearch
size={18}
style={{ color: '#657795' }}
/>
</ItemIcon>

<ItemIconRotate position="absolute" top="0" bottom="0" right="22px" onClick={toggleShowFilter}>
<FiSliders size={18} style={{ color: '#657795' }} />
<ItemIconRotate
position="absolute"
top="0"
bottom="0"
right="22px"
onClick={toggleShowFilter}
>
<FiSliders
size={18}
style={{ color: '#657795' }}
/>
</ItemIconRotate>
</SearchContainer>
</NavBoxHolder>
{showInbox ? (
<Feedbox showFilter={showFilter} setShowFilter={setShowFilter} search={search} setSearch={setSearch} />
) : (
<SpamBox showFilter={showFilter} setShowFilter={setShowFilter} search={search} setSearch={setSearch} />
<Inbox
showFilter={showFilter}
setShowFilter={setShowFilter}
search={search}
setSearch={setSearch}
/>
) : (
<SpamBox
showFilter={showFilter}
setShowFilter={setShowFilter}
search={search}
setSearch={setSearch}
/>
)}
</Container>
);
Expand Down Expand Up @@ -97,7 +129,7 @@ const NavBoxHolder = styled.div`
bottom: 0;
width: 100%;
content: '';
background-color: ${props => props.theme.default.border};
background-color: ${(props) => props.theme.default.border};
}
`;

Expand Down Expand Up @@ -169,11 +201,11 @@ const SearchBar = styled.input`
font-size: 16px;
line-height: 150%;
input[type="reset"] {
input[type='reset'] {
display: none;
}
&::placeholder {
color: #657795;
color: #657795;
}
&:hover,
&:active,
Expand Down
2 changes: 1 addition & 1 deletion src/components/PushSnap/EnableSnoozeModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React, { useState } from 'react';
import styled, { useTheme } from 'styled-components';

// Internal Compoonents
import { ButtonV2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2';
import { ButtonV2,ItemHV2, ItemVV2, } from 'components/reusables/SharedStylingV2';

// Internal Configs
import { defaultSnapOrigin } from 'config';
Expand Down
186 changes: 1 addition & 185 deletions src/modules/inbox/InboxModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,14 @@ import React from 'react';
import ReactGA from 'react-ga';
import { useDispatch, useSelector } from 'react-redux';
import { toast as toaster } from 'react-toastify';
import styled, { ThemeProvider, useTheme } from 'styled-components';
import styled, { useTheme } from 'styled-components';

// Internal Compoonents
import { postReq } from 'api';
import InboxComponent from 'components/InboxComponent';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
import NotificationToast from 'primaries/NotificationToast';
import { Section } from 'primaries/SharedStyling';
import { setCommunicatorReadProvider, setCoreReadProvider, setPushAdmin } from 'redux/slices/contractSlice';
import Feedbox from 'segments/Feedbox';
import ChannelsDataStore from 'singletons/ChannelsDataStore';
import UsersDataStore from 'singletons/UsersDataStore';
import { useAccount } from 'hooks';
Expand All @@ -42,7 +40,6 @@ const InboxModule = ({isSpam}) => {
const clearToast = () => showToast(null);

// whether secret notif are enabled
const [enabledSecretNotif, setEnabledSecretNotif] = React.useState(false);

const themes = useTheme();
const onCoreNetwork = ALLOWED_CORE_NETWORK === chainId;
Expand All @@ -55,22 +52,6 @@ const InboxModule = ({isSpam}) => {
}, [toast]);
// toast related section

// React.useEffect(() => {
// const fetchEncryptionKey = async () => {
// // get public key from Backend API
// let encryptionKey = await postReq('/encryption_key/get_encryption_key', {
// address: account,
// op: 'read',
// }).then((res) => {
// return res.data?.encryption_key;
// });

// if (encryptionKey != null) {
// setEnabledSecretNotif(true);
// }
// };
// fetchEncryptionKey();
// }, [enabledSecretNotif]);

React.useEffect(() => {
if(!chainId) return;
Expand Down Expand Up @@ -138,176 +119,11 @@ const InboxModule = ({isSpam}) => {
}
}, [epnsReadProvider, epnsCommReadProvider]);

// const registerPubKey = async (encryptionPublicKey) => {
// let txToast;
// try {
// const type = {
// Register: [
// { name: 'user', type: 'address' },
// { name: 'encryptionKey', type: 'string' },
// { name: 'action', type: 'string' },
// ],
// };

// const message = {
// user: account,
// encryptionKey: encryptionPublicKey,
// action: 'Register',
// };

// let EPNS_DOMAIN = {
// name: 'EPNS COMM V1',
// chainId: chainId,
// verifyingContract: epnsCommReadProvider?.address,
// };

// // loader toast
// txToast = toaster.dark(<LoaderToast msg="Waiting for Confirmation..." color="#35c5f3" />, {
// position: 'bottom-right',
// autoClose: false,
// hideProgressBar: true,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// });

// const signature = await library.getSigner(account)._signTypedData(EPNS_DOMAIN, type, message);

// const objPayload = {
// address: account,
// encryptionKey: encryptionPublicKey,
// signature,
// message,
// op: 'write',
// chainId,
// contractAddress: epnsCommReadProvider.address,
// };

// const result = await postReq('/encryption_key/register', objPayload);
// console.log(result);

// toaster.update(txToast, {
// render: 'Successfully enabled secret notifications !',
// type: toaster.TYPE.SUCCESS,
// autoClose: 5000,
// });

// setEnabledSecretNotif(true);
// } catch (err) {
// if (err.code === 4001) {
// // EIP-1193 userRejectedRequest error
// toaster.update(txToast, {
// render: 'User denied message signature.',
// type: toaster.TYPE.ERROR,
// autoClose: 5000,
// });
// } else {
// toaster.update(txToast, {
// render: 'There was an error registering the public key',
// type: toaster.TYPE.ERROR,
// autoClose: 5000,
// });
// console.log(err);
// }
// }
// };

// const enableSecretNotif = async () => {
// let txToast;
// if (enabledSecretNotif) {
// txToast = toaster.dark(<NormalToast msg="Secret Notifications are already enabled." />, {
// position: 'bottom-right',
// type: toaster.TYPE.SUCCESS,
// autoClose: 3000,
// hideProgressBar: true,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// });
// return;
// }
// if (!epnsCommReadProvider?.address) return;
// let encryptionPublicKey;
// await library.provider
// .request({
// method: 'eth_getEncryptionPublicKey',
// params: [account], // you must have access to the specified account
// })
// .then((result) => {
// encryptionPublicKey = result;
// registerPubKey(encryptionPublicKey);
// console.log(result);
// })
// .catch((error) => {
// if (error.code === 4001) {
// // EIP-1193 userRejectedRequest error
// console.log('User Rejected the Request to the Key');
// txToast = toaster.dark(<NormalToast msg="User denied message EncryptionPublicKey" />, {
// position: 'bottom-right',
// type: toaster.TYPE.ERROR,
// autoClose: 5000,
// hideProgressBar: true,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// });
// } else if (error.code === -32601) {
// console.error(error);
// txToast = toaster.dark(<NormalToast msg="Your wallet doesn't support providing public encryption key." />, {
// position: 'bottom-right',
// type: toaster.TYPE.ERROR,
// autoClose: 5000,
// hideProgressBar: true,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// });
// } else {
// console.error(error);
// txToast = toaster.dark(<NormalToast msg="There was an error getting public encryption key." />, {
// position: 'bottom-right',
// type: toaster.TYPE.ERROR,
// autoClose: 5000,
// hideProgressBar: true,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// });
// }
// });
// };

// Render
return (
<Container>
<Interface>
{/* <Item>
<Item margin="16px 20px 0px 0px" self="self-end">
<Button
padding="12px"
direction="row"
border={`1px solid ${themes.faucetBorder}`}
bg={
themes.scheme === "light"
? GLOBALS.COLORS.GRADIENT_PRIMARY
: GLOBALS.COLORS.GRADIENT_SECONDARY
}
radius="50px"
onClick={enableSecretNotif}
disabled={enabledSecretNotif}
>
<span style={{ color: "#fff" }}>
{enabledSecretNotif ? 'Secret Notifications are enabled' : 'Enable Secret Notifications'}
</span>
<></>
</Button>
</Item>
</Item> */}
<div className="joyride"></div>
<InboxComponent isSpam={isSpam}/>
{/* <Feedbox /> */}
Expand Down
Loading

0 comments on commit a92e257

Please sign in to comment.