To se mi líbí 0
Fork 0

Naposledy aktivní 1704638097

Revize 0dffafb9282cd6384d51284c98f712faf4323868

UpdatedDash.jsx Raw
1import Navbar from '@/components/Navbar'
2import Footer from '@/components/Footer'
3
4import Head from 'next/head'
5import Card from '@/components/DashboardCard'
6import PopupForm from '@/components/DashboardCreateEntity'
7
8import useSWR from 'swr'
9
10import { useState, useEffect } from 'react'
11import Link from 'next/link'
12import { useRouter } from 'next/router'
13
14const Dashboard = ({ data }) => {
15 const router = useRouter()
16 const [isPopupVisible, setPopupVisibility] = useState(false)
17
18 //let { data } = useSWR('/api/whatever')
19 //let { data } = useSWR('https://api.whatever.com')
20 /**
21 * let {data, error } = useSWR('/api/whatever')
22 * if (error) return whetever
23 *
24 */
25
26 const handleCreateButtonClick = () => {
27 setPopupVisibility(true)
28 }
29
30 const handleClosePopup = () => {
31 setPopupVisibility(false)
32 }
33
34useEffect(() => {
35 const handleMousemove = (e) => {
36 const rect = e.currentTarget.getBoundingClientRect();
37 const x = e.clientX - rect.left;
38 const y = e.clientY - rect.top;
39
40 e.currentTarget.style.setProperty("--mouse-x", `${x}px`);
41 e.currentTarget.style.setProperty("--mouse-y", `${y}px`);
42 };
43 document.querySelectorAll(".dashboard_entity_card").forEach((card) => {
44 card.addEventListener("mousemove", handleMousemove);
45 return () => {
46 card.removeEventListener("mousemove", handleMousemove);
47 };
48 });
49 }, []);
50
51
52 return (
53 <>
54 <Head>
55 <title>Dashboard - Assistify</title>
56 </Head>
57 <Navbar user={data}/>
58 {Object.keys(data).length !== 0 ? (
59 <>
60 <main className="dashboard_div">
61 <div className="dashboard_headings">
62 <h1 className="heading_color">Welcome, {data.name} 👋</h1>
63 {/* <button className="cta">
64 <span>Create</span>
65 <svg viewBox="0 0 13 10" height="10px" width="15px">
66 <path d="M1,5 L11,5"></path>
67 <polyline points="8 1 12 5 8 9"></polyline>
68 </svg>
69 </button> */}
70 <div className="showcase_buttons">
71 <button className="btn" onClick={handleCreateButtonClick}>
72 <svg
73 height="24"
74 width="24"
75 fill="#FFFFFF"
76 viewBox="0 0 24 24"
77 data-name="Layer 1"
78 id="Layer_1"
79 className="sparkle"
80 >
81 <path d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
82 </svg>
83
84 <span className="text">Create</span>
85 </button>
86 </div>
87 {isPopupVisible && <PopupForm onClose={handleClosePopup} router={router}/>}
88 </div>
89 <div className="dashboard_entities">
90 {data.entities.length !== 0 ? (
91 data.entities?.map((entity, index) => {
92 return (
93 <Link key={index} href={`/entity/${entity.id}`}>
94 <Card title={entity.name} key={index} id={entity.id} />
95 </Link>
96 )
97 })
98 ) : (
99 <div
100 style={{
101 color: '#ddd'
102 }}
103 >
104 You haven&apos;t created any entities yet.
105 </div>
106 )}
107 </div>
108 </main>
109 </>
110 ) : (
111 /* Work on this, show a error */
112 Error
113 )}
114 <Footer />
115 </>
116 )
117}
118
119export default Dashboard
dashboard.jsx Raw
1import Navbar from '@/components/Navbar'
2import Footer from '@/components/Footer'
3
4import Head from 'next/head'
5import Card from '@/components/DashboardCard'
6import PopupForm from '@/components/DashboardCreateEntity'
7
8import { useState, useEffect } from 'react'
9import Link from 'next/link'
10import { useRouter } from 'next/router'
11
12export const getServerSideProps = (async ctx => {
13 const { req } = ctx
14 const cookie = req.cookies.user_auth
15 if (!cookie) {
16 return { redirect: {
17 destination: '/login',
18 permanent: false
19 } }
20 } else {
21 const cookie_key = req.cookies.user_apiKey
22 if (!cookie_key) {
23 return { redirect: {
24 destination: '/logout',
25 permanent: false
26 } }
27 }
28 const response = await fetch(`${process.env.API_URL}/user/find?id=${req.cookies.user_id}`, {
29 method: 'GET',
30 headers: {
31 'authorization': process.env.AUTH,
32 },
33 })
34 const data_json = await response.json()
35 if (!response.ok) {
36 console.error(response, data_json)
37 return { redirect: {
38 destination: '/logout',
39 permanent: false
40 } }
41 }
42 return { props: { data: data_json } }
43 }
44})
45
46const Dashboard = ({ data }) => {
47 const router = useRouter()
48 const [isPopupVisible, setPopupVisibility] = useState(false)
49
50 const handleCreateButtonClick = () => {
51 setPopupVisibility(true)
52 }
53
54 const handleClosePopup = () => {
55 setPopupVisibility(false)
56 }
57
58useEffect(() => {
59 const handleMousemove = (e) => {
60 const rect = e.currentTarget.getBoundingClientRect();
61 const x = e.clientX - rect.left;
62 const y = e.clientY - rect.top;
63
64 e.currentTarget.style.setProperty("--mouse-x", `${x}px`);
65 e.currentTarget.style.setProperty("--mouse-y", `${y}px`);
66 };
67 document.querySelectorAll(".dashboard_entity_card").forEach((card) => {
68 card.addEventListener("mousemove", handleMousemove);
69 return () => {
70 card.removeEventListener("mousemove", handleMousemove);
71 };
72 });
73 }, []);
74
75
76 return (
77 <>
78 <Head>
79 <title>Dashboard - Assistify</title>
80 </Head>
81 <Navbar user={data}/>
82 {Object.keys(data).length !== 0 ? (
83 <>
84 <main className="dashboard_div">
85 <div className="dashboard_headings">
86 <h1 className="heading_color">Welcome, {data.name} 👋</h1>
87 {/* <button className="cta">
88 <span>Create</span>
89 <svg viewBox="0 0 13 10" height="10px" width="15px">
90 <path d="M1,5 L11,5"></path>
91 <polyline points="8 1 12 5 8 9"></polyline>
92 </svg>
93 </button> */}
94 <div className="showcase_buttons">
95 <button className="btn" onClick={handleCreateButtonClick}>
96 <svg
97 height="24"
98 width="24"
99 fill="#FFFFFF"
100 viewBox="0 0 24 24"
101 data-name="Layer 1"
102 id="Layer_1"
103 className="sparkle"
104 >
105 <path d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
106 </svg>
107
108 <span className="text">Create</span>
109 </button>
110 </div>
111 {isPopupVisible && <PopupForm onClose={handleClosePopup} router={router}/>}
112 </div>
113 <div className="dashboard_entities">
114 {data.entities.length !== 0 ? (
115 data.entities?.map((entity, index) => {
116 return (
117 <Link key={index} href={`/entity/${entity.id}`}>
118 <Card title={entity.name} key={index} id={entity.id} />
119 </Link>
120 )
121 })
122 ) : (
123 <div
124 style={{
125 color: '#ddd'
126 }}
127 >
128 You haven&apos;t created any entities yet.
129 </div>
130 )}
131 </div>
132 </main>
133 </>
134 ) : (
135 /* Work on this, show a error */
136 Error
137 )}
138 <Footer />
139 </>
140 )
141}
142
143export default Dashboard

Vytvořeno pomocí Opengist ⋅ Load: 40ms⋅

Čeština