feat: view snippet/cookbooks, bug fixes and general improvements

.eslintrc.js

@@ -4,14 +4,30 @@ module.exports = {
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'error',
+    'import/no-cycle': 'off',
+    'import/prefer-default-export': 'off',
     // Since React 17 and typescript 4.1 you can safely disable the rule
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'import/no-cycle': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
     'react/require-default-props': [2, { functions: 'defaultArguments' }],
-    'import/prefer-default-export': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        format: null,
+        selector: 'variable',
+        leadingUnderscore: 'allow',
+      },
+    ],
   },
   parserOptions: {
     ecmaVersion: 2020,

package.json

@@ -100,7 +100,7 @@
     "@apollo/client": "^3.6.9",
     "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.8",
-    "@codiga/codiga-components": "^1.0.5",
+    "@codiga/components": "^1.1.0",
     "@electron/remote": "^2.0.8",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

src/main/main.ts

@@ -46,7 +46,7 @@ if (isDebug) {
 const installExtensions = async () => {
   const installer = require('electron-devtools-installer');
   const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
-  const extensions = ['REACT_DEVELOPER_TOOLS'];
+  const extensions = ['REACT_DEVELOPER_TOOLS', 'APOLLO_DEVELOPER_TOOLS'];
 
   return installer
     .default(
@@ -140,7 +140,11 @@ app
       mainWindow?.minimize();
     });
     ipcMain.on('maximizeApp', () => {
-      mainWindow?.maximize();
+      if (mainWindow?.isMaximized()) {
+        mainWindow?.unmaximize();
+      } else {
+        mainWindow?.maximize();
+      }
     });
     ipcMain.on('closeApp', () => {
       mainWindow?.close();

src/main/preload.ts

@@ -7,6 +7,7 @@ export type Channels =
   | 'closeApp';
 
 contextBridge.exposeInMainWorld('electron', {
+  isMac: process.platform === 'darwin',
   ipcRenderer: {
     sendMessage(channel: Channels, args: unknown[]) {
       ipcRenderer.send(channel, args);

src/renderer/App.tsx

@@ -1,6 +1,6 @@
 import { ApolloProvider } from '@apollo/client';
 import { ChakraProvider } from '@chakra-ui/react';
-import { theme } from '@codiga/codiga-components';
+import { theme } from '@codiga/components';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 
 // PAGES
@@ -24,37 +24,50 @@ import Filters from './components/Filters/Filters';
 import { UserProvider } from './components/UserContext';
 import { ThemeProvider } from './components/ThemeContext';
 import { FiltersProvider } from './components/FiltersContext';
+import ViewSnippet from './pages/ViewSnippet';
+import ViewCookbookSnippets from './pages/ViewCookbookSnippets';
 
 export default function App() {
   return (
     <ApolloProvider client={client}>
       <ChakraProvider theme={theme}>
         <UserProvider>
           <ThemeProvider>
-            <Router>
-              <Layout>
-                <FiltersProvider>
-                  <Filters />
-
+            <FiltersProvider>
+              <Router>
+                <Layout>
                   <Routes>
-                    <Route path="/" element={<Home />} />
+                    <Route element={<Filters />}>
+                      <Route path="/" element={<Home />} />
+                      <Route path="/my-snippets" element={<MySnippets />} />
+                      <Route
+                        path="/favorite-snippets"
+                        element={<FavoriteSnippets />}
+                      />
+                      <Route path="/my-cookbooks" element={<MyCookbooks />} />
+                      <Route
+                        path="/favorite-cookbooks"
+                        element={<FavoriteCookbooks />}
+                      />
+                      <Route path="/team-snippets" element={<TeamSnippets />} />
+                      <Route
+                        path="/team-cookbooks"
+                        element={<TeamCookbooks />}
+                      />
+                    </Route>
 
-                    <Route path="/my-snippets" element={<MySnippets />} />
                     <Route
-                      path="/favorite-snippets"
-                      element={<FavoriteSnippets />}
+                      path="/view-snippet/:snippetId"
+                      element={<ViewSnippet />}
                     />
-                    <Route path="/my-cookbooks" element={<MyCookbooks />} />
                     <Route
-                      path="/favorite-cookbooks"
-                      element={<FavoriteCookbooks />}
+                      path="/view-cookbook/:cookbookId"
+                      element={<ViewCookbookSnippets />}
                     />
-                    <Route path="/team-snippets" element={<TeamSnippets />} />
-                    <Route path="/team-cookbooks" element={<TeamCookbooks />} />
                   </Routes>
-                </FiltersProvider>
-              </Layout>
-            </Router>
+                </Layout>
+              </Router>
+            </FiltersProvider>
           </ThemeProvider>
         </UserProvider>
       </ChakraProvider>

src/renderer/components/AvatarAndName/AvatarAndName.tsx

@@ -0,0 +1,30 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { Avatar } from '@codiga/components';
+import { PublicUser } from '../../types/userTypes';
+import { getAvatarUrl } from '../../utils/userUtils';
+import UserLink from '../UserLink';
+
+type AvatarAndNameProps = {
+  owner?: PublicUser;
+};
+
+export default function AvatarAndName({ owner = {} }: AvatarAndNameProps) {
+  return (
+    <Flex alignItems="center" gap="space_8">
+      <Avatar
+        size="xs"
+        name={owner?.displayName || 'Anonymous'}
+        src={getAvatarUrl({ id: owner?.id })}
+      />
+      <Text
+        size="xs"
+        noOfLines={1}
+        maxW="300px"
+        display="inline-block"
+        whiteSpace="nowrap"
+      >
+        <UserLink owner={owner} />
+      </Text>
+    </Flex>
+  );
+}

src/renderer/components/AvatarAndName/index.tsx

@@ -0,0 +1 @@
+export { default } from './AvatarAndName';

src/renderer/components/BackButton/BackButton.tsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/react';
+import { ChevronLeftIcon } from '@codiga/components';
+import { useNavigate } from 'react-router-dom';
+
+export default function BackButton() {
+  const navigate = useNavigate();
+
+  return (
+    <IconButton
+      variant="ghost"
+      onClick={() => navigate(-1)}
+      h="28px"
+      minW="28px"
+      fontSize="12px"
+      icon={<ChevronLeftIcon />}
+      aria-label="go back"
+      _focus={{
+        boxShadow: 'none',
+      }}
+    />
+  );
+}

src/renderer/components/BackButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './BackButton';