Add profile link and logout

Arlet2 · Feb 23, 2024 · 08845c4 · 08845c4
1 parent f92238b
commit 08845c4
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 10 deletions.
diff --git a/app/account/[login]/page.tsx b/app/account/[login]/page.tsx
@@ -7,6 +7,8 @@ import Link from 'next/link';
 import { useState } from 'react';
 import cn from 'classnames';
 import { PetCard } from '@/app/components/PetCard';
+import * as api from '@/app/redux/services/api';
+import { useRouter } from 'next/navigation';
 
 interface IPageProps{
     params: {
@@ -95,6 +97,15 @@ export default function Page({ params: { login } }: IPageProps){
     const [ modalVisible, setModalVisible ] = useState(false)
     const [count, setCount] = useState(0);
     const [ isAnyPets, setIsAnyPets ] = useState(true);
+    const router = useRouter();
+
+    function logout() {
+        api.logout()
+        localStorage.removeItem("login")
+        localStorage.removeItem("accessToken")
+        localStorage.removeItem("refreshToken")
+        router.push(`/`);
+    }
     return (<>
         <title>Профиль - petdonor.ru</title>
         <div className={styles.container}>
@@ -112,6 +123,7 @@ export default function Page({ params: { login } }: IPageProps){
                     <h2 className='subtitle'>Вероника Собачкина</h2>
                     <div className={styles.counter}>{count} донаций</div>
                     <Link className='linkPink' href={`/account/${login}/settings`}>Редактировать</Link>
+                    <div className='linkBlue' onClick={logout}>Выход</div>
                 </div>
             </div>
             <div className={cn(styles.rightContainer, isAnyPets ? '' : styles.empty)}>

diff --git a/app/applications/page.module.css b/app/applications/page.module.css
@@ -0,0 +1,49 @@
+.selector {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 16px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  justify-content: space-around;
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+.selectorItem {
+  font-size: var(--font-size-l);
+  cursor: pointer;
+}
+
+.selected {
+  color: var(--main-color-contrast);
+  font-weight: 600;
+}
+
+.filtersHeader {
+  color: var(--placeholder-color);
+}
+
+.filters {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 24px;
+  margin-top: 8px;
+}
+
+.inputContainer {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  flex: 1 0 auto;
+}
+
+.inputContainer select {
+  width: 100%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 32px;
+  margin-top: 40px;
+}
diff --git a/app/applications/page.tsx b/app/applications/page.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import { useDispatch, useSelector } from "react-redux";
+import { ApplicationCard } from "@components/ApplicationCard"
+import styles from "./page.module.css";
+import cn from 'classnames';
+
+export default function Applications() {
+  return (<>
+    <title>Заявки на донацию - petdonor.ru</title>
+    <main>
+      <h1 className='header'>Заявки на донацию</h1>
+      <div className={styles.selector}>
+        <div className={cn(styles.selected, styles.selectorItem)}>Мои заявки</div>
+        <div className={styles.selectorItem}>Все заявки</div>
+      </div>
+      <h2 className={styles.filtersHeader}>Фильтры</h2>
+      <div className={styles.filters}>
+        <div className={styles.inputContainer}>
+            <label className={styles.label}>Тип животного</label>
+            <select className="input">
+                <option>Любой</option>
+                <option>Кошка</option>
+                <option>Собака</option>
+            </select>
+        </div>
+        <div className={styles.inputContainer}>
+            <label className={styles.label}>Группа крови</label>
+            <select className="input">
+                <option>Любая</option>
+                <option>112312</option>
+                <option>5643tdca</option>
+            </select>
+        </div>
+        <div className={styles.inputContainer}>
+            <label className={styles.label}>Город</label>
+            <select className="input">
+                <option>Любой</option>
+                <option>Санкт-Петербург</option>
+                <option>Москва</option>
+            </select>
+        </div>
+        <div className={styles.inputContainer}>
+            <label className={styles.label}>Район</label>
+            <select className="input">
+                <option>Любой</option>
+                <option>Санкт-Петербург</option>
+                <option>Москва</option>
+            </select>
+        </div>
+      </div>
+      <div className={styles.grid}>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+        <ApplicationCard/>
+      </div>
+    </main>
+  </>);
+}
diff --git a/app/components/ApplicationCard/index.tsx b/app/components/ApplicationCard/index.tsx
@@ -0,0 +1,34 @@
+import styles from './styles.module.css';
+
+export const ApplicationCard = () => {
+  return (
+    <div className={styles.card}>
+      <div className={styles.row}>
+        <div className={styles.label}>Тип животного</div>
+        <div className={styles.value}>Кошка</div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Группа крови</div>
+        <div className={styles.value}>15432</div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Город</div>
+        <div className={styles.value}>Омск</div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Район</div>
+        <div className={styles.value}>из которого не возвращаются</div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Кол-во крови</div>
+        <div className={styles.value}>1847 мл</div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Актуально до</div>
+        <div className={styles.value}>27.03.2004</div>
+      </div>
+      <div className={styles.button}>Редактировать</div>
+      <div className={styles.button}>Удалить</div>
+    </div> 
+  )
+}
diff --git a/app/components/ApplicationCard/styles.module.css b/app/components/ApplicationCard/styles.module.css
@@ -0,0 +1,32 @@
+.card {
+  box-shadow: 0px 3px 5px 1px var(--box-shadow-color-light);
+  border: solid 1px var(--border-color);
+  background-color: var(--main-color);
+  border-radius: var(--border-radius);
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  row-gap: 16px;
+
+  padding: 24px;
+}
+
+.row {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+
+.label {
+  flex: 1 0 auto;
+  color: var(--placeholder-color);
+}
+
+.value {
+  text-align: right;
+}
+
+.button {
+  text-align: center;
+}
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -14,6 +14,19 @@ import { usePathname } from 'next/navigation';
 export const Header = () => {
     const url = usePathname();
 
+    const [isClient, setIsClient] = useState(false)
+
+      useEffect(() => {
+        setIsClient(true)
+      }, [])
+
+    let isSigned = false;
+    let login = ""
+    if (isClient && typeof localStorage !== 'undefined' && localStorage.getItem("accessToken") ) {
+        isSigned = true;
+        login = localStorage.getItem("login");
+    }
+
     return (
         <div className={styles.container}>
             <Link className={styles.logoContainer} href="/">
@@ -27,7 +40,8 @@ export const Header = () => {
                 <Link className={cn(styles.headerLink, url === '/available-donors' && styles.selected)} href='/available-donors'>Доступные доноры</Link>
             </div>
             <div className={styles.infoContainer}>
-                <Link href='/signin' className={cn(styles.button, 'button')}>Войти</Link>
+                {!isSigned && <Link href='/signin' className={cn(styles.button, 'button')}>Войти</Link>}
+                {isSigned && <Link href={`/account/${login}`} className={cn(styles.button, 'button')}>Профиль</Link>}
             </div>
         </div>
     )

diff --git a/app/globals.css b/app/globals.css
@@ -219,6 +219,7 @@ button {
   font-size: var(--font-size-m);
   font-weight: 500;
   transition: 0.2s ease-in-out;
+  cursor: pointer;
 }
 
 .linkBlue:hover{
@@ -230,6 +231,7 @@ button {
   font-size: var(--font-size-m);
   font-weight: 500;
   transition: 0.2s ease-in-out;
+  cursor: pointer;
 }
 
 .linkPink:hover{
@@ -358,4 +360,4 @@ button {
 
 .stdropdown-tools{
   margin-top: 4px;
-}
+}
diff --git a/app/redux/services/api.ts b/app/redux/services/api.ts
@@ -15,10 +15,10 @@ export const api = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: API_URL,
     prepareHeaders: (headers, { getState }) => {
-      let authToken = localStorage.getItem("authToken");
+      let accessToken = localStorage.getItem("accessToken");
 
-      if (authToken) {
-        headers.set('authorization', `Bearer ${authToken}`)
+      if (accessToken) {
+        headers.set('authorization', `Bearer ${accessToken}`)
       }
 
       return headers
@@ -40,11 +40,16 @@ export const api = createApi({
 })
 
 async function postData(url: string, data: object): Promise<object> {
+  let headers = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  };
+  let accessToken = localStorage.getItem("accessToken");
+  if (accessToken) {
+    headers['authorization'] = `Bearer ${accessToken}`
+  }
   const response = await fetch(API_URL + url, {
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
+    headers,
     method: "POST",
     body: JSON.stringify(data)
   });
@@ -62,5 +67,9 @@ export async function login(credentials: ILoginCredentials): Promise<IApiToken>
   return await postData("auth/login", credentials) as IApiToken;
 }
 
+export async function logout(): Promise<void> {
+  await postData("auth/logout") as IApiToken;
+}
+
 /* хуки, которые потом используем в компонентах, генерируются автоматически */
 export const { useGetSomethingByNameQuery } = api
diff --git a/app/signin/page.tsx b/app/signin/page.tsx
@@ -11,6 +11,8 @@ import Link from 'next/link';
 import * as VKID from '@vkid/sdk';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { login as doLogin } from '@/app/redux/services/api';
+import toast from 'react-hot-toast';
 
 //TODO: добавить проброс логина в урл
 
@@ -28,7 +30,17 @@ export default function Page() {
 
     const handleSubmitClick = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        router.push(`/account/${login}/settings`);
+        (async () => {
+            try {
+                const token = await doLogin({ login, password });
+                localStorage.setItem("accessToken", token.accessToken);
+                localStorage.setItem("refreshToken", token.refreshToken);
+                localStorage.setItem("login", login);
+                router.push(`/`);
+            } catch (e) {
+                toast.error(e as string);
+            }
+        })()
     }
 
     function useVK() {

diff --git a/app/signup/page.tsx b/app/signup/page.tsx
@@ -40,6 +40,7 @@ export default function Page() {
                 const token = await register({ login, password, email });
                 localStorage.setItem("accessToken", token.accessToken);
                 localStorage.setItem("refreshToken", token.refreshToken);
+                localStorage.setItem("login", login);
                 router.push(`/account/${login}/settings`);
             } catch (e) {
                 toast.error(e as string);