feat: calm down I store some useful hook and how to scroll to top whe…

…n change page url

src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,18 @@
+function copyToClipboard(text: string | number) {
+  let input = document.createElement('input');
+  input.setAttribute('value', text.toString());
+  document.body.appendChild(input);
+  input.select();
+  let result = document.execCommand('copy');
+  document.body.removeChild(input);
+  return result;
+}
+
+export const useCopyToClipboard = () => {
+  return (text: string | number) => {
+    if (typeof text === "string" || typeof text == "number") {
+      return copyToClipboard(text);
+    }
+    return false;
+  }
+}

src/hooks/useNetworkStatus.ts

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export enum NetWorkStatus {
+  ONLINE = "online",
+  OFFLINE = "offline",
+} 
+
+export const useNetworkStatus = (callback = (_status: NetWorkStatus) => { }) => {
+  const updateOnlineStatus = () => {
+    const status: NetWorkStatus = navigator.onLine ? NetWorkStatus.ONLINE : NetWorkStatus.OFFLINE;
+    callback(status);
+  }
+
+  onMounted(() => {
+    window.addEventListener('online', updateOnlineStatus);
+    window.addEventListener('offline', updateOnlineStatus);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('online', updateOnlineStatus);
+    window.removeEventListener('offline', updateOnlineStatus);
+  })
+}

src/hooks/useScrollToBottom.ts

@@ -0,0 +1,17 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export const useScrollToBottom = (callback = () => { }) => {
+  const handleScrolling = () => {
+    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+      callback();
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScrolling);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScrolling);
+  });
+}

src/hooks/useStorage.ts

@@ -0,0 +1,38 @@
+import { ref } from 'vue';
+
+const getItem = (key: string, storage: Storage) => {
+  let value = storage.getItem(key);
+  if (!value) {
+    return null;
+  }
+  try {
+    return JSON.parse(value)
+  } catch (error) {
+    return value;
+  }
+}
+
+export const useStorage = (key: string, type = 'session') => {
+  let storage = null;
+  switch (type) {
+    case 'session':
+      storage = sessionStorage;
+      break;
+    case 'local':
+      storage = localStorage;
+      break;
+    default:
+      return null;
+  }
+  const value = ref(getItem(key, storage));
+  const setItem = (storage: Storage) => {
+    return (newValue: any) => {
+      value.value = newValue;
+      storage.setItem(key, JSON.stringify(newValue));
+    }
+  }
+  return [
+    value,
+    setItem(storage)
+  ]
+}

src/hooks/useTimer.ts

@@ -0,0 +1,51 @@
+import { ref, onUnmounted } from 'vue';
+
+export const useTimer = (callback = () => { }, step = 1000) => {
+  let timerVariableId: ReturnType<typeof setInterval> | null = null;
+  let times = 0;
+  const isPaused = ref(false);
+
+  const stop = () => {
+    if (timerVariableId) {
+      clearInterval(timerVariableId);
+      timerVariableId = null;
+      resume();
+    }
+  }
+
+  const start = () => {
+    stop();
+    if (!timerVariableId) {
+      times = 0;
+      timerVariableId = setInterval(() => {
+        if (!isPaused.value) {
+          times++;
+          //callback(times, step * times);
+          callback();
+        }
+      }, step)
+    }
+  }
+
+  const pause = () => {
+    isPaused.value = true;
+  }
+
+  const resume = () => {
+    isPaused.value = false;
+  }
+
+  onUnmounted(() => {
+    if (timerVariableId) {
+      clearInterval(timerVariableId);
+    }
+  })
+
+  return {
+    start,
+    stop,
+    pause,
+    resume,
+    isPaused
+  }
+}

src/hooks/useViewport.ts

@@ -0,0 +1,43 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export enum DEVICE{
+  MOBILE = 'MOBILE',
+  TABLET = 'TABLET',
+  DESKTOP = 'DESKTOP'
+}
+
+export interface DeviceSize {
+  mobile: number | null,
+  tablet: number | null,
+}
+
+export const useViewport = (config: DeviceSize) => {
+  const { mobile = null, tablet = null } = config;
+  let mobileWidth = mobile ? mobile : 768;
+  let tabletWidth = tablet ? tablet : 922;
+  let device = ref(getDevice(window.innerWidth));
+  function getDevice(width: number) {
+    if (width < mobileWidth) {
+      return DEVICE.MOBILE;
+    } else if (width < tabletWidth) {
+      return DEVICE.TABLET;
+    }
+    return DEVICE.DESKTOP;
+  }
+
+  const handleResize = () => {
+    device.value = getDevice(window.innerWidth);
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+
+  return {
+    device
+  }
+}

src/hooks/useWindowResize.ts

@@ -0,0 +1,24 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useWindowResize() {
+  const width = ref(window.innerWidth);
+  const height = ref(window.innerHeight);
+
+  const handleResize = () => {
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResize)
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+
+  return {
+    width,
+    height
+  }
+}

src/router/index.ts

@@ -27,6 +27,9 @@ const routes = [
 const router = createRouter({
   history: createWebHistory("quick/"),
   routes,
+  scrollBehavior() {
+    document.getElementById('app')?.scrollIntoView({ behavior: 'smooth' });
+  }
 })
 
 export default router;