);
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 3a63ed1..9237c3e 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,16 +1,30 @@
import { useEffect, useState } from 'react';
import { ListItem, SearchBar } from '../components';
-import { useNavigate } from 'react-router-dom';
import { comparePurchaseUrgency } from '../api/firebase';
import { getIndicator } from '../utils/helpers';
+import AddItemForm from '../components/ManageListForms/AddItemForm';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { SquarePlus } from 'lucide-react';
-export function List({ data, listPath }) {
+export function List({ data, listPath, listName, isLoading, setIsLoading }) {
const [search, setSearch] = useState('');
const [allData, setAllData] = useState([]);
const [displayData, setDisplayData] = useState([]);
- const navigate = useNavigate();
+ const [isOpen, setIsOpen] = useState(false);
+ const [openItemId, setOpenItemId] = useState(null);
+ const [noData, setNoData] = useState(false);
useEffect(() => {
+ setIsLoading(true);
const arrayWithIndicator = data.map((item) => ({
...item,
indicator: getIndicator(item),
@@ -20,37 +34,156 @@ export function List({ data, listPath }) {
setDisplayData(urgencyData);
}, [data]);
+ useEffect(() => {
+ if (displayData.length > 1) {
+ setIsLoading(false);
+ }
+ }, [displayData]);
+
+ setTimeout(() => {
+ if (data.length === 0) {
+ setIsLoading(false);
+ setNoData(true);
+ }
+ }, 2000);
+
+ const handleAddModal = () => {
+ if (search.length > 0) {
+ setDisplayData(allData);
+ setSearch('');
+ }
+
+ setIsOpen((prev) => !prev);
+ };
+
+ const handleEditModal = (id) => {
+ setOpenItemId((prevId) => (prevId === id ? null : id));
+ };
+
return (
<>
-
-
You currently have no shopping items. Click below to add items
-
+ {listPath === '' ? (
+
+
+
+ No list selected
+
+
+
+
+ ) : (
+
+
+
+
+ {listName}
+
+
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+ {displayData.map((item) => (
+
+ ))}
+
+ )}
+ {!isLoading && noData && displayData.length === 0 && (
+
+
+ Your list is empty. Start adding some items now!
+
+
+
+ )}
+ {displayData.length === 0 && search.length > 0 && (
+
+
No items found. Try searching for a different item!
+
+ )}
)}
diff --git a/src/views/Login.css b/src/views/Login.css
new file mode 100644
index 0000000..e5f2049
--- /dev/null
+++ b/src/views/Login.css
@@ -0,0 +1,9 @@
+.dark {
+ background-color: #1f1e26;
+ color: #ffffff;
+}
+
+.false {
+ background-color: #ffffff;
+ color: #1f1e26;
+}
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
new file mode 100644
index 0000000..f335e5c
--- /dev/null
+++ b/src/views/Login.jsx
@@ -0,0 +1,60 @@
+import { useAuth } from '../api/useAuth';
+import { useEffect, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Eclipse, Sun } from 'lucide-react';
+import { Context } from '../Context';
+import './Login.css';
+
+function Login() {
+ const { darkMode, setDarkMode } = useContext(Context);
+ const { user, signIn } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (user) {
+ navigate('/');
+ }
+ }, [user]);
+
+ const toggleDarkMode = () => {
+ setDarkMode(!darkMode);
+ };
+
+ return (
+
+
+
+ {darkMode ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default Login;
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
deleted file mode 100644
index 20cca9c..0000000
--- a/src/views/ManageList.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import AddItemForm from '../components/ManageListForms/AddItemForm';
-import ShareListForm from '../components/ManageListForms/ShareListForm';
-
-export function ManageList({ listPath, user, data }) {
- return (
-
- );
-}
diff --git a/src/views/index.js b/src/views/index.js
index 9f10e56..735f00c 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -1,4 +1,3 @@
-export * from './ManageList';
export * from './Home';
export * from './Layout';
export * from './List';
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..db1c8dc
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,39 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ darkMode: ['class'],
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {
+ fontFamily: {
+ montserrat: ['Montserrat', 'sans-serif'],
+ monda: ['Monda', 'sans-serif'],
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ colors: {
+ 'primary-green': '#4ade80',
+ 'light-green': '#bbf7d0',
+ 'primary-pink': '#F55A99',
+ 'light-pink': '#D7A2C3',
+ 'ruby-pink': '#AC4270',
+ 'bg-black': '#181818',
+ 'dark-grey': '#595959',
+ 'light-grey': '#A3A3A3',
+ 'text-grey': '#B5B5B5',
+ soon: '#FEE720',
+ 'kind-of-soon': '#FFB74D',
+ 'not-soon': '#81C784',
+ inactive: '#B0BEC5',
+ overdue: '#FF5252',
+ },
+ transitionDuration: {
+ 50: '50ms',
+ 25: '25ms',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate')],
+};
diff --git a/vite.config.js b/vite.config.js
index 9360385..55fbfe6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import eslint from '@nabla/vite-plugin-eslint';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
const PWAConfig = {
includeAssets: ['favicon.ico', 'robots.txt'],
@@ -63,6 +64,11 @@ export default defineConfig(({ mode }) => ({
VitePWA(PWAConfig),
],
server: { open: true, port: 3000 },
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
test: {
globals: true,
environment: 'jsdom',