release: v1.1 🎉

omsimos · Jul 24, 2023 · e18422a · e18422a · vercel · Jul 24, 2023
2 parents 0cc9553 + 0dd7977
commit e18422a
Show file tree

Hide file tree

Showing 11 changed files with 287 additions and 129 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -15,7 +15,7 @@
     "@apollo/server-plugin-response-cache": "^4.1.2",
     "@as-integrations/next": "^2.0.1",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
-    "@headlessui/react": "^1.7.2",
+    "@headlessui/react": "^1.7.15",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@tanstack/react-query": "^4.29.19",
     "@umamin/db": "*",
@@ -31,15 +31,15 @@
     "lodash": "^4.17.21",
     "lru-cache": "^10.0.0",
     "nanoid": "^4.0.0",
-    "next": "^13.4.8",
+    "next": "^13.4.12",
     "next-auth": "^4.18.8",
     "next-pwa": "^5.6.0",
     "next-seo": "^5.4.0",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.10.1",
     "react-markdown": "^8.0.3",
     "react-toggle-dark-mode": "^1.1.1",
     "reflect-metadata": "^0.1.13",

diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
@@ -6,7 +6,7 @@ import { ImageFill } from './ImageFill';
 
 export const Footer = () => {
   return (
-    <footer className='contain py-12'>
+    <footer className='contain py-12 hidden md:block'>
       <div className='line mb-12' />
 
       <div className='grid grid-cols-2 flex-wrap justify-between gap-y-16 sm:flex'>
@@ -61,15 +61,7 @@ export const Footer = () => {
           rel='noreferrer noopener'
           className='text-sm font-medium text-gray-500 hover:underline md:text-base'
         >
-          Omsimos Collective
-        </a>
-        <a
-          href='https://github.com/joshxfi'
-          target='_blank'
-          rel='noreferrer noopener'
-          className='mt-2 text-sm font-medium text-gray-500 hover:underline md:text-base'
-        >
-          Ⓒ 2023 Josh Daniel Bañares
+          OMSIMOS© 2023
         </a>
       </div>
     </footer>

diff --git a/apps/web/src/components/InboxTabs/Container.tsx b/apps/web/src/components/InboxTabs/Container.tsx
@@ -1,7 +1,14 @@
 import React, { Dispatch, SetStateAction } from 'react';
+import toast from 'react-hot-toast';
+import { useLogEvent } from '@/hooks';
+import { IoIosCopy } from 'react-icons/io';
+import { useSession } from 'next-auth/react';
+import { useInboxContext } from '@/contexts/InboxContext';
+import { ImageFill } from '../ImageFill';
 
 interface Props {
   pageNo: number;
+  tab?: string;
   cursorId: string;
   isLoading: boolean;
   messages?: any;
@@ -11,6 +18,7 @@ interface Props {
 }
 
 export const InboxTabContainer = ({
+  tab,
   cursorId,
   pageNo,
   messages,
@@ -19,10 +27,49 @@ export const InboxTabContainer = ({
   setPageNo,
   children,
 }: Props) => {
+  const { data } = useSession();
+  const { user } = useInboxContext();
+  const triggerEvent = useLogEvent();
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(
+      `${window.location.origin}/to/${user?.username}`
+    );
+    toast.success('Copied to clipboard');
+
+    triggerEvent('copy_link');
+  };
+
   return (
     <section className='flex flex-col space-y-6'>
       {!messages?.length && !isLoading && (
-        <p className='font-medium'>No messages to show</p>
+        <div className='msg-card'>
+          <p className='mb-4 text-secondary-400'>
+            {tab === 'sent'
+              ? 'You have not sent any messages yet. Send anonymous messages to your friends!'
+              : 'You have 0 messages. Start receiving anonymous messages by sharing your link!'}
+          </p>
+
+          <div className='flex gap-x-2 items-center'>
+            <ImageFill
+              alt='profile picture'
+              src={data?.user?.image}
+              unoptimized
+              className='border-secondary-100 h-[40px] w-[40px] object-cover rounded-full border'
+            />
+
+            <button
+              type='button'
+              onClick={copyLink}
+              className='border-secondary-100 flex items-center justify-center gap-3 truncate rounded-lg border px-4 py-2'
+            >
+              <p>
+                {window.location.host}/to/{user?.username}
+              </p>
+              <IoIosCopy className='text-primary-200 flex-none' />
+            </button>
+          </div>
+        </div>
       )}
 
       {isLoading ? (

diff --git a/apps/web/src/components/InboxTabs/Recent.tsx b/apps/web/src/components/InboxTabs/Recent.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { formatDistanceToNow } from 'date-fns';
+import { HiPuzzlePiece } from 'react-icons/hi2';
+import { BiSolidMessageDetail } from 'react-icons/bi';
 import type { RecentMessage } from '@umamin/generated';
 import { useQuery, useMutation } from '@tanstack/react-query';
 
@@ -79,20 +81,32 @@ export const Recent = () => {
           onClick={() => handleOpen(m)}
           className='msg-card hide-tap-highlight relative w-full cursor-pointer scroll-mt-6 overflow-hidden text-left'
         >
-          {m.clue && <p className='absolute right-3 top-3 text-lg'>🧩</p>}
-
           <h3 className='font-syneExtrabold text-gradient mb-4 text-center text-3xl'>
             umamin
           </h3>
 
           <div className='send chat-p dark:bg-secondary-100 dark:before:bg-secondary-100 dark:after:bg-secondary-200 flex max-w-full items-center space-x-3 bg-gray-200 px-6 py-4 font-medium before:bg-gray-200 after:bg-gray-300'>
-            <p className='reply text-secondary-400'>{m.receiverMsg}</p>
+            <p className='reply text-secondary-400 truncate'>{m.receiverMsg}</p>
+          </div>
+
+          <div className='flex justify-between items-center'>
+            <p className='text-secondary-400 text-sm font-medium italic'>
+              {formatDistanceToNow(new Date(m.createdAt), {
+                addSuffix: true,
+              })}
+            </p>
+
+            <div className='flex gap-x-2'>
+              <span className='rounded-full bg-[#6D4566] text-primary-200 p-2'>
+                <BiSolidMessageDetail />
+              </span>
+              {m.clue && (
+                <span className='rounded-full bg-[#456D51] text-[#4DF000] p-2'>
+                  <HiPuzzlePiece />
+                </span>
+              )}
+            </div>
           </div>
-          <p className='text-secondary-400 text-sm font-medium italic'>
-            {formatDistanceToNow(new Date(m.createdAt), {
-              addSuffix: true,
-            })}
-          </p>
         </button>
       ))}
     </InboxTabContainer>

diff --git a/apps/web/src/components/InboxTabs/SeenCard.tsx b/apps/web/src/components/InboxTabs/SeenCard.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback } from 'react';
 import type { SeenMessage } from '@umamin/generated';
 import { useMutation } from '@tanstack/react-query';
+import { HiPuzzlePiece } from 'react-icons/hi2';
 import { formatDistanceToNow } from 'date-fns';
 import { toPng } from 'html-to-image';
 import toast from 'react-hot-toast';
@@ -179,8 +180,12 @@ export const SeenCard = ({ message, refetch }: Props) => {
 
         <div className='absolute right-3 bottom-3 space-x-4 text-lg'>
           {clue && (
-            <button type='button' onClick={() => setClueDialog(true)}>
-              🧩
+            <button
+              type='button'
+              onClick={() => setClueDialog(true)}
+              className='rounded-full bg-[#456D51] text-[#4DF000] p-2'
+            >
+              <HiPuzzlePiece />
             </button>
           )}
         </div>

diff --git a/apps/web/src/components/InboxTabs/Sent.tsx b/apps/web/src/components/InboxTabs/Sent.tsx
@@ -21,6 +21,7 @@ export const Sent = () => {
 
   return (
     <InboxTabContainer
+      tab='sent'
       pageNo={pageNo}
       cursorId={cursorId}
       messages={messages}

diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import React, { useState } from 'react';
-import { BiLogOutCircle, BiUserCircle } from 'react-icons/bi';
 import { FaDiscord, FaFacebook } from 'react-icons/fa';
 import { signOut, useSession } from 'next-auth/react';
+import { BiUserCircle } from 'react-icons/bi';
 import { HiMenuAlt3 } from 'react-icons/hi';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -12,7 +12,7 @@ import { ImageFill, Menu } from '@/components';
 
 export const Navbar = () => {
   const [loading, setLoading] = useState(false);
-  const { status } = useSession();
+  const { data, status } = useSession();
   const { push } = useRouter();
 
   const handleLogout = async () => {
@@ -33,10 +33,10 @@ export const Navbar = () => {
         />
       </Link>
 
-      <div className='flex items-center space-x-5 sm:space-x-6'>
+      <div className='items-center space-x-5 md:space-x-6 flex'>
         {/* <ThemeSwitcher className='mb-1 sm:mb-0' /> */}
 
-        <div className='hidden items-center justify-center space-x-6 sm:flex'>
+        <div className='hidden items-center justify-center space-x-6 md:flex'>
           {status === 'loading' || loading ? (
             <span className='loader' />
           ) : status === 'authenticated' ? (
@@ -68,27 +68,25 @@ export const Navbar = () => {
         </div>
 
         <Menu
-          className='sm:hidden'
-          panelStyles='top-8 right-0'
+          className='md:hidden'
+          panelStyles='top-14 right-0'
           button={
             status === 'loading' || loading ? (
               <span className='loader' />
+            ) : status === 'authenticated' ? (
+              <ImageFill
+                alt='profile picture'
+                src={data?.user?.image}
+                unoptimized
+                className='border-secondary-100 h-[50px] w-[50px] object-cover rounded-full border'
+              />
             ) : (
               <HiMenuAlt3 className='transition-colors hover:text-gray-300' />
             )
           }
           panel={
             <>
-              {status === 'authenticated' ? (
-                <button
-                  onClick={handleLogout}
-                  type='button'
-                  className='menu-item'
-                >
-                  <BiLogOutCircle className='text-base' />
-                  <p>Logout</p>
-                </button>
-              ) : (
+              {status === 'unauthenticated' && (
                 <Link href='/login' className='menu-item'>
                   <BiUserCircle className='text-base' />
                   <p>Get started</p>

diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
@@ -44,7 +44,17 @@ function MyApp({
               {getLayout(<Component {...pageProps} />)}
             </ErrorBoundary>
           )}
-          <Toaster />
+          <Toaster
+            position='bottom-center'
+            containerClassName='md:mb-auto mb-24'
+            toastOptions={{
+              className: 'bg-secondary-200 text-secondary-100',
+              style: {
+                background: '#2D2E34',
+                color: '#F5F5F5',
+              },
+            }}
+          />
         </Hydrate>
       </QueryClientProvider>
     </SessionProvider>