J'aime 0
Fork 0

Dernière activité 1704638097

TheRealToxicDev's Avatar TheRealToxicDev a révisé ce gist 1704638097. Aller à la révision

1 file changed, 0 insertions, 0 deletions

gistfile1.txt renommé en UpdatedDash.jsx

Fichier renommé sans modifications

TheRealToxicDev's Avatar TheRealToxicDev a révisé ce gist 1704638077. Aller à la révision

2 files changed, 262 insertions

dashboard.jsx(fichier créé)

@@ -0,0 +1,143 @@
1 + import Navbar from '@/components/Navbar'
2 + import Footer from '@/components/Footer'
3 +
4 + import Head from 'next/head'
5 + import Card from '@/components/DashboardCard'
6 + import PopupForm from '@/components/DashboardCreateEntity'
7 +
8 + import { useState, useEffect } from 'react'
9 + import Link from 'next/link'
10 + import { useRouter } from 'next/router'
11 +
12 + export 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 +
46 + const 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 +
58 + useEffect(() => {
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 +
143 + export default Dashboard

gistfile1.txt(fichier créé)

@@ -0,0 +1,119 @@
1 + import Navbar from '@/components/Navbar'
2 + import Footer from '@/components/Footer'
3 +
4 + import Head from 'next/head'
5 + import Card from '@/components/DashboardCard'
6 + import PopupForm from '@/components/DashboardCreateEntity'
7 +
8 + import useSWR from 'swr'
9 +
10 + import { useState, useEffect } from 'react'
11 + import Link from 'next/link'
12 + import { useRouter } from 'next/router'
13 +
14 + const 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 +
34 + useEffect(() => {
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 +
119 + export default Dashboard
Plus récent Plus ancien

Propulsé par Opengist ⋅ Load: 24ms⋅

Français