feat: 0.0.6 realease

Author: n4ze3m

package.json

@@ -21,6 +21,7 @@
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-github-contribution-calendar": "^2.2.0",
     "react-router-dom": "^6.4.3",

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Habit Watcher",
-    "version": "0.0.5"
+    "version": "0.0.6"
   },
   "tauri": {
     "allowlist": {

src/App.tsx

@@ -1,10 +1,31 @@
+import { Center, Modal, Text } from "@mantine/core";
+import { useViewportSize } from "@mantine/hooks";
+import ReactConfetti from "react-confetti";
 import { AddBtn } from "./components/Home/AddBtn";
 import { HabbitList } from "./components/Home/HabbitList";
+import { useConfetti } from "./hooks/useConfetti";
 function App() {
+	const { height, width } = useViewportSize()
+
+	const { show, setShowing } = useConfetti()
+
 	return (
 		<>
+			<Center hidden={!show}>
+				<ReactConfetti
+					height={height}
+					width={width * 0.95}
+				/>
+
+			</Center>
 			<AddBtn />
 			<HabbitList />
+			<Modal opened={show} onClose={() => setShowing(false)} centered={true}
+				title="You did it! 🎉">
+				<Text align="center">
+					You have completed all your habbits for today! Good job!
+				</Text>
+			</Modal>
 		</>
 	);
 }

src/components/Home/HabbitCard.tsx

@@ -3,6 +3,7 @@ import { showNotification } from "@mantine/notifications";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import Calendar from "react-github-contribution-calendar";
+import { useConfetti } from "../../hooks/useConfetti";
 import { Habbit, HabbitView } from "../../models/habbit";
 import { checkHabbit, deleteHabbit } from "../../services/storage";
 
@@ -42,7 +43,9 @@ interface HabbitCardProps extends HabbitView {
 }
 
 export const HabbitCard = (view: HabbitCardProps) => {
-
+	const {
+		setShowing,
+	} = useConfetti()
 	const client = useQueryClient()
 	const { classes } = useStyles();
 
@@ -53,9 +56,10 @@ export const HabbitCard = (view: HabbitCardProps) => {
 	const { mutate: checkHabbitMutation } = useMutation(checkHabbit, {
 		onSuccess: (data) => {
 			client.invalidateQueries(["fetchAllHabbits"])
+			setShowing(data.confetti)
 			showNotification({
 				title: "Success",
-				message: data,
+				message: data.message,
 				color: "teal",
 			})
 		},

src/components/Home/HabbitList.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Habbit } from "../../models/habbit";
 import React from "react";
 import { UpdaetHabit } from "./UpdateHabit";
+
 export const HabbitList = () => {
 	const fetchHabbit = async () => {
 		const result = await getAllhabbitsWithStats();
@@ -17,8 +18,10 @@ export const HabbitList = () => {
 	const [habbit, setHabbit] = React.useState<Habbit | null>(null)
 	const [open, setOpen] = React.useState(false);
 
+
 	return (
 		<>
+	
 			{
 				status === "loading" ? (<div>
 					<Skeleton height={40} />
@@ -29,6 +32,7 @@ export const HabbitList = () => {
 			}
 			{
 				status === "success" ? <ScrollArea mt="lg">
+						
 					<SimpleGrid
 						cols={2}
 						spacing="lg"

src/hooks/useConfetti.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+export interface ConfettiType {
+    show: boolean;
+    visible: boolean;
+    setShowing: (show: boolean) => void;
+}
+
+export const ConfettiContext = React.createContext<ConfettiType>({
+    show: false,
+    visible: false,
+    setShowing: () => {}
+})
+
+export const useConfetti = () => {
+    const context = React.useContext(ConfettiContext)
+    if (context === undefined) {
+        throw new Error('useConfetti must be used within a ConfettiProvider')
+    }
+    return context
+}
+
+export const ConfettiProvider = (props: {
+    children: React.ReactNode
+}) => {
+    const [show, setShow] = React.useState(false)
+    const [visible, setVisible] = React.useState(false)
+
+    const setShowing = (show: boolean) => {
+        setShow(show)
+    }
+
+
+    const value = React.useMemo(() => {
+        return {
+            show,
+            visible,
+            setShowing,
+        }
+    }, [show, visible])
+
+    return (
+        <ConfettiContext.Provider value={value}>
+            {props.children}
+        </ConfettiContext.Provider>
+    )
+}
+
+

src/main.tsx

@@ -9,6 +9,7 @@ import { Layout } from "./Layout";
 import { NewHabitPage } from "./new-habit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NotificationsProvider } from "@mantine/notifications";
+import { ConfettiProvider } from "./hooks/useConfetti";
 const queryClient = new QueryClient();
 const router = createBrowserRouter([
 	{
@@ -27,19 +28,21 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
-		<QueryClientProvider client={queryClient}>
-			<MantineProvider
-				withGlobalStyles={true}
-				withNormalizeCSS={true}
-				theme={{
-					colorScheme: "dark",
-					fontFamily: "poppins",
-				}}
-			>
-				<NotificationsProvider>
-					<RouterProvider router={router} />
-				</NotificationsProvider>
-			</MantineProvider>
-		</QueryClientProvider>
+		<ConfettiProvider>
+			<QueryClientProvider client={queryClient}>
+				<MantineProvider
+					withGlobalStyles={true}
+					withNormalizeCSS={true}
+					theme={{
+						colorScheme: "dark",
+						fontFamily: "poppins",
+					}}
+				>
+					<NotificationsProvider>
+						<RouterProvider router={router} />
+					</NotificationsProvider>
+				</MantineProvider>
+			</QueryClientProvider>
+		</ConfettiProvider>
 	</React.StrictMode>,
 );

src/services/storage.ts

@@ -30,7 +30,7 @@ export async function getAllhabbitsWithStats() {
 	const result: HabbitView[] = [];
 	const habbits: Habbit[] = await db.select("SELECT * FROM habbit", []);
 	for (const habbit of habbits) {
-		const habbitCreated = moment(habbit.created_at);
+		const yesterday = moment().toISOString();
 		const logs: HabbitLog[] = await db.select(
 			"SELECT * FROM habbit_log WHERE habbit_id = ?",
 			[habbit.id],
@@ -54,7 +54,15 @@ export async function getAllhabbitsWithStats() {
 			value: logs.length,
 		});
 		// find the number of missing days between the habbit creation and last log
-		const missingDays = moment().diff(habbitCreated, "days") - logs.length;
+		const days =
+			Math.abs(
+				moment(habbit.created_at, "YYYY-MM-DD")
+					.startOf("day")
+					.diff(moment(yesterday, "YYYY-MM-DD").startOf("day"), "days"),
+			) + 1;
+
+		const missingDays = days - logs.length;
+
 		stats.push({
 			name: "Missed",
 			value: missingDays > 0 ? missingDays : 0,
@@ -93,25 +101,36 @@ export async function getAllhabbitsWithStats() {
 
 export async function checkHabbit(id: number) {
 	await load;
-	const today = moment(new Date()).format("YYYY-MM-DD")
+	const today = moment(new Date()).format("YYYY-MM-DD");
 	const isAlreadyChecked: HabbitLog[] = await db.select(
 		"SELECT * FROM habbit_log WHERE habbit_id = ? AND date(created_at) = ?",
-		[id,today ],
+		[id, today],
 	);
 	if (isAlreadyChecked.length > 0) {
 		isAlreadyChecked.forEach(async (log) => {
 			await db.execute("DELETE FROM habbit_log WHERE id = ?", [log.id]);
 		});
-		return "You have unchecked the habit";
+		return {
+			message: "You have unchecked the habit",
+			confetti: false,
+		}
 	}
 	// kinda weird but it works
 	const created_at = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
 	await db.execute(
 		"INSERT INTO habbit_log (habbit_id, created_at) VALUES (?, ?)",
 		[id, created_at],
 	);
+	// check all habbits completed today 
+	const allHabbits = await getAllhabbitsWithStats();
+	const allHabbitsCompleted = allHabbits.every(habbit => habbit.isChecked);
+	
 
-	return "Awesome! You have checked the habit";
+
+	return {
+		message: "Awesome! You have checked the habit",
+		confetti: allHabbitsCompleted,
+	}
 }
 
 export async function deleteHabbit(id: number) {

vite.config.ts.timestamp-1668826007020.mjs

@@ -0,0 +1,21 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/n4ze3/playground/dtoolz/node_modules/vite/dist/node/index.js";
+import react from "file:///C:/Users/n4ze3/playground/dtoolz/node_modules/@vitejs/plugin-react/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true
+  },
+  envPrefix: ["VITE_", "TAURI_"],
+  build: {
+    target: ["es2021", "chrome100", "safari13"],
+    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+    sourcemap: !!process.env.TAURI_DEBUG
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxuNHplM1xcXFxwbGF5Z3JvdW5kXFxcXGR0b29selwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcbjR6ZTNcXFxccGxheWdyb3VuZFxcXFxkdG9vbHpcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL240emUzL3BsYXlncm91bmQvZHRvb2x6L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcclxuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcblxyXG4gIC8vIFZpdGUgb3B0aW9ucyB0YWlsb3JlZCBmb3IgVGF1cmkgZGV2ZWxvcG1lbnQgYW5kIG9ubHkgYXBwbGllZCBpbiBgdGF1cmkgZGV2YCBvciBgdGF1cmkgYnVpbGRgXHJcbiAgLy8gcHJldmVudCB2aXRlIGZyb20gb2JzY3VyaW5nIHJ1c3QgZXJyb3JzXHJcbiAgY2xlYXJTY3JlZW46IGZhbHNlLFxyXG4gIC8vIHRhdXJpIGV4cGVjdHMgYSBmaXhlZCBwb3J0LCBmYWlsIGlmIHRoYXQgcG9ydCBpcyBub3QgYXZhaWxhYmxlXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwb3J0OiAxNDIwLFxyXG4gICAgc3RyaWN0UG9ydDogdHJ1ZSxcclxuICB9LFxyXG4gIC8vIHRvIG1ha2UgdXNlIG9mIGBUQVVSSV9ERUJVR2AgYW5kIG90aGVyIGVudiB2YXJpYWJsZXNcclxuICAvLyBodHRwczovL3RhdXJpLnN0dWRpby92MS9hcGkvY29uZmlnI2J1aWxkY29uZmlnLmJlZm9yZWRldmNvbW1hbmRcclxuICBlbnZQcmVmaXg6IFtcIlZJVEVfXCIsIFwiVEFVUklfXCJdLFxyXG4gIGJ1aWxkOiB7XHJcbiAgICAvLyBUYXVyaSBzdXBwb3J0cyBlczIwMjFcclxuICAgIHRhcmdldDogW1wiZXMyMDIxXCIsIFwiY2hyb21lMTAwXCIsIFwic2FmYXJpMTNcIl0sXHJcbiAgICAvLyBkb24ndCBtaW5pZnkgZm9yIGRlYnVnIGJ1aWxkc1xyXG4gICAgbWluaWZ5OiAhcHJvY2Vzcy5lbnYuVEFVUklfREVCVUcgPyBcImVzYnVpbGRcIiA6IGZhbHNlLFxyXG4gICAgLy8gcHJvZHVjZSBzb3VyY2VtYXBzIGZvciBkZWJ1ZyBidWlsZHNcclxuICAgIHNvdXJjZW1hcDogISFwcm9jZXNzLmVudi5UQVVSSV9ERUJVRyxcclxuICB9LFxyXG59KTtcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0UixTQUFTLG9CQUFvQjtBQUN6VCxPQUFPLFdBQVc7QUFHbEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sQ0FBQztBQUFBLEVBSWpCLGFBQWE7QUFBQSxFQUViLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxJQUNOLFlBQVk7QUFBQSxFQUNkO0FBQUEsRUFHQSxXQUFXLENBQUMsU0FBUyxRQUFRO0FBQUEsRUFDN0IsT0FBTztBQUFBLElBRUwsUUFBUSxDQUFDLFVBQVUsYUFBYSxVQUFVO0FBQUEsSUFFMUMsUUFBUSxDQUFDLFFBQVEsSUFBSSxjQUFjLFlBQVk7QUFBQSxJQUUvQyxXQUFXLENBQUMsQ0FBQyxRQUFRLElBQUk7QUFBQSxFQUMzQjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==

yarn.lock

@@ -1175,6 +1175,13 @@ prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+react-confetti@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6"
+  integrity sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==
+  dependencies:
+    tween-functions "^1.2.0"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -1361,6 +1368,11 @@ tslib@^2.0.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==
+
 typescript@^4.6.4:
   version "4.8.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"