Skip to content

Commit

Permalink
Merge pull request #115 from aaaa760/feature/addingProgressBars
Browse files Browse the repository at this point in the history 
Added Progress Bars Succesfully
  • Loading branch information
@AaruBama
AaruBama authored Apr 22, 2024
2 parents 33ef8ca + a596bec commit b842404
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 63 deletions.
21 changes: 17 additions & 4 deletions src/components/LoginDropDownComponent/UserDetailsForAccountCreationModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,21 @@ import { getEventHash, getSignature, nip19, SimplePool } from 'nostr-tools';
import UploadAndDisplayImage from './UploadUserPicture';
import { getProfileFromPublicKey } from '../Profile';

function LoadingScreen() {
return (
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex justify-center items-center">
<div className="flex justify-center items-center">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
);
}

function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
const [username, setUsername] = useState('');
const [aboutMe, setAboutMe] = useState('');
const [fileString, setFileString] = useState('');
const [isLoading, setIsLoading] = useState(false);

const choosePicture = url => {
setFileString(url);
Expand All @@ -16,15 +27,15 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
function handleUsernameChange(event) {
setUsername(event.target.value);
}

async function registerAccount(sk, pk) {
setIsLoading(true);

const relays = [
'wss://relay.damus.io',
'wss://relay.primal.net',
'wss://relay.snort.social',
'wss://relay.hllo.live',
];

const pool = new SimplePool();
const encodedSk = sk;
sk = nip19.decode(sk);
Expand Down Expand Up @@ -55,17 +66,18 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {

try {
await pool.publish(relays, userRegisterEvent);

pool.close(relays);

const profile = await getProfileFromPublicKey(pk.data);
let details = JSON.parse(profile.content);
details.pubKey = pk.data;
details.privateKey = encodedSk; // Encrypt it.
localStorage.setItem('memestr', JSON.stringify(details));
setIsLoading(false);
onClose();
console.log('Set the default login in local cache.', details);
} catch (error) {
console.error('Error during registration:', error);
setIsLoading(false); // Set loading to false on failure
}
}

Expand Down Expand Up @@ -216,6 +228,7 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
}}>
Create Account and Login
</button>
{isLoading && <LoadingScreen />}
</div>
</Dialog.Panel>
</Transition.Child>
Expand Down
7 changes: 7 additions & 0 deletions src/components/Post/newPost.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const PostUpload = ({ isOpen, onClose }) => {
const [postStage, setPostStage] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const [showMaxTagsAlert, setShowMaxTagsAlert] = useState(false);
const [postSuccess, setPostSuccess] = useState(false);
const MAX_TAGS = 3;
let alertTimeout = useRef(null);

Expand Down Expand Up @@ -480,6 +481,7 @@ const PostUpload = ({ isOpen, onClose }) => {
className="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm"
onClick={() => {
sendNewPostEvent();
setPostSuccess(true);
onClose();
}}>
Post
Expand All @@ -491,6 +493,11 @@ const PostUpload = ({ isOpen, onClose }) => {
</div>
</Dialog>
</Transition.Root>
{postSuccess && (
<div className="flex justify-center items-center">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
</div>
)}
</div>
);
};
Expand Down
133 changes: 74 additions & 59 deletions src/components/Share/modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export function ShareModal({ isOpen, onClose, postUrl }) {
const [inputValue, setInputValue] = useState('');
const [selectedUsers, setSelectedUsers] = useState([]);
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
const [isLoading, setIsLoading] = useState(false);

const [searchedUser, setSearchedUser] = useState([]);
// const [cachedUsers, setCachedUser] = useState(JSON.parse(localStorage.getItem("frequent_shares")) || []);
Expand Down Expand Up @@ -68,11 +69,19 @@ export function ShareModal({ isOpen, onClose, postUrl }) {

const handleSearch = async e => {
e.preventDefault();
setIsLoading(true);
setSearchedUser(null);

if (inputValue.trim() !== '') {
const userList = await getUserFromName(inputValue);
const parsedUsers = parseUserContent(userList);
setSearchedUser(parsedUsers);
try {
const userList = await getUserFromName(inputValue);
const parsedUsers = parseUserContent(userList);
setSearchedUser(parsedUsers);
} finally {
setIsLoading(false);
}
} else {
setIsLoading(false);
}
};

Expand Down Expand Up @@ -227,63 +236,69 @@ export function ShareModal({ isOpen, onClose, postUrl }) {
</form>

<div className="mt-4">
{getUserList() && (
<div className="flex flex-wrap pl-4 ">
{getUserList().map(user => (
<div
key={user.pubKey}
className={
'flex flex-col items-center m-2 ' +
(isUserSelected(
user.pubKey,
)
? 'selected-user'
: '')
}
style={{
width: '80px', // Add margin to create a gap
}}
onClick={() => {
toggleUserSelection(
user.pubKey,
);
addUserToCache(
user,
);
}}>
<div className="w-full h-12 flex items-center justify-center overflow-hidden ">
<img
src={
user.picture ||
noProfilePictureURL
}
alt={
user.name ||
'Anonymous'
}
className="w-12 h-12 rounded-full"
onError={e => {
e.target.src =
noProfilePictureURL; // Replace with your default image URL
e.target.alt =
'Default Image';
}}
/>
{isUserSelected(
user.pubKey,
) && (
<div className="selected-overlay">
{/* Add a tick mark or any other indicator */}
✓
</div>
)}
</div>
<span className="mt-1 text-s text-center block">
{user.name}
</span>
</div>
))}
{isLoading ? (
<div className="flex justify-center items-center">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
</div>
) : (
getUserList() && (
<div className="flex flex-wrap pl-4 ">
{getUserList().map(user => (
<div
key={user.pubKey}
className={
'flex flex-col items-center m-2 ' +
(isUserSelected(
user.pubKey,
)
? 'selected-user'
: '')
}
style={{
width: '80px',
}}
onClick={() => {
toggleUserSelection(
user.pubKey,
);
addUserToCache(
user,
);
}}>
<div className="w-full h-12 flex items-center justify-center overflow-hidden ">
<img
src={
user.picture ||
noProfilePictureURL
}
alt={
user.name ||
'Anonymous'
}
className="w-12 h-12 rounded-full"
onError={e => {
e.target.src =
noProfilePictureURL; // Replace with your default image URL
e.target.alt =
'Default Image';
}}
/>
{isUserSelected(
user.pubKey,
) && (
<div className="selected-overlay">
{/* Add a tick mark or any other indicator */}
✓
</div>
)}
</div>
<span className="mt-1 text-s text-center block">
{user.name}
</span>
</div>
))}
</div>
)
)}
</div>
<span className="flex flex-row gap-2 m-2 justify-start">
Expand Down

0 comments on commit b842404

Please sign in to comment.