forked from
margin.at/margin
Write on the margins of the internet. Powered by the AT Protocol.
fix: show sorted items
+56
-32
+29
-18
web/src/views/content/UrlPage.tsx
+29
-18
web/src/views/content/UrlPage.tsx
···
1
-
import React, { useState, useEffect, useCallback } from "react";
2
-
import { useParams, useNavigate } from "react-router-dom";
3
1
import { useStore } from "@nanostores/react";
4
-
import { $user } from "../../store/auth";
5
-
import { getByTarget } from "../../api/client";
6
-
import type { AnnotationItem } from "../../types";
7
-
import Card from "../../components/common/Card";
8
2
import {
9
-
PenTool,
10
-
Highlighter,
11
-
Search,
12
3
AlertTriangle,
13
-
Globe,
4
+
Check,
14
5
Copy,
15
-
Check,
16
6
ExternalLink,
7
+
Globe,
8
+
Highlighter,
17
9
Loader2,
18
-
Users,
10
+
PenTool,
11
+
Search,
19
12
User,
13
+
Users,
20
14
} from "lucide-react";
21
-
22
-
import { Tabs, EmptyState, Input, Button } from "../../components/ui";
15
+
import React, { useCallback, useEffect, useState } from "react";
16
+
import { useNavigate, useParams } from "react-router-dom";
17
+
import { getByTarget } from "../../api/client";
18
+
import Card from "../../components/common/Card";
19
+
import { Button, EmptyState, Input, Tabs } from "../../components/ui";
20
+
import { $user } from "../../store/auth";
21
+
import type { AnnotationItem } from "../../types";
23
22
24
23
export default function UrlPage() {
25
24
const params = useParams();
···
146
145
);
147
146
}
148
147
148
+
const items = [
149
+
...(activeTab === "all" || activeTab === "annotations" ? annotations : []),
150
+
...(activeTab === "all" || activeTab === "highlights" ? highlights : []),
151
+
];
152
+
153
+
if (activeTab === "all") {
154
+
items.sort((a, b) => {
155
+
const dateA = new Date(a.createdAt).getTime();
156
+
const dateB = new Date(b.createdAt).getTime();
157
+
return dateB - dateA;
158
+
});
159
+
}
160
+
149
161
return (
150
162
<div className="max-w-3xl mx-auto pb-20 animate-fade-in">
151
163
<header className="mb-8 p-6 bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-700 shadow-sm">
···
280
292
/>
281
293
)}
282
294
283
-
{(activeTab === "all" || activeTab === "annotations") &&
284
-
annotations.map((a) => <Card key={a.uri} item={a} />)}
285
-
{(activeTab === "all" || activeTab === "highlights") &&
286
-
highlights.map((h) => <Card key={h.uri} item={h} />)}
295
+
{items.map((item) => (
296
+
<Card key={item.uri} item={item} />
297
+
))}
287
298
</div>
288
299
</div>
289
300
)}
+27
-14
web/src/views/content/UserUrlPage.tsx
+27
-14
web/src/views/content/UserUrlPage.tsx
···
1
-
import React, { useState, useEffect } from "react";
2
-
import { useParams } from "react-router-dom";
3
-
import { getUserTargetItems } from "../../api/client";
4
-
import type { AnnotationItem, UserProfile } from "../../types";
5
-
import Card from "../../components/common/Card";
1
+
import { clsx } from "clsx";
6
2
import {
7
-
PenTool,
3
+
AlertTriangle,
4
+
ExternalLink,
8
5
Highlighter,
6
+
PenTool,
9
7
Search,
10
-
AlertTriangle,
11
-
ExternalLink,
12
8
} from "lucide-react";
13
-
import { clsx } from "clsx";
14
-
import { getAvatarUrl } from "../../api/client";
9
+
import React, { useEffect, useState } from "react";
10
+
import { useParams } from "react-router-dom";
11
+
import { getAvatarUrl, getUserTargetItems } from "../../api/client";
12
+
import Card from "../../components/common/Card";
13
+
import type { AnnotationItem, UserProfile } from "../../types";
15
14
16
15
export default function UserUrlPage() {
17
16
const params = useParams();
···
107
106
);
108
107
}
109
108
109
+
const items = [
110
+
...(activeTab === "all" || activeTab === "annotations"
111
+
? annotations
112
+
: []),
113
+
...(activeTab === "all" || activeTab === "highlights" ? highlights : []),
114
+
];
115
+
116
+
if (activeTab === "all") {
117
+
items.sort((a, b) => {
118
+
const dateA = new Date(a.createdAt).getTime();
119
+
const dateB = new Date(b.createdAt).getTime();
120
+
return dateB - dateA;
121
+
});
122
+
}
123
+
110
124
return (
111
125
<div className="space-y-6">
112
-
{(activeTab === "all" || activeTab === "annotations") &&
113
-
annotations.map((a) => <Card key={a.uri} item={a} />)}
114
-
{(activeTab === "all" || activeTab === "highlights") &&
115
-
highlights.map((h) => <Card key={h.uri} item={h} />)}
126
+
{items.map((item) => (
127
+
<Card key={item.uri} item={item} />
128
+
))}
116
129
</div>
117
130
);
118
131
};