mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-09 08:02:24 +02:00
Code Issues Releases Wiki Activity

fix sharing n err handling

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-13 19:39:31 +05:30
parent f28b5405a0
commit e87d4ed213
3 changed files with 65 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Icons.jsx
View File

@ -119,6 +119,12 @@ export function Icons() {
<symbol id="view-list" viewBox="0 0 24 24"> <symbol id="view-list" viewBox="0 0 24 24">
<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" /> <path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
</symbol> </symbol>
<symbol id="eye" viewBox="0 0 24 24">
<path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z" />
</symbol>
<symbol id="eye-striked" viewBox="0 0 24 24">
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
</symbol>
<symbol id="loader-icon" viewBox="0 0 44 44"> <symbol id="loader-icon" viewBox="0 0 44 44">
{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */} {/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
<g fill="none" fillRule="evenodd" strokeWidth={10}> <g fill="none" fillRule="evenodd" strokeWidth={10}>
@ -173,9 +179,15 @@ export function Icons() {
); );
} }
export const Icon = ({ name, ...rest }) => { export const Icon = ({ name, color, size, ...rest }) => {
return ( return (
<svg xmlns="http://www.w3.org/2000/svg" {...rest}> <svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
style={{ fill: color }}
{...rest}
>
<use xlinkHref={`#${name}`} /> <use xlinkHref={`#${name}`} />
</svg> </svg>
); );

34
src/components/ItemTile.jsx
View File

@ -1,7 +1,8 @@
import { h } from 'preact'; import { h } from 'preact';
import { getHumanDate } from '../utils'; import { getHumanDate } from '../utils';
import Modal from './Modal'; import Modal from './Modal';
import { HStack } from './Stack'; import { HStack, Stack } from './Stack';
import { Icon } from './Icons';
export function ItemTile({ export function ItemTile({
item, item,
@ -23,26 +24,6 @@ export function ItemTile({
onClick={onClick} onClick={onClick}
> >
<div class="saved-item-tile__btns"> <div class="saved-item-tile__btns">
{onToggleVisibilityBtnClick ? (
<button
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)"
onClick={onToggleVisibilityBtnClick}
>
Toggle Visibility
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
{item.isPublic ? (
<path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z" />
) : (
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
)}
</svg>
</button>
) : null}
{onForkBtnClick ? ( {onForkBtnClick ? (
<button <button
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium" class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
@ -113,7 +94,16 @@ export function ItemTile({
</> </>
) : null} ) : null}
</div> </div>
<div>right</div> <div>
<Stack gap={1} align="center">
<Icon
size="16"
color="currentColor"
name={item.isPublic ? 'eye' : 'eye-striked'}
/>
{item.isPublic ? 'Public' : ''}
</Stack>
</div>
</HStack> </HStack>
</div> </div>
</div> </div>

62
src/components/Share.jsx
View File

@ -5,6 +5,7 @@ import Switch from './Switch';
import { itemService } from '../itemService'; import { itemService } from '../itemService';
import { alertsService } from '../notifications'; import { alertsService } from '../notifications';
import { Button } from './common'; import { Button } from './common';
import { Icon } from './Icons';
const FREE_PUBLIC_ITEM_COUNT = 1; const FREE_PUBLIC_ITEM_COUNT = 1;
const BASE_URL = location.origin; const BASE_URL = location.origin;
@ -25,9 +26,18 @@ export function Share({ user, item, onVisibilityChange }) {
setVal(newVal); setVal(newVal);
if (newVal) { if (newVal) {
const token = await window.user.getIdToken(); const token = await window.user.getIdToken();
const res = await fetch( let res;
`http://127.0.0.1:5001/web-maker-app/us-central1/toggleVisibility?token=${token}&itemId=${item.id}` try {
); res = await fetch(
`http://127.0.0.1:5001/web-maker-app/us-central1/toggleVisibility?token=${token}&itemId=${item.id}`
);
} catch (e) {
alertsService.add('Could not change visibility');
setTimeout(() => {
setVal(!newVal);
}, 1000);
return;
}
if (res.status >= 200 && res.status < 400) { if (res.status >= 200 && res.status < 400) {
setPublicItemCount(publicItemCount + 1); setPublicItemCount(publicItemCount + 1);
@ -50,26 +60,32 @@ export function Share({ user, item, onVisibilityChange }) {
}; };
return ( return (
<VStack gap={4} align="stretch"> <VStack gap={4} align="stretch">
<VStack gap={1} align="stretch"> <div style="min-width: 46ch">
<Switch <VStack gap={1} align="stretch">
checked={val} <Switch
onChange={onChange} checked={val}
labels={['Private', 'Public']} onChange={onChange}
> labels={['Private', 'Public']}
Access >
</Switch> Access
{item.isPublic && ( </Switch>
<p> {item.isPublic && (
Public at{' '} <p>
<a href={`${BASE_URL}/create/${item.id}`} target="_blank"> Public at{' '}
{BASE_URL}/create/{item.id} <a href={`${BASE_URL}/create/${item.id}`} target="_blank">
</a>{' '} {BASE_URL}/create/{item.id}
<Button class="btn btn--dark" onClick={copyUrl}> </a>{' '}
Copy <Button
</Button> class="btn btn--dark hint--bottom hint--rounded"
</p> onClick={copyUrl}
)} aria-label="Copy"
</VStack> >
<Icon name="copy" />
</Button>
</p>
)}
</VStack>
</div>
{!user?.isPro ? ( {!user?.isPro ? (
<VStack gap={1} align="stretch"> <VStack gap={1} align="stretch">