Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds SVG to Json for SharePoint List Web Part #5338

Merged
merged 100 commits into from
Jan 13, 2025
Merged
Changes from 1 commit
Commits
Show all changes
100 commits
Select commit Hold shift + click to select a range
35560f9
adds first draft of a webpart sample
LuiseFreese Oct 16, 2024
88921f7
Automated samples.json update
actions-user Oct 16, 2024
2384acc
modifies sample to also display a preview of the SVG
LuiseFreese Oct 16, 2024
a870011
Merge branch 'main' of https://github.com/LuiseFreese/sp-dev-fx-webparts
LuiseFreese Oct 16, 2024
79b89ac
implements apply to a column on a list of your choice in a given site…
LuiseFreese Oct 16, 2024
4c30127
some debugging and solidifying
LuiseFreese Oct 16, 2024
94c08b3
adds info about new features in Readme and addds video and image
LuiseFreese Oct 16, 2024
aebee9e
attempts to fix link
LuiseFreese Oct 16, 2024
8262311
attempts to fix link 2
LuiseFreese Oct 16, 2024
2284bfa
attempts to fix link 3
LuiseFreese Oct 16, 2024
ad6cf36
attempts to fix link 4
LuiseFreese Oct 16, 2024
2dd424d
attempts to fix link 4
LuiseFreese Oct 16, 2024
ea29677
attempts to fix link 4
LuiseFreese Oct 16, 2024
552a6c4
adds image
LuiseFreese Oct 16, 2024
2ad57f0
adds property pane with Site URL and libraryName
LuiseFreese Oct 17, 2024
57f5639
rms unneccessary styling, excludes doc libary
LuiseFreese Oct 18, 2024
2ba476c
splits up the logic into several components
LuiseFreese Oct 18, 2024
2f62995
uses PnPjs for fetchSVGfiles
LuiseFreese Oct 18, 2024
4efd404
uses PnP.js for applyColumnFormatting
LuiseFreese Oct 18, 2024
3a6190e
uses PnP.js for fetching listcolumns
LuiseFreese Oct 18, 2024
6dbd58c
adds option to select the site the format shall be applied to
LuiseFreese Oct 19, 2024
2cc94ed
adjusts readme to reflect site selector
LuiseFreese Oct 19, 2024
7bbd0de
moves handleFileChange to SVGInput
LuiseFreese Oct 19, 2024
0205f96
moves applyColumnFormat to ApplyButton.tsx
LuiseFreese Oct 19, 2024
4340a32
adsjusts property pane to tell users what they need to do
LuiseFreese Oct 19, 2024
d21db08
adds aria labels for better accessibility
LuiseFreese Oct 19, 2024
2416f04
comments
LuiseFreese Oct 19, 2024
23241e7
separates ListColumnSelector in ListSelector and ColumnSelector
LuiseFreese Oct 19, 2024
6ad68df
big fix that precented the apply btn to work correctly
LuiseFreese Oct 19, 2024
d562849
adds custom hooks to fetch lists and columns
LuiseFreese Oct 19, 2024
e389586
typo fixes in README
LuiseFreese Oct 19, 2024
5b64f2b
adds reset feature to applybutton
LuiseFreese Oct 19, 2024
bcbb2b3
applies bug fix that prevented applyColumn to work properly
LuiseFreese Oct 19, 2024
cf60e71
adds pic and ref to blog to readme
LuiseFreese Oct 19, 2024
1ed2362
first attempt to make it also work in Teams
LuiseFreese Oct 19, 2024
e96c059
fixes styling issues and minor bugs
LuiseFreese Oct 20, 2024
2cb262e
small UI improvement wit accordeon
LuiseFreese Oct 20, 2024
d6d62bc
moves Teams configuration to child component
LuiseFreese Oct 20, 2024
6c41101
basic usage in Teams prep and updatew of readme
LuiseFreese Oct 20, 2024
7440bde
adds imgae
LuiseFreese Oct 20, 2024
933f9d9
corrects link for image
LuiseFreese Oct 20, 2024
a2b6ade
adds minimal validation of property pane values.
LuiseFreese Oct 21, 2024
bd1bc9a
PnPjs improvements
LuiseFreese Oct 21, 2024
3b571e0
prepares for loc
LuiseFreese Oct 21, 2024
f48bb06
no no hard coded strings anymore
LuiseFreese Nov 1, 2024
6c3460f
Automated samples.json update
actions-user Nov 1, 2024
3c497f5
adds docs
LuiseFreese Nov 1, 2024
4cc859e
Merge branch 'main' of https://github.com/LuiseFreese/sp-dev-fx-webparts
LuiseFreese Nov 1, 2024
325ab90
:bulb: elaborates on component logic, adds mermaid
LuiseFreese Nov 1, 2024
da9e9f8
:bulb: elaborates on component logic, adds mermaid
LuiseFreese Nov 1, 2024
35a9848
:fire: removes old toggleswitch
LuiseFreese Nov 1, 2024
4470b5a
hooks and service
LuiseFreese Nov 2, 2024
e4154f6
:art: creates useFetchSites hook
LuiseFreese Nov 2, 2024
ac9be97
:speech_balloon: improves localization
LuiseFreese Nov 2, 2024
125e6d1
:speech_balloon: improves localization
LuiseFreese Nov 2, 2024
cd91899
:sparkles: new genz locale and new de-de locale
LuiseFreese Nov 2, 2024
b2533e3
:bug: adds strings in locale files
LuiseFreese Nov 2, 2024
4c63e74
:memo: adds info on multilanguage to readme
LuiseFreese Nov 2, 2024
f9130f6
:memo: clarifies readme
LuiseFreese Nov 2, 2024
26c03de
:tada: early draft of ultimate listformatting webpart
LuiseFreese Nov 3, 2024
bbdb65b
:zap: adds pagination to gallery
LuiseFreese Nov 3, 2024
04399f2
:see_no_evil: adds env
LuiseFreese Nov 3, 2024
e0d6fee
:bug: debugs pagination
LuiseFreese Nov 4, 2024
42667fd
:bug: fixes pagination
LuiseFreese Nov 4, 2024
5a95897
:art: 4 rows of items in gallerty, fixes apply button hook
LuiseFreese Nov 4, 2024
1c943cd
:sparkles: adds author name and profile pic
LuiseFreese Nov 4, 2024
6db9c14
Revert ":sparkles: adds author name and profile pic"
LuiseFreese Nov 4, 2024
a93b5ba
:sparkles: adds author name and profile pic
LuiseFreese Nov 4, 2024
5873128
:sparkles: adds search
LuiseFreese Nov 4, 2024
1484508
:sparkles: adds modal
LuiseFreese Nov 7, 2024
520b4dc
:bug: fixes open in github link
LuiseFreese Nov 8, 2024
ac7deac
:ambulance: replaces fake token with placeholder
LuiseFreese Nov 8, 2024
47a6fe0
Automated samples.json update
actions-user Nov 8, 2024
4451efb
:zap: adds browser caching and lazy loading
LuiseFreese Nov 8, 2024
3297be5
Merge branch 'main' of https://github.com/LuiseFreese/sp-dev-fx-webparts
LuiseFreese Nov 8, 2024
bf7fa51
:heavy_plus_sign: adds octokit
LuiseFreese Nov 8, 2024
d23480b
:memo: adds Readme information
LuiseFreese Nov 8, 2024
2f61d67
:zap: fixes search
LuiseFreese Nov 8, 2024
473a9a1
:art: creates hooks for SampleSelection, Pagination, Modal
LuiseFreese Nov 8, 2024
1f1587a
:memo: updates mermaid
LuiseFreese Nov 8, 2024
db64bbb
:memo: updates mermaid 2
LuiseFreese Nov 8, 2024
9f0282e
:sparkles: adds provide feedback option.
LuiseFreese Nov 9, 2024
889993f
:lipstick: polishes description
LuiseFreese Nov 9, 2024
ad71d9c
:memo: lets mermaid and features align with recent changes
LuiseFreese Nov 9, 2024
f58b565
adds tourfile
LuiseFreese Nov 10, 2024
f805a54
:fire: removes 2nd sample for now
LuiseFreese Nov 10, 2024
94216dc
:memo: adds nvmrc file
LuiseFreese Nov 10, 2024
ffd0d1e
:tada: first draft of bluesky web part
LuiseFreese Nov 12, 2024
b7247ef
:tada: creates first draft of Bluesky webpart
LuiseFreese Nov 12, 2024
803b22e
Revert ":tada: creates first draft of Bluesky webpart"
LuiseFreese Nov 12, 2024
b85d554
Merge branch 'pnp:main' into main
LuiseFreese Nov 12, 2024
bbbdb20
Merge branch 'main' of https://github.com/LuiseFreese/sp-dev-fx-webparts
LuiseFreese Nov 12, 2024
fdc2989
:memo: provides Readme info
LuiseFreese Nov 12, 2024
c3e2291
removes bluesky sample from PR
LuiseFreese Nov 18, 2024
c7c9e19
:fire: adds bluesky web part sample with basic features
LuiseFreese Nov 19, 2024
c31dfbe
:sparkles: adds feature to LIKE posts
LuiseFreese Nov 20, 2024
62daecf
:bug: fixes sharecount
LuiseFreese Nov 20, 2024
3b1c809
Merge branch 'main' into main
hugoabernier Nov 26, 2024
e1aec3d
Removed extra sample, fixed readme, added sample.json and containers.
hugoabernier Jan 13, 2025
72cf0c6
Merge branch 'main' of https://github.com/LuiseFreese/sp-dev-fx-webpa…
hugoabernier Jan 13, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
✨ adds feature to LIKE posts
  • Loading branch information
LuiseFreese committed Nov 20, 2024
commit c31dfbea0358af507b7e5e6a94338cc81ff6435a
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
grid-template-columns: repeat(2, 1fr); /* Two columns */
gap: 20px; /* Consistent gap between cards */
grid-auto-rows: minmax(100px, auto); /* Ensure consistent row height */
grid-auto-flow: dense; /* Fill in gaps with smaller items */
}

.card {
@@ -47,6 +48,9 @@
.cardContent {
margin-top: 10px;
color: black; /* Set post text color to black */
white-space: pre-wrap; /* Ensure text wraps properly */
word-wrap: break-word; /* Handle long words or links */
overflow-wrap: break-word; /* Handle long words or links */
}

.cardImagesContainer {
@@ -78,21 +82,23 @@
.statItem {
align-items: center;
display: flex;
cursor: pointer; /* Add cursor pointer for clickable items */
}

.statIcon {
color: #0078d4;
color: #0078d4; /* Blue color */
margin-right: 5px;
font-size: 10px;
font-size: 14px; /* Make icons smaller */
transition: color 0.2s ease; /* Add transition for color change */
}

.statText {
color: #0078d4;
color: #0078d4; /* Blue color */
margin-right: 10px;
}

.hashtag {
color: #0078d4;
color: #0078d4; /* Blue color */
cursor: pointer;
font-weight: 500;
margin-right: 5px;
@@ -105,4 +111,44 @@
&:visited {
color: #0078d4; /* Ensure the color remains the same for visited links */
}
}

.liked {
color: red; /* Change color to red when liked */
}

.statItem:hover .statIcon {
color: red; /* Change color to red on hover */
}

.linkPreview {
display: flex;
margin-top: 10px;
}

.linkImage {
border-radius: 8px;
height: 100px;
width: 100px;
margin-right: 10px;
}

.linkDetails {
display: flex;
flex-direction: column;
}

.linkTitle {
color: #0078d4; /* Blue color */
font-weight: bold;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}

.linkDescription {
color: #555;
font-size: 0.9rem;
}
129 changes: 53 additions & 76 deletions samples/react-bluesky/src/webparts/blueSky/components/BlueSky.tsx
Original file line number Diff line number Diff line change
@@ -3,11 +3,12 @@ import { Card, CardSection } from '@fluentui/react-cards';
import { initializeIcons } from '@fluentui/react';
import { Icon } from '@fluentui/react/lib/Icon';
import BlueSkyImageSection from './BlueSkyImageSection';
import BlueSkyAuthorSection from './BlueSkyAuthorSection';
import BlueSkyContentSection from './BlueSkyContentSection';
import BlueSkyTimestampSection from './BlueSkyTimestampSection';
import useAccessToken from './useAccessToken';
import useBlueSkyPosts from './useBlueSkyPosts';
import useLikePost from './useLikePost';
import usePostMetrics from './usePostMetrics';
import styles from './BlueSky.module.scss';
import { IBlueSkyProps } from './IBlueSkyProps';
import axios from 'axios';
@@ -16,61 +17,32 @@ import axios from 'axios';
initializeIcons();

const pdsUrl = "https://bsky.social";
const getPostThreadEndpoint = `${pdsUrl}/xrpc/app.bsky.feed.getPostThread`;

const getPostMetrics = async (accessToken: string, postUri: string): Promise<{ likeCount: number; shareCount: number; replyCount: number }> => {
const headers = { Authorization: `Bearer ${accessToken}` };
const params = { uri: postUri };

try {
const response = await axios.get(getPostThreadEndpoint, { headers, params });
const data = response.data;

console.log('API Response:', data); // Log the full API response

const thread = data.thread || {};
const post = thread.post || {};

console.log('Post Data:', post); // Log the post data

const likeCount = post.likeCount || 0;
const shareCount = post.reshareCount || 0;
const replyCount = post.replyCount || 0;

return { likeCount, shareCount, replyCount };
} catch (error) {
console.error(`Failed to fetch metrics for post ${postUri}`, error);
throw error;
}
};

const BlueSky: React.FC<IBlueSkyProps> = (props) => {
const { accessToken, error: tokenError } = useAccessToken('luisefreese.bsky.social', 'txmo-2fvo-vwb3-3vwa');
const { accessToken, error: tokenError } = useAccessToken('<your handle>.bsky.social', 'your app password'); // replace!
const { posts, loading, error: postsError } = useBlueSkyPosts(accessToken);

const [metrics, setMetrics] = useState<{ [key: string]: { likeCount: number, shareCount: number, replyCount: number } }>({});
const [did, setDid] = useState<string>('');

useEffect(() => {
const fetchMetrics = async (): Promise<void> => {
const fetchDid = async (): Promise<void> => {
if (accessToken) {
const newMetrics: { [key: string]: { likeCount: number, shareCount: number, replyCount: number } } = {};
for (const post of posts) {
const postUri = post.uri.startsWith('at://') ? post.uri : `at://${post.uri}`;
try {
const postMetrics = await getPostMetrics(accessToken, postUri);
newMetrics[post.id] = postMetrics;
} catch (error) {
console.error(`Failed to fetch metrics for post ${post.id}`, error);
}
try {
const response = await axios.get(
`${pdsUrl}/xrpc/com.atproto.identity.resolveHandle?handle=<your handle>.bsky.social`,
{ headers: { Authorization: `Bearer ${accessToken}` } }
);
setDid(response.data.did);
} catch (error) {
console.error('Failed to fetch DID', error);
}
setMetrics(newMetrics);
}
};

fetchMetrics()
.then(() => console.log("Metrics fetched successfully"))
.catch((error) => console.error("Error fetching metrics:", error));
}, [accessToken, posts]);
fetchDid().catch((error) => console.error('Error fetching DID:', error));
}, [accessToken]);

const { likedPosts, handleLikeClick } = useLikePost(accessToken || '', did || '');
const metrics = usePostMetrics(accessToken || '', posts);

return (
<div>
@@ -82,41 +54,46 @@ const BlueSky: React.FC<IBlueSkyProps> = (props) => {
{posts.map((post) => {
const lastUriSegment = post.uri.split('/').pop();
const postUrl = `https://bsky.app/profile/${post.author.handle}/post/${lastUriSegment}`;
const profileUrl = `https://bsky.app/profile/${post.author.handle}`;
const postMetrics = metrics[post.id] || { likeCount: 0, shareCount: 0, replyCount: 0 };
const isLiked = likedPosts.has(post.id);

return (
<a key={post.id} href={postUrl} target="_blank" rel="noopener noreferrer" className={styles.cardLink}>
<Card className={styles.card}>
<CardSection>
<BlueSkyAuthorSection avatar={post.author.avatar || ''} author={post.author.displayName} />
</CardSection>
<CardSection>
<Card key={post.id} className={styles.card}>
<CardSection>
<div className={styles.cardAuthorContainer} onClick={() => window.open(profileUrl, '_blank')}>
<img src={post.author.avatar || ''} alt={post.author.displayName} className={styles.cardAvatar} />
<span className={styles.cardAuthor}>{post.author.displayName}</span>
</div>
</CardSection>
<CardSection>
<div onClick={() => window.open(postUrl, '_blank')}>
<BlueSkyContentSection content={post.content} />
</CardSection>
<CardSection>
<BlueSkyImageSection images={post.images || []} did={post.did} />
</CardSection>
<CardSection>
<BlueSkyTimestampSection timestamp={post.timestamp} />
</CardSection>
<CardSection>
<div className={styles.postStats}>
<div className={styles.statItem}>
<Icon iconName="Heart" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.likeCount}</span>
</div>
<div className={styles.statItem}>
<Icon iconName="Share" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.shareCount}</span>
</div>
<div className={styles.statItem}>
<Icon iconName="Comment" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.replyCount}</span>
</div>
</div>
</CardSection>
<CardSection>
<BlueSkyImageSection images={post.images || []} did={post.did} />
</CardSection>
<CardSection>
<BlueSkyTimestampSection timestamp={post.timestamp} />
</CardSection>
<CardSection>
<div className={styles.postStats}>
<div className={`${styles.statItem} ${isLiked ? styles.liked : ''}`} onClick={() => handleLikeClick(post.uri, post.id).catch((error) => console.error('Error liking post:', error))}>
<Icon iconName="Heart" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.likeCount + (isLiked ? 1 : 0)}</span>
</div>
<div className={styles.statItem}>
<Icon iconName="Share" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.shareCount}</span>
</div>
<div className={styles.statItem}>
<Icon iconName="Comment" className={styles.statIcon} />
<span className={styles.statText}>{postMetrics.replyCount}</span>
</div>
</CardSection>
</Card>
</a>
</div>
</CardSection>
</Card>
);
})}
</div>
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ interface BlueSkyAuthorSectionProps {
}

const BlueSkyAuthorSection: React.FC<BlueSkyAuthorSectionProps> = ({ avatar, author }) => {
console.log('Author:', author); // Log the author prop to the console


return (
<div className={styles.cardAuthorContainer}>
Loading