bible-technology · vipinpaul · Oct 9, 2023 · Sep 5, 2023
diff --git a/app/newproject/page.js b/app/newproject/page.js
@@ -1,5 +1,5 @@
 import ProtectedRoute from '@/components/Protected';
-import NewWebProject from '@/modules/projects/NewWebProject';
+import NewWebProject from '@/components/Projects/NewWebProject';
 
 const newproject = () => (
   <ProtectedRoute>

diff --git a/app/projects/page.jsx b/app/projects/page.jsx
@@ -1,4 +1,6 @@
-import ProjectList from '@/modules/projects/WebProjectList';
+'use client';
+
+import ProjectList from '@/components/Projects/ProjectList';
 import ProtectedRoute from '@/components/Protected';
 
 const projects = () => (

diff --git a/jsconfig.json b/jsconfig.json
@@ -1,8 +1,6 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
     "paths": {
       "@/icons/*": [
         "public/icons/*"
@@ -25,6 +23,9 @@
       "@/util/*": [
         "renderer/src/util/*"
       ],
+      "@/app/*": [
+        "app/*"
+      ],
     }
   }
-}
+}
diff --git a/renderer/pages/newproject.js b/renderer/pages/newproject.js
@@ -1,4 +1,4 @@
-import NewProject from '@/modules/projects/NewProject';
+import NewProject from '@/components/Projects/NewProject';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import ProjectContextProvider from '@/components/context/ProjectContext';
 import AutographaContextProvider from '@/components/context/AutographaContext';

diff --git a/renderer/pages/projects.js b/renderer/pages/projects.js
@@ -1,16 +1,16 @@
-import ProjectList from '@/modules/projects/ProjectList';
+import ProjectList from '@/components/Projects/ProjectList';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import AutographaContextProvider from '@/components/context/AutographaContext';
 import ProjectContextProvider from '@/components/context/ProjectContext';
 
-const projects = () => (
+const Projects = () => (
   <AuthenticationContextProvider>
     <AutographaContextProvider>
       <ProjectContextProvider>
         <ProjectList />
       </ProjectContextProvider>
     </AutographaContextProvider>
   </AuthenticationContextProvider>
-);
+  );
 
-export default projects;
+export default Projects;
diff --git a/renderer/src/Home.js b/renderer/src/Home.js
@@ -2,13 +2,13 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 
 import { useContext, useState, useEffect } from 'react';
+import ProjectList from '@/components/Projects/ProjectList';
 import Login from './components/Login/Login';
 import AuthenticationContextProvider, { AuthenticationContext } from './components/Login/AuthenticationContextProvider';
 import { loadUsers } from './core/Login/handleJson';
 import ProjectContextProvider from './components/context/ProjectContext';
 import ReferenceContextProvider from './components/context/ReferenceContext';
 import * as logger from './logger';
-import ProjectList from './modules/projects/ProjectList';
 import AutographaContextProvider from './components/context/AutographaContext';
 import { getorPutAppLangage } from './core/projects/handleProfile';
 import i18n from './translations/i18n';

diff --git a/renderer/src/WebHome.js b/renderer/src/WebHome.js
@@ -14,7 +14,7 @@ const WebHome = () => {
   useEffect(() => {
     const checkSession = async () => {
       const data = await getSupabaseSession();
-      if (data.session) {
+      if (data.session.user) {
         setSession(data.session);
         const appLangCode = await getorPutAppLangage('get', data.session.user.email);
         if (i18n.language !== appLangCode) {

diff --git a/renderer/src/components/Login/Signin.js b/renderer/src/components/Login/Signin.js
@@ -19,12 +19,14 @@
      password,
    });
     if (data.session) {
       console.log('sign in success', data);
       await localforage.setItem('userProfile', data);
+      const userData = await localforage.getItem('userProfile');
+      console.log({ userData });
       router.push('/projects');
       setLoading(false);
     } else {
      setError(signInError);
      setLoading(false);
      console.log('sign in error', signInError);
    }

diff --git a/renderer/src/components/Projects/CustomList.js b/renderer/src/components/Projects/CustomList.js
@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
+import { classNames } from '../../util/classNames';
+
+export default function CustomList({
+ selected, setSelected, options, show, width,
+}) {
+  const dropdownWidth = width ?? 40;
+  return (
+    <Listbox value={selected} onChange={setSelected} disabled={!show}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
+          <span className="block truncate">{selected?.title}</span>
+          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+            <ChevronUpDownIcon
+              className="w-5 h-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+            {options.map((option) => (
+              <Listbox.Option
+                key={option.title}
+                className={({ active }) => `${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'}
+                  cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-gray-200`}
+                value={option}
+              >
+                {({ selected, active }) => (
+                  <>
+                    <span
+                      className={`${
+                        selected ? 'font-medium' : 'font-normal'
+                      } block truncate`}
+                    >
+                      {option.title}
+                    </span>
+                    {selected ? (
+                      <span
+                        className={`${
+                          active ? 'text-amber-600' : 'text-amber-600'
+                        }
+                        absolute inset-y-0 left-0 flex items-center pl-3`}
+                      >
+                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+}
+
+CustomList.propTypes = {
+  selected: PropTypes.object,
+  setSelected: PropTypes.func,
+  options: PropTypes.array,
+  show: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
diff --git a/renderer/src/components/Projects/EnhancedTableHead.js b/renderer/src/components/Projects/EnhancedTableHead.js
@@ -0,0 +1,187 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TableSortLabel,
+  TableCell,
+} from '@material-ui/core';
+import {
+  StarIcon,
+} from '@heroicons/react/24/outline';
+import i18n from '../../translations/i18n';
+
+// import { Menu, Transition } from '@headlessui/react';
+
+const headCells = [
+  {
+    // id: 'name', numeric: false, disablePadding: true, label: 'Project Name',
+    id: 'name', numeric: false, disablePadding: true, label: i18n.t('label-project-name'),
+  },
+  {
+    id: 'language', numeric: false, disablePadding: true, label: i18n.t('label-language'),
+  },
+  {
+    // id: 'type', numeric: false, disablePadding: true, label: 'Flavor',
+    id: 'type', numeric: false, disablePadding: true, label: i18n.t('label-flavour'),
+  },
+  {
+    id: 'date', numeric: true, disablePadding: false, label: i18n.t('label-created-date'),
+  },
+  {
+    id: 'view', numeric: true, disablePadding: false, label: i18n.t('label-last-viewed'),
+  },
+  // {
+  //   id: 'editors', numeric: false, disablePadding: false, label: 'Editors',
+  // },
+  // {
+  //   id: 'more', numeric: false, disablePadding: false, label: '',
+  // },
+];
+
+function EnhancedTableHead(props) {
+  const {
+    order, orderBy, onRequestSort,
+  } = props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <thead className="bg-gray-50">
+      <tr>
+        <th
+          scope="col"
+            // colSpan="2"
+          className="px-4 py-3 text-left text-xs font-medium text-gray-400"
+        >
+          <StarIcon className="h-5 w-5" aria-hidden="true" />
+        </th>
+
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            className="bg-gray-50"
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <div className="flex content-center">
+              {/* <Menu as="div" className="relative inline-block mr-2 mt-2">
+                  <Menu.Button className="focus:outline-none">
+                    <FilterIcon
+                      className="w-4 h-4 text-gray-400 hover:text-gray-600"
+                      aria-hidden="true"
+                    />
+                  </Menu.Button>
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white
+                    divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black
+                    ring-opacity-5 focus:outline-none"
+                    >
+                      <div className="px-3 py-2 bg-gray-100 flex justify-between uppercase text-xs text-gray-500">
+                        Filters
+                      </div>
+                      <div className="px-1 py-1 ">
+                        <Menu.Item>
+                          {({ active }) => (
+                            <div className={`${active ? 'bg-primary text-white' : 'text-gray-600'
+                              } group flex items-center rounded-md w-full px-2 py-2 text-sm`}
+                            >
+                              <input
+                                type="checkbox"
+                                className={`${active ? 'border-black' : 'border-gray-300'}
+                                mr-2 form-tick appearance-none h-4
+                              w-4 border  rounded-md checked:bg-primary
+                              checked:border-transparent focus:outline-none`}
+                              />
+                              Active
+                            </div>
+                          )}
+                        </Menu.Item>
+                        <Menu.Item>
+                          {({ active }) => (
+                            <div className={`${active ? 'bg-primary text-white' : 'text-gray-600'
+                              } group flex items-center rounded-md w-full px-2 py-2 text-sm`}
+                            >
+                              <input
+                                type="checkbox"
+                                className={`${active ? 'border-black' : 'border-gray-300'}
+                                mr-2 form-tick appearance-none h-4
+                              w-4 border  rounded-md checked:bg-primary
+                              checked:border-transparent focus:outline-none`}
+                              />
+                              Finished
+                            </div>
+                          )}
+                        </Menu.Item>
+                      </div>
+                      <div className="px-3 py-2 bg-gray-100 flex justify-between">
+
+                        <Menu.Item>
+                          <button
+                            type="button"
+                            className="px-3 py-1 rounded btn-xs bg-white border border-gray-400 hover:border-gray-400 text-gray-500 hover:text-gray-600"
+                          >
+                            Clear
+                          </button>
+                        </Menu.Item>
+
+                        <Menu.Item>
+                          <button
+                            type="button"
+                            className="px-3 py-1 rounded btn-xs bg-primary border border-gray-400 hover:border-gray-400 text-white hover:text-gray-600"
+                          >
+                            Apply
+                          </button>
+                        </Menu.Item>
+
+                      </div>
+                    </Menu.Items>
+                  </Transition>
+                </Menu> */}
+
+              <TableSortLabel
+                scope="col"
+                id="sorthead"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                style={{ fontWeight: 'bold', color: 'grey' }}
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <span hidden>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                  ) : null}
+
+              </TableSortLabel>
+
+            </div>
+          </TableCell>
+          ))}
+
+        <th
+          scope="col"
+          className="px-4 py-3 text-left text-xs font-medium text-gray-400"
+        >
+          {/* <ExternalLinkIcon className="h-5 w-5" aria-hidden="true" /> */}
+        </th>
+      </tr>
+    </thead>
+  );
+}
+
+export default EnhancedTableHead;
+
+EnhancedTableHead.propTypes = {
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+};