atpota.to / cred.blue
This repository has no description
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

fix: restructure card imports

author
damedotblog date (Jan 21, 2025, 1:32 PM -0500) commit a42dc3dc parent f7a63a00
+135 -101
+113 -101
src/components/UserProfile/UserProfile.js
··· 1 - // src/components/UserProfile/UserProfile.jsx 2 1 import React, { useEffect, useState } from "react"; 3 2 import { useParams } from "react-router-dom"; 4 3 import { Responsive, WidthProvider } from "react-grid-layout"; 5 4 import { loadAccountData } from "../../accountData"; // Ensure the path is correct 6 5 import Card from "../Card/Card"; 7 6 import ProgressCircles from "../ProgressCircles"; // Import our updated progress visualization 7 + 8 + // Import new card content components 9 + import ActivityCard from "./components/ActivityCard"; 10 + import AltTextCard from "./components/AltTextCard"; 11 + import BadgesCard from "./components/BadgesCard"; 12 + import NarrativeCard from "./components/NarrativeCard"; 13 + import NeedleCard from "./components/NeedleCard"; 14 + import PostMediaCard from "./components/PostMediaCard"; 15 + import PostTypeCard from "./components/PostTypeCard"; 16 + import ProfileCard from "./components/ProfileCard"; 17 + import ScoreBreakdownCard from "./components/ScoreBreakdownCard"; 18 + import ScoresCard from "./components/ScoresCard"; 19 + 8 20 import "./UserProfile.css"; 9 21 import "react-grid-layout/css/styles.css"; // Import default grid-layout styles 10 22 import "react-resizable/css/styles.css"; ··· 27 39 useEffect(() => { 28 40 setLayouts({ 29 41 lg: [ 42 + // Here you can order/position the cards as desired. The key "profilecard" corresponds to ProfileCard, etc. 30 43 { 31 - i: "overview", 44 + i: "profilecard", 32 45 x: 0, 33 46 y: 0, 34 47 w: 4, ··· 39 52 maxH: 6, 40 53 }, 41 54 { 42 - i: "stats", 43 - x: 6, 55 + i: "activitycard", 56 + x: 4, 44 57 y: 0, 45 58 w: 4, 46 59 h: 4, ··· 50 63 maxH: 6, 51 64 }, 52 65 { 53 - i: "visualization1", 66 + i: "alttextcard", 67 + x: 8, 68 + y: 0, 69 + w: 4, 70 + h: 4, 71 + minW: 3, 72 + maxW: 4, 73 + minH: 3, 74 + maxH: 6, 75 + }, 76 + { 77 + i: "badgescard", 54 78 x: 0, 55 79 y: 4, 56 80 w: 4, ··· 61 85 maxH: 6, 62 86 }, 63 87 { 64 - i: "visualization2", 88 + i: "narrativecard", 65 89 x: 4, 66 90 y: 4, 67 91 w: 4, ··· 72 96 maxH: 6, 73 97 }, 74 98 { 75 - i: "recentActivity", 99 + i: "needlecard", 76 100 x: 8, 77 101 y: 4, 78 102 w: 4, 79 103 h: 4, 80 104 minW: 3, 81 - maxW: 6, 105 + maxW: 4, 82 106 minH: 3, 83 107 maxH: 6, 84 108 }, 85 109 { 86 - i: "connections", 110 + i: "postmediacard", 87 111 x: 0, 88 112 y: 8, 89 113 w: 4, ··· 94 118 maxH: 6, 95 119 }, 96 120 { 97 - i: "settings", 121 + i: "posttypecard", 98 122 x: 4, 99 123 y: 8, 100 124 w: 4, ··· 105 129 maxH: 6, 106 130 }, 107 131 { 108 - i: "extra", 132 + i: "scorebreakdowncard", 109 133 x: 8, 110 134 y: 8, 111 135 w: 4, 112 136 h: 4, 113 137 minW: 3, 114 - maxW: 6, 138 + maxW: 4, 115 139 minH: 3, 116 140 maxH: 6, 117 141 }, 118 142 { 119 - i: "additional", 143 + i: "scorescard", 120 144 x: 0, 121 145 y: 12, 122 146 w: 4, 123 147 h: 4, 124 148 minW: 3, 125 - maxW: 6, 149 + maxW: 4, 126 150 minH: 3, 127 151 maxH: 6, 128 152 }, 129 153 ], 130 154 md: [ 155 + // You can define the md layout similarly if desired 131 156 { 132 - i: "overview", 157 + i: "profilecard", 133 158 x: 0, 134 159 y: 0, 135 160 w: 5, ··· 140 165 maxH: 8, 141 166 }, 142 167 { 143 - i: "stats", 168 + i: "activitycard", 144 169 x: 5, 145 170 y: 0, 146 171 w: 5, ··· 151 176 maxH: 8, 152 177 }, 153 178 { 154 - i: "visualization1", 179 + i: "alttextcard", 155 180 x: 0, 156 - y: 4, 181 + y: 7, 157 182 w: 5, 158 183 h: 7, 159 184 minW: 4, ··· 162 187 maxH: 8, 163 188 }, 164 189 { 165 - i: "visualization2", 190 + i: "badgescard", 166 191 x: 5, 167 - y: 4, 192 + y: 7, 168 193 w: 5, 169 194 h: 7, 170 195 minW: 4, ··· 173 198 maxH: 8, 174 199 }, 175 200 { 176 - i: "recentActivity", 201 + i: "narrativecard", 177 202 x: 0, 178 - y: 8, 179 - w: 10, 203 + y: 14, 204 + w: 5, 205 + h: 7, 206 + minW: 4, 207 + maxW: 7, 208 + minH: 4, 209 + maxH: 8, 210 + }, 211 + { 212 + i: "needlecard", 213 + x: 5, 214 + y: 14, 215 + w: 5, 180 216 h: 7, 181 - minW: 8, 182 - maxW: 10, 217 + minW: 4, 218 + maxW: 7, 183 219 minH: 4, 184 220 maxH: 8, 185 221 }, 186 222 { 187 - i: "connections", 223 + i: "postmediacard", 188 224 x: 0, 189 - y: 12, 225 + y: 21, 190 226 w: 5, 191 227 h: 7, 192 228 minW: 4, ··· 195 231 maxH: 8, 196 232 }, 197 233 { 198 - i: "settings", 234 + i: "posttypecard", 199 235 x: 5, 200 - y: 12, 236 + y: 21, 201 237 w: 5, 202 238 h: 7, 203 239 minW: 4, ··· 206 242 maxH: 8, 207 243 }, 208 244 { 209 - i: "extra", 245 + i: "scorebreakdowncard", 210 246 x: 0, 211 - y: 16, 247 + y: 28, 212 248 w: 5, 213 249 h: 7, 214 250 minW: 4, 215 - maxW: 7, 251 + maxW: 5, 216 252 minH: 4, 217 253 maxH: 8, 218 254 }, 219 255 { 220 - i: "additional", 256 + i: "scorescard", 221 257 x: 5, 222 - y: 16, 258 + y: 28, 223 259 w: 5, 224 260 h: 7, 225 261 minW: 4, 226 - maxW: 7, 262 + maxW: 5, 227 263 minH: 4, 228 264 maxH: 8, 229 265 }, ··· 238 274 }; 239 275 240 276 // Fetch account data using our loadAccountData function. 241 - // Each time an API page completes, our callback increments the circle count by 1. 242 277 useEffect(() => { 243 278 const fetchAccountData = async () => { 244 279 try { ··· 260 295 fetchAccountData(); 261 296 }, [username]); 262 297 263 - // While loading, show our progress visualization which updates as each API call completes. 264 298 if (loading) { 265 299 return ( 266 300 <div className="user-profile loading-container"> 267 301 <ProgressCircles loading={loading} /> 268 302 <p className="loading-text"> 269 - Loading account data... { /* display seconds elapsed as needed */ } 303 + Loading account data... {/* display seconds elapsed as needed */} 270 304 </p> 271 305 </div> 272 306 ); ··· 280 314 return <div className="user-profile">No profile information available.</div>; 281 315 } 282 316 283 - // Destructure some fields from accountData for display 317 + // Destructure any fields you wish to pass as props from accountData 284 318 const { 285 319 profile, 286 320 displayName, ··· 305 339 margin={[20, 20]} 306 340 onLayoutChange={handleLayoutChange} 307 341 > 308 - <div key="overview" className="grid-item"> 309 - <Card title="Profile Overview"> 310 - <div className="drag-handle"> 311 - <span className="drag-icon">≡</span> 312 - </div> 313 - <p><strong>Username:</strong> {resolvedHandle}</p> 314 - <p><strong>DID:</strong> {did}</p> 315 - <p> 316 - <strong>Account Created:</strong>{" "} 317 - {new Date(createdAt).toLocaleDateString()}{" "} 318 - (<em>{Math.floor(ageInDays)} days old</em>) 319 - </p> 320 - <p><strong>Service Endpoint:</strong> {serviceEndpoint}</p> 321 - <p><strong>PDS Type:</strong> {pdsType}</p> 342 + <div key="profilecard" className="grid-item"> 343 + <Card title="Profile"> 344 + <ProfileCard 345 + resolvedHandle={resolvedHandle} 346 + did={did} 347 + createdAt={createdAt} 348 + ageInDays={ageInDays} 349 + serviceEndpoint={serviceEndpoint} 350 + pdsType={pdsType} 351 + /> 322 352 </Card> 323 353 </div> 324 354 325 - <div key="stats" className="grid-item"> 326 - <Card title="Stats"> 327 - <div className="drag-handle"> 328 - <span className="drag-icon">≡</span> 329 - </div> 330 - <p>Stats details go here...</p> 355 + <div key="activitycard" className="grid-item"> 356 + <Card title="Activity"> 357 + <ActivityCard profile={profile} /> 358 + </Card> 359 + </div> 360 + 361 + <div key="alttextcard" className="grid-item"> 362 + <Card title="Alt Text"> 363 + <AltTextCard profile={profile} /> 331 364 </Card> 332 365 </div> 333 366 334 - <div key="visualization1" className="grid-item"> 335 - <Card title="Visualization 1"> 336 - <div className="drag-handle"> 337 - <span className="drag-icon">≡</span> 338 - </div> 339 - <p>Chart or graph 1...</p> 367 + <div key="badgescard" className="grid-item"> 368 + <Card title="Badges"> 369 + <BadgesCard profile={profile} /> 340 370 </Card> 341 371 </div> 342 372 343 - <div key="visualization2" className="grid-item"> 344 - <Card title="Visualization 2"> 345 - <div className="drag-handle"> 346 - <span className="drag-icon">≡</span> 347 - </div> 348 - <p>Chart or graph 2...</p> 373 + <div key="narrativecard" className="grid-item"> 374 + <Card title="Narrative"> 375 + <NarrativeCard profile={profile} /> 349 376 </Card> 350 377 </div> 351 378 352 - <div key="recentActivity" className="grid-item"> 353 - <Card title="Recent Activity"> 354 - <div className="drag-handle"> 355 - <span className="drag-icon">≡</span> 356 - </div> 357 - <p>Recent user activities...</p> 379 + <div key="needlecard" className="grid-item"> 380 + <Card title="Needle"> 381 + <NeedleCard profile={profile} /> 358 382 </Card> 359 383 </div> 360 384 361 - <div key="connections" className="grid-item"> 362 - <Card title="Connections"> 363 - <div className="drag-handle"> 364 - <span className="drag-icon">≡</span> 365 - </div> 366 - <p>Follower or connection info...</p> 385 + <div key="postmediacard" className="grid-item"> 386 + <Card title="Post Media"> 387 + <PostMediaCard profile={profile} /> 367 388 </Card> 368 389 </div> 369 390 370 - <div key="settings" className="grid-item"> 371 - <Card title="Settings"> 372 - <div className="drag-handle"> 373 - <span className="drag-icon">≡</span> 374 - </div> 375 - <p>Settings details...</p> 391 + <div key="posttypecard" className="grid-item"> 392 + <Card title="Post Type"> 393 + <PostTypeCard profile={profile} /> 376 394 </Card> 377 395 </div> 378 396 379 - <div key="extra" className="grid-item"> 380 - <Card title="Extra"> 381 - <div className="drag-handle"> 382 - <span className="drag-icon">≡</span> 383 - </div> 384 - <p>Extra details...</p> 397 + <div key="scorebreakdowncard" className="grid-item"> 398 + <Card title="Score Breakdown"> 399 + <ScoreBreakdownCard profile={profile} /> 385 400 </Card> 386 401 </div> 387 402 388 - <div key="additional" className="grid-item"> 389 - <Card title="Additional Info"> 390 - <div className="drag-handle"> 391 - <span className="drag-icon">≡</span> 392 - </div> 393 - <p>Additional information...</p> 403 + <div key="scorescard" className="grid-item"> 404 + <Card title="Scores"> 405 + <ScoresCard profile={profile} /> 394 406 </Card> 395 407 </div> 396 408 </ResponsiveGridLayout>
src/components/UserProfile/components/Badges.js src/components/UserProfile/components/BadgesCard.js
src/components/UserProfile/components/PostMediaViz.js src/components/UserProfile/components/PostMediaCard.js
src/components/UserProfile/components/PostTypeViz.js src/components/UserProfile/components/PostTypeCard.js
+22
src/components/UserProfile/components/ProfileCard.js
··· 1 + import React from "react"; 2 + 3 + const ProfileCard = ({ resolvedHandle, did, createdAt, ageInDays, serviceEndpoint, pdsType }) => { 4 + return ( 5 + <div> 6 + <div className="drag-handle"> 7 + <span className="drag-icon">≡</span> 8 + </div> 9 + <p><strong>Username:</strong> {resolvedHandle}</p> 10 + <p><strong>DID:</strong> {did}</p> 11 + <p> 12 + <strong>Account Created:</strong>{" "} 13 + {new Date(createdAt).toLocaleDateString()}{" "} 14 + (<em>{Math.floor(ageInDays)} days old</em>) 15 + </p> 16 + <p><strong>Service Endpoint:</strong> {serviceEndpoint}</p> 17 + <p><strong>PDS Type:</strong> {pdsType}</p> 18 + </div> 19 + ); 20 + }; 21 + 22 + export default ProfileCard;
src/components/UserProfile/components/ScoreBreakdownViz.js src/components/UserProfile/components/ScoreBreakdownCard.js