Merge pull request #30 from codiga/daniel/update-user-links

daniel/update user links

Author: dastrong-codiga

public/manifest.json

@@ -3,7 +3,7 @@
 
   "name": "Codiga",
   "description": "Create, share and use Code Snippets from your browser",
-  "version": "0.0.12",
+  "version": "0.0.13",
 
   "options_ui": {
     "page": "options.html",

src/assets/CodigaIcon.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+export default function CodigaIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.2087 18L22.3306 12V18L12.2087 24L2.08691 18V6L12.2087 0L22.3306 6L12.2087 12L7.14785 9.00004V15L12.2087 18Z"
+        fill="url(#paint0_linear_1312_15167)"
+      />
+      <path
+        opacity="0.6"
+        d="M17.2698 8.99996L12.2088 12L7.14795 8.99996L12.2088 6L17.2698 8.99996Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1312_15167"
+          x1="4.22591"
+          y1="20.1962"
+          x2="20.6125"
+          y2="4.23602"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F71C9D" />
+          <stop offset="1" stopColor="#FC8926" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

src/components/panel/Panel.tsx

@@ -12,8 +12,8 @@ import "react-modern-drawer/dist/index.css";
 
 import PanelContent from "./PanelContent";
 import Header from "../header";
-import { ForChromeWithoutCodigaText } from "../common/CodigaForChrome";
 import { CODIGA_API_TOKEN, API_URL } from "../../lib/constants";
+import CodigaIcon from "../../assets/CodigaIcon";
 
 const httpLink = new HttpLink({
   uri: API_URL,
@@ -53,7 +53,7 @@ const Panel = () => {
       {client && (
         <ApolloProvider client={client}>
           <button onClick={toggleDrawer} className="codiga-panel-opener">
-            <ForChromeWithoutCodigaText />
+            <CodigaIcon />
           </button>
 
           <Drawer

src/components/panel/PanelContent.tsx

@@ -74,13 +74,17 @@ export default function PanelContent({ isOpen }: PanelContentProps) {
           ) : (
             <>
               Logged in as{" "}
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href={`https://app.codiga.io/hub/user/${userData.user.accountType}/${userData.user.username}/assistant`.toLowerCase()}
-              >
-                {userData.user.username.toLowerCase()}
-              </a>
+              {userData.user.hasSlug && userData.user?.slug ? (
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  href={`https://app.codiga.io/hub/user/${userData.user.slug}/assistant`.toLowerCase()}
+                >
+                  {userData.user.username}
+                </a>
+              ) : (
+                userData.user.username
+              )}
             </>
           )}
         </p>

src/components/panel/PanelSnippetCard.tsx

@@ -103,13 +103,17 @@ const PanelSnippetCard = ({
       <div className="card-subheading">
         <p className="card-subheading--group" title="The snippet owner">
           <UserIcon />
-          <a
-            target="_blank"
-            rel="noreferrer"
-            href={`https://app.codiga.io/hub/user/${snippet.owner.accountType}/${snippet.owner.username}/assistant`.toLowerCase()}
-          >
-            {snippet.owner.username.toLowerCase()}
-          </a>
+          {snippet.owner.hasSlug && snippet.owner.slug ? (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://app.codiga.io/hub/user/${snippet.owner.slug}/assistant`.toLowerCase()}
+            >
+              {snippet.owner.displayName}
+            </a>
+          ) : (
+            <>{snippet.owner.displayName}</>
+          )}
         </p>
         {snippet.groups.length > 0 && (
           <p

src/graphql/queries.tsx

@@ -73,8 +73,9 @@ export const GET_RECIPES_SEMANTIC = gql`
       downvotes
       upvotes
       owner {
-        username
-        accountType
+        displayName
+        hasSlug
+        slug
       }
       groups {
         id
@@ -91,16 +92,18 @@ export const GET_RECIPES_SEMANTIC = gql`
 
 export type UserResponse = {
   user: {
-    accountType: string;
     username: string;
+    hasSlug: boolean;
+    slug?: string;
   };
 };
 
 export const GET_USER = gql`
   query getUser {
     user {
-      accountType
       username
+      hasSlug
+      slug
     }
   }
 `;

src/lib/types.ts

@@ -20,8 +20,9 @@ export type AssistantRecipe = {
   isPublic: boolean;
   isSubscribed: boolean;
   owner: {
-    username: string;
-    accountType: string;
+    displayName: string;
+    hasSlug: boolean;
+    slug?: string;
   };
   groups: {
     id: number;