diff --git a/packages/core/src/post.ts b/packages/core/src/post.ts index b6a4a52..e7e6a9a 100644 --- a/packages/core/src/post.ts +++ b/packages/core/src/post.ts @@ -54,17 +54,9 @@ export async function create( }, }); - console.log(`Post - create`, command.input); - - try { - await docClient.send(command); - console.log(`finished putting a Post...`); - } catch (err) { - console.log(`caught an error while creating a Post`, err); - } + await docClient.send(command); const created = await getById(tableName, id); - console.log(`created post`, created); return created; } @@ -77,16 +69,9 @@ export async function getById(tableName: string, id: string) { }, }); - console.log(`Post - getById - start`, command.input); + const response = await docClient.send(command); - try { - const response = await docClient.send(command); - console.log(`Post - getById - response`, response); - return response['Item']; - } catch (err) { - console.log(`caught an error while getting a Post`, err); - return; - } + return response['Item']; } export async function getBySlug(tableName: string, slug: string) { @@ -99,58 +84,22 @@ export async function getBySlug(tableName: string, slug: string) { }, }); - console.log(`Post - getBySlug - start`, slug); - - try { - const response = await docClient.send(command); - const result = response['Items'] || []; - console.log(`Post - getBySlug - response`, response.Count); + const response = await docClient.send(command); + const result = response['Items'] || []; - return result[0] as Post | undefined; - } catch (err) { - console.log(`caught an error while getting a Post`, err); - return; - } + return result[0] as Post | undefined; } export async function getAllBySlugs(tableName: string, slugs: string[]) { const promises: Promise[] = []; - console.log(`Post - getAllBySlugs`, slugs); - for (const slug of slugs) { promises.push(getBySlug(tableName, slug)); } const result = await Promise.all(promises); - console.log(`Post - getAllBySlugs - result`, result); - return result.filter((result) => !!result) as Post[]; - // const slugFilter = slugs.map((_slug, index) => { - // return `:slug${index}`; - // }); - // const slugExpression = slugFilter.reduce((acc, curr, index) => { - // return { - // ...acc, - // [curr]: slugs[index], - // }; - // }, {}); - // const command = new ScanCommand({ - // TableName: tableName, - // IndexName: 'SlugIndex', - // FilterExpression: `slug IN (${slugFilter.join(', ')})`, - // ExpressionAttributeValues: slugExpression, - // }); - - // try { - // const response = await docClient.send(command); - // console.log(`Post - getAllBySlugs - response`, response); - // return response['Items'] as Post[]; - // } catch (err) { - // console.log(`caught an error while getting Posts by slugs`, err); - // return; - // } } export async function list(tableName: string) { @@ -173,13 +122,11 @@ export async function queryPublished(tableName: string, tag?: string) { }); const result = await docClient.send(command); - console.log(`queryPublished`, result.Count); let posts = (result.Items || []) as PublishedPost[]; if (tag) { posts = posts.filter((post) => post.tags.includes(tag)); - console.log(`filtered posts by tag ${tag}...`); } posts.sort( @@ -193,17 +140,16 @@ export async function queryPublished(tableName: string, tag?: string) { export async function update(tableName: string, values: Partial) { const { id, ...props } = values; delete props.updated; - console.log(`Post - Update`); const setStatement = Object.keys(props) .map((key) => { - console.log(key); if (key === 'views') { return `#views = :views`; } return `${key} = :${key}`; }) .join(', '); + const UpdateExpression = `set ${setStatement}, updated = :updated`; console.log(`UpdateExpression`, UpdateExpression); @@ -215,8 +161,7 @@ export async function update(tableName: string, values: Partial) { [`:${curr}`]: values[curr as keyof Post], }; }, {}); - ExpressionAttributeValues.updated = new Date().toISOString(); - console.log(`ExpressionAttributeValues`, ExpressionAttributeValues); + ExpressionAttributeValues[':updated'] = new Date().toISOString(); const command = new UpdateCommand({ TableName: tableName, @@ -231,14 +176,10 @@ export async function update(tableName: string, values: Partial) { ReturnValues: 'ALL_NEW', }); - try { - const response = await docClient.send(command); - console.log(`Post - update - response`, response); - return response; - } catch (err) { - console.log(`caught an error while updating a Post`, err); - return; - } + console.log(`UpdateCommand`, command.input); + + const response = await docClient.send(command); + return response; } export async function increment( @@ -260,8 +201,6 @@ export async function increment( }); const response = await docClient.send(command); - console.log(`increment`, response); - return response?.Attributes?.[attribute] as number; } @@ -278,7 +217,6 @@ export async function deleteById(tableName: string, id: string) { export async function deleteAll(tableName: string) { const posts = await list(tableName); - console.log(`Post - deleteAll listed posts`, posts); for (const post of posts) { const deleteCommand = new DeleteCommand({ diff --git a/packages/core/src/tag.ts b/packages/core/src/tag.ts index c44d4d2..b36f85a 100644 --- a/packages/core/src/tag.ts +++ b/packages/core/src/tag.ts @@ -27,14 +27,7 @@ export async function create(tableName: string, name: string) { }, }); - console.log(`Tag - create`, command.input); - - try { - await docClient.send(command); - console.log(`finished putting a Tag...`); - } catch (err) { - console.log(`caught an error while creating a Tag`, err); - } + await docClient.send(command); const created = await getByName(tableName, name); @@ -49,21 +42,12 @@ export async function getByName(tableName: string, name: string) { }, }); - console.log(`Tag - getByName - start`, command.input); - - try { - const response = await docClient.send(command); - console.log(`Tag - getByName - response`, response); - return response['Item']; - } catch (err) { - console.log(`caught an error while getting a Tag`, err); - return; - } + const response = await docClient.send(command); + return response['Item']; } export async function getAllByNames(tableName: string, names: string[]) { const Keys = names.map((name) => ({ name })); - console.log(`Tag - getAllByNames`, Keys); const command = new BatchGetCommand({ RequestItems: { @@ -73,16 +57,10 @@ export async function getAllByNames(tableName: string, names: string[]) { }, }); - try { - const result = await docClient.send(command); - const responses = result['Responses'] || {}; - console.log(`Tag - getAllByNames - response`, responses); + const result = await docClient.send(command); + const responses = result['Responses'] || {}; - return responses[tableName]; - } catch (err) { - console.log(`caught an error while batchGetting Tags`, err); - return; - } + return responses[tableName]; } export async function list(tableName: string) { @@ -96,7 +74,6 @@ export async function list(tableName: string) { export async function deleteAll(tableName: string) { const tags = await list(tableName); - console.log(`Tag - deleteAll listed Tags`, tags); for (const tag of tags) { const deleteCommand = new DeleteCommand({ diff --git a/packages/functions/content/building-a-super-powered-layout-with-css-grid.mdx b/packages/functions/content/building-a-super-powered-layout-with-css-grid.mdx index 9059684..d5ce18c 100644 --- a/packages/functions/content/building-a-super-powered-layout-with-css-grid.mdx +++ b/packages/functions/content/building-a-super-powered-layout-with-css-grid.mdx @@ -5,7 +5,7 @@ tags: ['css', 'grid', 'flexbox'] isPublished: 1 publishedOn: 2024-03-13 views: 56 -likes: 151 +likes: 56 --- CSS grid is the latest layout mode which makes it a joy to create two-dimensional layouts, and with [great browser support](https://caniuse.com/css-grid) it can be used just about anywhere, even IE 10! diff --git a/packages/functions/content/chained-ternaries-are-great.mdx b/packages/functions/content/chained-ternaries-are-great.mdx index 8327a4a..0ca4b91 100644 --- a/packages/functions/content/chained-ternaries-are-great.mdx +++ b/packages/functions/content/chained-ternaries-are-great.mdx @@ -5,7 +5,7 @@ tags: ['javascript'] isPublished: 1 publishedOn: 2024-03-12 views: 56 -likes: 151 +likes: 56 --- At my first software engineering gig I spent a lot of time on Medium.com reading about how other developers thought about code and looking for inspiration about how to contribute to my team's best practices. diff --git a/packages/functions/content/how-i-built-yet-another-developer-blog.mdx b/packages/functions/content/how-i-built-yet-another-developer-blog.mdx index 69d4a89..846d005 100644 --- a/packages/functions/content/how-i-built-yet-another-developer-blog.mdx +++ b/packages/functions/content/how-i-built-yet-another-developer-blog.mdx @@ -6,7 +6,7 @@ tags: isPublished: 1 publishedOn: 2024-03-12 views: 56 -likes: 151 +likes: 56 --- The web development ecosystem has changed a lot since my early days with [Bootstrap](https://getbootstrap.com/) and [jQuery](https://jquery.com/). diff --git a/packages/functions/content/using-server-actions-to-build-an-interactive-upvote-widget.mdx b/packages/functions/content/using-server-actions-to-build-an-interactive-upvote-widget.mdx index f38bee8..3ff8640 100644 --- a/packages/functions/content/using-server-actions-to-build-an-interactive-upvote-widget.mdx +++ b/packages/functions/content/using-server-actions-to-build-an-interactive-upvote-widget.mdx @@ -5,7 +5,7 @@ tags: ['react', 'nextjs', 'serveractions'] isPublished: 1 publishedOn: 2024-03-13 views: 56 -likes: 151 +likes: 56 --- [Server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) are a brand new, cutting-edge React feature only usable in frameworks that support it like Next.js. Next.js defines them as asynchronous functions that are executed on the server, while the [React documentation](https://react.dev/reference/react/use-server) defines them as server-side functions that can be called from client-side code. diff --git a/packages/web/app/blog/[postSlug]/page.module.css b/packages/web/app/blog/[postSlug]/page.module.css index 92eb62e..b4a7ff0 100644 --- a/packages/web/app/blog/[postSlug]/page.module.css +++ b/packages/web/app/blog/[postSlug]/page.module.css @@ -42,7 +42,7 @@ } .upvotes { - margin-top: 2rem; + margin-top: 3rem; } .article > p:not(:first-of-type) { diff --git a/packages/web/app/blog/[postSlug]/page.tsx b/packages/web/app/blog/[postSlug]/page.tsx index 17c8907..422b225 100644 --- a/packages/web/app/blog/[postSlug]/page.tsx +++ b/packages/web/app/blog/[postSlug]/page.tsx @@ -86,8 +86,6 @@ const PostPage: NextPage<{ params: { postSlug: string } }> = async ({ likes, } = await getPostMetadata(postSlug); - console.log(`PostPage`, views, likes); - return ( <>
diff --git a/packages/web/app/page.tsx b/packages/web/app/page.tsx index cbe6066..04f53c4 100644 --- a/packages/web/app/page.tsx +++ b/packages/web/app/page.tsx @@ -34,8 +34,8 @@ export default function Home() {

News

- The migration to DynamoDB is complete. I hope you enjoy the new and - improved experience, I know my wallet will! + The migration to DynamoDB is complete! I hope you enjoy the new and + improved experience. Expect a new blog post soon.

diff --git a/packages/web/components/PostCard/PostCard.tsx b/packages/web/components/PostCard/PostCard.tsx index 7646cdb..61916b2 100644 --- a/packages/web/components/PostCard/PostCard.tsx +++ b/packages/web/components/PostCard/PostCard.tsx @@ -19,7 +19,7 @@ const PostCard = ({ title, slug, abstract, publishedOn, tags }: Props) => { return (
- +

{title}

diff --git a/packages/web/components/Upvotes/Upvotes.module.css b/packages/web/components/Upvotes/Upvotes.module.css index 701b934..09da00c 100644 --- a/packages/web/components/Upvotes/Upvotes.module.css +++ b/packages/web/components/Upvotes/Upvotes.module.css @@ -1,28 +1,34 @@ -@keyframes fadeOut { - from { +@keyframes fadeInOut { + 0% { + opacity: 0; + } + 50% { opacity: 1; } - to { + 100% { opacity: 0; } } .wrapper { + color: var(--color-text-supporting); + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; +} + +.button { color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; } -.wrapper:disabled { - color: var(--color-primary); - cursor: not-allowed; -} - -.wrapper:hover { +.button:hover { color: var(--color-primary); } .max { - animation: fadeOut 3000ms forwards; + animation: fadeInOut 5000ms forwards; } diff --git a/packages/web/components/Upvotes/Upvotes.tsx b/packages/web/components/Upvotes/Upvotes.tsx index ed76ce6..e181f54 100644 --- a/packages/web/components/Upvotes/Upvotes.tsx +++ b/packages/web/components/Upvotes/Upvotes.tsx @@ -13,43 +13,38 @@ interface Props { className?: string; } -const MAX_VOTES = 16; - const Upvotes = ({ initialVotes, className, incrementVotes }: Props) => { - const [isPending, setIsPending] = useState(false); const [optimisticVotes, setOptimisticVotes] = useState(initialVotes); - const isMaxedOut = optimisticVotes === MAX_VOTES; + const [wasClicked, setWasClicked] = useState(false); // This function doesn't need any dependencies // eslint-disable-next-line react-hooks/exhaustive-deps const stableDebouncedHandleIncrementVotes = useCallback( debounce(async () => { await incrementVotes(); - setIsPending(false); }, 300), [], ); return ( - +
+

Like this post?

+ + {wasClicked && Thanks for supporting!} +
); }; diff --git a/packages/web/hooks/useAbortController.ts b/packages/web/hooks/useAbortController.ts deleted file mode 100644 index 993aa52..0000000 --- a/packages/web/hooks/useAbortController.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useEffect, useMemo } from 'react'; - -const useAbortController = () => { - const controller = new AbortController(); - - useEffect(() => { - console.log(`useAbortController effect...`, controller.signal); - - return () => { - console.log(`useAbortController unmounted, aborting request...`); - - controller.abort(); - }; - }, []); - return controller.signal; -}; - -export default useAbortController;