[feat] Custom Examples (#128)

* Changes

* Load Examples

* Changes

* Changes

* Rename and fixes

* Changes

* delete example

* Changes

* Update examples

* Changes

* Improvements

* Refresh jwt token

* Refresh token and data flow

* Display GitHub details and suggested improvements

* Changes

* Changes

* Changes

* Changes

* Improvements

* Improvements

* Fix lint errors

* Refactor ExampleNotFound component for improved reusability and integrate into CustomExampleList

* Small fixes

disable button on loading and change names

* Fixes

* Improvements

* More fixes

* Improve auth

src/app/index.tsx

@@ -22,6 +22,7 @@ import {
   useStoreWallet,
 } from '@stores';
 import { analyticsApp } from 'firebaseConfig';
+import { useStoreCustomExamples } from 'src/stores/examples';
 
 import { routes } from './routes';
 
@@ -54,32 +55,43 @@ export const App = () => {
     resetStore: resetStoreWallet,
   } = useStoreWallet.use.actions();
 
+  const initStoreExamples = useStoreCustomExamples.use.init?.();
+  const { resetStore: resetStoreExamples } = useStoreCustomExamples.use.actions();
+
   useEffect(() => {
-    initStoreAuth();
-    initStoreUI();
-    initStoreChainClient();
-    initStoreWallet();
-
-    window.customPackages = {};
-    Object.assign(window.customPackages, {
-      createClient,
-      ...createClient,
-      papiDescriptors,
-      ...papiDescriptors,
-      getPolkadotSigner,
-      connectInjectedExtension,
-      getInjectedExtensions,
-    });
+    const initializeStores = async () => {
+      await initStoreAuth();
+      initStoreUI();
+      initStoreChainClient();
+      initStoreWallet();
+      initStoreExamples();
+
+      window.customPackages = {};
+      Object.assign(window.customPackages, {
+        createClient,
+        ...createClient,
+        papiDescriptors,
+        ...papiDescriptors,
+        getPolkadotSigner,
+        connectInjectedExtension,
+        getInjectedExtensions,
+      });
 
-    refTimeout.current = setTimeout(() => {
-      document.body.removeAttribute('style');
-    }, 400);
+      refTimeout.current = setTimeout(() => {
+        document.body.removeAttribute('style');
+      }, 400);
+    };
+
+    initializeStores().catch((error) => {
+      console.error('Error initializing stores', error);
+    });
 
     return () => {
       resetStoreAuth();
       resetStoreUI();
       void resetStoreChain();
       resetStoreWallet();
+      resetStoreExamples();
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/views/onboarding/components/notFound/index.tsx → src/components/exampleNotFound/index.tsx

@@ -1,8 +1,17 @@
 import { Icon } from '@components/icon';
+import { PDLink } from '@components/pdLink';
 import { useStoreAuth } from '@stores';
 import { cn } from '@utils/helpers';
 
-export const NotFound = () => {
+interface ExampleNotFoundProps {
+  classes?: string;
+  iconClasses?: string;
+  textClasses?: string;
+  onClick?: () => void;
+}
+
+export const ExampleNotFound = (props: ExampleNotFoundProps) => {
+  const { classes, iconClasses, textClasses, onClick } = props;
   const isAuthenticated = useStoreAuth.use.jwtToken?.();
   const { authorize } = useStoreAuth.use.actions();
 
@@ -16,9 +25,14 @@ export const NotFound = () => {
             'mb-8',
             'self-center text-dev-white-1000',
             'dark:text-dev-purple-50',
+            iconClasses,
           )}
         />
-        <div className="flex flex-col items-center justify-center">
+        <div className={cn(
+          'flex flex-col items-center justify-center',
+          textClasses,
+        )}
+        >
           <h4 className="mb-4 self-center font-h4-bold">Please Log in</h4>
           <p className="max-w-80 text-center font-geist">
             To access your custom examples, please log in using your GitHub account.
@@ -40,31 +54,62 @@ export const NotFound = () => {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className={cn(
+      'flex flex-col',
+      classes,
+    )}
+    >
       <Icon
         name="icon-group"
         size={[128]}
         className={cn(
           'mb-8',
           'self-center text-dev-white-1000',
           'dark:text-dev-purple-50',
+          iconClasses,
         )}
       />
-      <div className="flex flex-col items-center justify-center">
+      <div className={cn(
+        'flex flex-col items-center justify-center',
+        textClasses,
+      )}
+      >
         <h4 className="mb-4 self-center font-h4-bold">Nothing here</h4>
         <p className="max-w-80 text-center font-geist">
           Currently, you don't have any custom examples created. Ready to create one?
         </p>
-        <button
-          className={cn(
-            'mb-2 mt-6 w-full p-4 transition-colors',
-            'font-geist text-white font-body2-bold',
-            'bg-dev-pink-500',
-            'hover:bg-dev-pink-400',
-          )}
-        >
-          Create Example
-        </button>
+
+        {
+          onClick
+            ? (
+              <button
+                onClick={onClick}
+                className={cn(
+                  'mb-2 mt-6 w-full p-4 transition-colors',
+                  'font-geist text-white font-body2-bold',
+                  'bg-dev-pink-500',
+                  'hover:bg-dev-pink-400',
+                )}
+              >
+                Create Example
+              </button>
+            )
+            : (
+              <PDLink to="/code?d=1">
+                <button
+                  className={cn(
+                    'mb-2 mt-6 w-full p-4 transition-colors',
+                    'font-geist text-white font-body2-bold',
+                    'bg-dev-pink-500',
+                    'hover:bg-dev-pink-400',
+                  )}
+                >
+                  Create Example
+                </button>
+              </PDLink>
+            )
+        }
+
       </div>
     </div>
   );

src/components/githubButton/index.tsx

@@ -1,9 +1,11 @@
 import { useToggleVisibility } from '@pivanov/use-toggle-visibility';
+import { useCallback } from 'react';
 
 import { Icon } from '@components/icon';
 import { ModalGithubLogin } from '@components/modals/modalGithubLogin';
 import { useStoreAuth } from '@stores';
 import { cn } from '@utils/helpers';
+import { useStoreCustomExamples } from 'src/stores/examples';
 
 export const GithubButton = () => {
   const [
@@ -12,33 +14,69 @@ export const GithubButton = () => {
   ] = useToggleVisibility(ModalGithubLogin);
 
   const { logout } = useStoreAuth.use.actions();
-  const authIsLoading = useStoreAuth.use.jwtTokenIsLoading?.();
+  const { name, avatar } = useStoreAuth.use.user();
   const isAuthenticated = useStoreAuth.use.jwtToken?.();
+  const { resetStore } = useStoreCustomExamples.use.actions();
+
+  const handleLogout = useCallback(async () => {
+    resetStore();
+    await logout();
+  }, [
+    logout,
+    resetStore,
+  ]);
 
   return (
     <div className="mb-4 flex h-16 items-center">
-      <button
-        disabled={authIsLoading}
-        onClick={isAuthenticated ? logout : toggleVisibility}
-        type="button"
-        className={cn(
-          'flex h-12 cursor-pointer items-center gap-1',
-          'ml-auto',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          'font-geist font-body1-bold',
-          'relative',
-          'after:absolute after:bottom-0 after:left-0 after:content-[""]',
-          'after:h-[2px] after:w-full after:bg-dev-pink-500',
-          'after:opacity-0 after:transition-opacity hover:after:opacity-100',
-        )}
-      >
-        <Icon name="logo-github" />
-        {
-          isAuthenticated
-            ? 'Logout'
-            : 'Login'
-        }
-      </button>
+      {
+        isAuthenticated
+          ? (
+            <div className={cn(
+              'flex h-12 items-center gap-4',
+              'ml-auto',
+              'font-geist font-body1-bold',
+            )}
+            >
+              <div className="flex items-center gap-2.5">
+                <img
+                  alt="avatar"
+                  className="size-8 rounded-full"
+                  src={avatar}
+                />
+                {name.length > 20 ? `${name.slice(0, 20)}..` : name}
+              </div>
+              <button
+                className="flex items-center gap-4 duration-200 hover:text-dev-pink-500"
+                onClick={handleLogout}
+              >
+                <Icon
+                  name="icon-logout"
+                  size={[22]}
+                />
+              </button>
+            </div>
+          )
+          : (
+            <button
+              onClick={toggleVisibility}
+              type="button"
+              className={cn(
+                'flex h-12 cursor-pointer items-center gap-1',
+                'ml-auto',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+                'font-geist font-body1-bold',
+                'relative',
+                'after:absolute after:bottom-0 after:left-0 after:content-[""]',
+                'after:h-[2px] after:w-full after:bg-dev-pink-500',
+                'after:opacity-0 after:transition-opacity hover:after:opacity-100',
+              )}
+            >
+              <Icon name="logo-github" />
+              Login
+            </button>
+          )
+      }
+
       <GithubModal onClose={toggleVisibility} />
     </div>
   );