dev: hello world

lib/hooks/useAutosizeTextArea.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: any
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

lib/hooks/useIssuesProperties.tsx

@@ -0,0 +1,86 @@
+import { useState, useContext, useEffect, useCallback } from "react";
+// swr
+import useSWR from "swr";
+// api routes
+import { ISSUE_PROPERTIES_ENDPOINT } from "constants/api-routes";
+// services
+import issueServices from "lib/services/issues.services";
+// hooks
+import useUser from "./useUser";
+// types
+import { IssuePriorities, Properties } from "types";
+
+const initialValues: Properties = {
+  name: true,
+  key: true,
+  parent: false,
+  project: false,
+  state: true,
+  assignee: true,
+  description: false,
+  priority: false,
+  start_date: false,
+  target_date: false,
+  sequence_id: false,
+  attachments: false,
+  children: false,
+  cycle: false,
+};
+
+const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+
+  const { user } = useUser();
+
+  const { data: issueProperties } = useSWR<IssuePriorities>(
+    workspaceSlug && projectId ? ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId
+      ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
+      : null,
+    {
+      shouldRetryOnError: false,
+    }
+  );
+
+  useEffect(() => {
+    if (!issueProperties || !workspaceSlug || !projectId || !user) return;
+    setProperties({ ...initialValues, ...issueProperties.properties });
+
+    if (Object.keys(issueProperties).length === 0)
+      issueServices.createIssueProperties(workspaceSlug, projectId, {
+        properties: { ...initialValues },
+        user: user.id,
+      });
+    else if (Object.keys(issueProperties?.properties).length === 0)
+      issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+        properties: { ...initialValues },
+        user: user.id,
+      });
+  }, [issueProperties, workspaceSlug, projectId, user]);
+
+  const updateIssueProperties = useCallback(
+    (key: keyof Properties) => {
+      if (!workspaceSlug || !projectId || !issueProperties || !user) return;
+      setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
+      if (Object.keys(issueProperties).length > 0) {
+        issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+          properties: {
+            ...issueProperties.properties,
+            [key]: !issueProperties.properties[key],
+          },
+          user: user.id,
+        });
+      } else {
+        issueServices.createIssueProperties(workspaceSlug, projectId, {
+          properties: { ...initialValues },
+          user: user.id,
+        });
+      }
+    },
+    [workspaceSlug, projectId, issueProperties, user]
+  );
+
+  return [properties, updateIssueProperties] as const;
+};
+
+export default useIssuesProperties;

lib/hooks/useLocalStorage.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from "react";
+
+const useLocalStorage = <T,>(
+  key: string,
+  initialValue?: T extends Function ? never : T | (() => T)
+) => {
+  const [value, setValue] = useState<T | string>("");
+
+  useEffect(() => {
+    const data = window.localStorage.getItem(key);
+    if (data !== null && data !== "undefined") setValue(JSON.parse(data));
+    else setValue(typeof initialValue === "function" ? initialValue() : initialValue);
+  }, [key, initialValue]);
+
+  const updateState = useCallback(
+    (value: T) => {
+      if (!value) window.localStorage.removeItem(key);
+      else window.localStorage.setItem(key, JSON.stringify(value));
+      setValue(value);
+      window.dispatchEvent(new Event(`local-storage-change-${key}`));
+    },
+    [key]
+  );
+
+  const reHydrateState = useCallback(() => {
+    const data = window.localStorage.getItem(key);
+    if (data !== null) setValue(JSON.parse(data));
+  }, [key]);
+
+  useEffect(() => {
+    window.addEventListener(`local-storage-change-${key}`, reHydrateState);
+    return () => window.removeEventListener(`local-storage-change-${key}`, reHydrateState);
+  }, [reHydrateState, key]);
+
+  return [value, updateState];
+};
+
+export default useLocalStorage;

lib/hooks/useTheme.tsx

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+
+import { themeContext } from "contexts/theme.context";
+
+const useTheme = () => {
+  const themeContextData = useContext(themeContext);
+
+  return themeContextData;
+};
+
+export default useTheme;

lib/hooks/useToast.tsx

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+
+import { toastContext } from "contexts/toast.context";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+
+  return toastContextData;
+};
+
+export default useToast;

lib/hooks/useUser.tsx

@@ -0,0 +1,42 @@
+import { useContext, useEffect } from "react";
+import { useRouter } from "next/router";
+// context
+import { UserContext } from "contexts/user.context";
+
+interface useUserOptions {
+  redirectTo?: string;
+}
+
+const useUser = (options: useUserOptions = {}) => {
+  // props
+  const { redirectTo = null } = options;
+  // context
+  const contextData = useContext(UserContext);
+  // router
+  const router = useRouter();
+
+  /**
+   * Checks for redirect url and user details from the API.
+   * if the user is not authenticated, user will be redirected
+   * to the provided redirectTo route.
+   */
+  useEffect(() => {
+    if (!contextData?.user || !redirectTo) return;
+
+    if (!contextData?.user) {
+      if (redirectTo) {
+        router?.pathname !== redirectTo && router.push(redirectTo);
+      }
+      router?.pathname !== "/signin" && router.push("/signin");
+    }
+    if (contextData?.user) {
+      if (redirectTo) {
+        router?.pathname !== redirectTo && router.push(redirectTo);
+      }
+    }
+  }, [contextData?.user, redirectTo, router]);
+
+  return contextData;
+};
+
+export default useUser;