Whoops! you are using local host...
;
+ }
+
+ this.selectedRating = this.selectedRating.bind(this);
+ this.submitRating = this.submitRating.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ this._onConfigure = this._onConfigure.bind(this);
+ this.closeDialog = this.closeDialog.bind(this);
+ }
+
+ componentDidMount() {
+ if (this.props.enableCount) {
+ this.getItems();
+ }
+ if (this.props.listName && (this.props.emojisCollection.length > 0)) {
+ this.setState({ configLoaded: true });
+ }
+ }
+
+ componentDidUpdate(previousProps, previousState) {
+ if (previousProps.listName !== this.props.listName) {
+ if (this.props.listName && (this.props.emojisCollection.length > 0)) {
+ this.setState({ configLoaded: true });
+ //this.getItems();
+ }
+ }
+
+ if (previousProps.listMessage !== this.props.listMessage) {
+ this.ShowDialogMessage("List Creation", this.props.listMessage);
+ }
+ }
+
+
+ submitRating(event) {
+
+ let ratingCommnets = this.state.RatingComments ? (this.state.RatingComments).trim() : "";
+ //let selectedRatingIndex = parseInt(event.target.id);
+ //let selectedRatingIndex = event.target.tabIndex;
+ // let selectedRatingValue = event.target.title;
+
+ let selectedRatingIndex = this.state.selectedRatingIndex;
+ let selectedRatingValue = this.state.selectedRatingValue;
+ let ratingField;
+
+ switch (selectedRatingIndex) {
+ case 0:
+ ratingField = "Rating1";
+ break;
+ case 1:
+ ratingField = "Rating2";
+ break;
+ case 2:
+ ratingField = "Rating3";
+ break;
+ case 3:
+ ratingField = "Rating4";
+ break;
+ case 4:
+ ratingField = "Rating5";
+ break;
+
+ }
+
+ if (!(ratingField)) {
+ console.log("Something went wrong! Please check with Admin.");
+ return false;
+ }
+
+ //let pageName = window.location.pathname.substring(window.location.pathname.lastIndexOf("/") + 1);
+ /* let pageName = window.location.href;
+ let body: IRatingNewItem = {
+ Title: this._currentContext.pageContext.user.displayName,
+ Pagename: pageName ? pageName : window.location.href,
+ User: this._currentContext?.pageContext.user.loginName,
+ Comment: this.props.enableComments ? ratingCommnets : "",
+
+ }
+ //adding the right rating column and value
+ body[ratingColumn] = selectedRatingValue;
+ console.log("body object is: ", body); */
+
+ let pageName = window.location.href;
+ let body: any = {
+ Title: this._currentContext.pageContext.user.displayName,
+ Pagename: pageName ? pageName : window.location.href,
+ User: this._currentContext?.pageContext.user.loginName,
+ Comments: this.props.enableComments ? ratingCommnets : "",
+ Rating1: "",
+ Rating2: "",
+ Rating3: "",
+ Rating4: "",
+ Rating5: "",
+ }
+
+ body[ratingField] = selectedRatingValue;
+ console.log("body object is: ", body);
+
+ if (!this.existingRating) {
+ this._spService._addRatingItem(this.listName, body)
+ .then(value => {
+ // alert("Rating submitted successfully, thank you!");
+ //this.setState({ CustomMessage: "Rating submitted successfully, thank you!" });
+ console.log("Rating submitted successfully, thank you!", value.data.id);
+
+ this.ShowDialogMessage("Rating submitted", "Your rating submitted successfully, thank you!");
+ })
+ .catch(error => {
+ console.log("Something went wrong! please contact admin for more information.");
+ this.ShowDialogError(error, "Something went wrong! please contact admin for more information.")
+ });
+ }
+ else {
+ this._spService._updateRatingItem(this.listName, body, this.existingRating.Id)
+ .then(value => {
+ console.log("Rating updated successfully, thank you!", value.data.id);
+ this.ShowDialogMessage("Rating updated", "Your rating updated successfully, thank you!");
+ })
+ .catch(error => {
+ console.log("Something went wrong! please contact admin for more information.");
+ this.ShowDialogError(error, "Something went wrong! please contact admin for more information.")
+ });
+
+ }
+
+
+ }
+
+ async getItems() {
+
+ console.log("getItems: ", this._currentContext);
+ let ratingItems = await this._spService.getRatingListItems(this.listName);
+ console.log("ratingItems: ", ratingItems);
+ console.log("this.props.emojisCollection: ", this.props.emojisCollection.length);
+ let column1ValIndex, column2ValIndex, column3ValIndex, column4ValIndex, column5ValIndex;
+
+ for (let i = this.props.emojisCollection.length; i > 0; i--) {
+ switch (i) {
+ case 5:
+ column1ValIndex = this.props.emojisCollection.length - i;
+ break;
+ case 4:
+ column2ValIndex = this.props.emojisCollection.length - i;
+ break;
+ case 3:
+ column3ValIndex = this.props.emojisCollection.length - i;
+ break;
+ case 2:
+ column4ValIndex = this.props.emojisCollection.length - i;
+ break;
+ case 1:
+ column5ValIndex = this.props.emojisCollection.length - i;
+ break;
+
+ }
+ }
+
+ let pageRatings = await ratingItems.filter(function (element) {
+ return (element["Pagename"] == window.location.href
+ )
+ });
+
+ Promise.all([
+ this.getRatingCount(pageRatings, 'Rating1', this.props.emojisCollection[column1ValIndex].Title),
+ this.getRatingCount(pageRatings, 'Rating2', this.props.emojisCollection[column2ValIndex].Title),
+ this.getRatingCount(pageRatings, 'Rating3', this.props.emojisCollection[column3ValIndex].Title),
+ this.getRatingCount(pageRatings, 'Rating4', this.props.emojisCollection[column4ValIndex].Title),
+ this.getRatingCount(pageRatings, 'Rating5', this.props.emojisCollection[column5ValIndex].Title),
+ ])
+ .then(results => {
+ console.log("countRating1: ", results[0]);
+ console.log("countRating2: ", results[1]);
+ console.log("countRating3: ", results[2]);
+ console.log("countRating4: ", results[3]);
+ console.log("countRating5: ", results[4]);
+
+ this.setState(
+ {
+ 0: results[0],
+ 1: results[1],
+ 2: results[2],
+ 3: results[3],
+ 4: results[4]
+ }
+ );
+ })
+ .catch(error => {
+ console.log("Error in getting the rating count!");
+ });
+
+ let userLogin = this._currentContext.pageContext.user.loginName;
+ let userSelectedRating = await ratingItems.filter(function (element) {
+ return (element["Pagename"] == window.location.href
+ && (element["User"] == userLogin))
+ });
+
+ console.log("userSelectedRating: ", userSelectedRating[0]);
+
+ this.existingRating = userSelectedRating[0];
+ let currentUserRatingVal = "";
+ let currentUserRatingColumn = "";
+ //this.props.emojisCollection
+ if (userSelectedRating[0]["Rating1"]) {
+ currentUserRatingVal = userSelectedRating[0]["Rating1"];
+ currentUserRatingColumn = "Rating1";
+
+ }
+ else if (userSelectedRating[0]["Rating2"]) {
+ currentUserRatingVal = userSelectedRating[0]["Rating2"];
+ currentUserRatingColumn = "Rating2";
+
+ }
+ else if (userSelectedRating[0]["Rating3"]) {
+ currentUserRatingVal = userSelectedRating[0]["Rating3"];
+ currentUserRatingColumn = "Rating3";
+
+ }
+ else if (userSelectedRating[0]["Rating4"]) {
+ currentUserRatingVal = userSelectedRating[0]["Rating4"];
+ currentUserRatingColumn = "Rating4";
+
+ }
+ else if (userSelectedRating[0]["Rating5"]) {
+ currentUserRatingVal = userSelectedRating[0]["Rating5"];
+ currentUserRatingColumn = "Rating5";
+
+ }
+
+ let userSelectedRatingIndex;
+ await this.props.emojisCollection.filter(function (element, tabIndex) {
+ if ((element["Title"] == currentUserRatingVal)) {
+ userSelectedRatingIndex = tabIndex;
+ return tabIndex;
+ }
+ });
+ console.log("userSelectedRatingIndex: ", userSelectedRatingIndex);
+ this.setState({
+ selectedRatingIndex: userSelectedRatingIndex,
+ selectedRatingValue: currentUserRatingVal
+ });
+
+
+ }
+
+ async getRatingCount(items: any[], colName: string, colValue: string) {
+ let ratingCount = await items.filter(function (element) {
+ return element[colName] == colValue;
+ }).length
+
+ return ratingCount;
+ }
+
+
+ selectedRating(event) {
+ let selectedRatingIndex = event.target.tabIndex;
+ let selectedRatingValue = event.target.title;
+
+ this.setState({
+ selectedRatingIndex: selectedRatingIndex,
+ selectedRatingValue: selectedRatingValue
+ })
+ }
+
+ private handleChange(event: any, newValue: string) {
+ let partialState = {};
+ partialState[event.target.name] = newValue || "";
+ this.setState(partialState);
+ }
+
+ private _onConfigure = () => {
+ this.props.context.propertyPane.open();
+ }
+
+ private closeDialog(e: any) {
+ this.setState({ isDialogHidden: true });
+ window.location.reload();
+ }
+
+ private ShowDialogMessage(title: string, body: string) {
+ this.setState({
+ //isRedirectDialogHidden: false,
+ isDialogHidden: false,
+ dialogTitle: title,
+ dialogBody: body,
+
+ });
+ }
+
+ private ShowDialogError(
+ error: any,
+ customErrorMessage: string
+ ) {
+ if (!customErrorMessage) {
+ customErrorMessage = "";
+ }
+ this.setState({
+ isDialogHidden: false,
+ dialogTitle: "Error: Request failed.",
+ dialogBody: customErrorMessage.concat(
+ " Error message: ",
+ (error.Message || error.message)
+ ),
+
+ });
+ }
+
+ public render(): React.ReactElement{this.props.listMessage}
+ ) :
+ (
+
+
+ )
+ );
+ }
+}
+
+
diff --git a/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/models/IRatingNewItem.ts b/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/models/IRatingNewItem.ts
new file mode 100644
index 000000000..0083e2fa4
--- /dev/null
+++ b/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/models/IRatingNewItem.ts
@@ -0,0 +1,13 @@
+export interface IRatingNewItem {
+ Id?: number;
+ Title: string;
+ Pagename: string;
+ User: string;
+ Comment: string;
+ Rating1?: string;
+ Rating2?: string;
+ Rating3?: string;
+ Rating4?: string;
+ Rating5?: string;
+
+}
\ No newline at end of file
diff --git a/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/services/spService.ts b/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/services/spService.ts
new file mode 100644
index 000000000..7ce203eff
--- /dev/null
+++ b/samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/services/spService.ts
@@ -0,0 +1,153 @@
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { sp } from "@pnp/sp";
+import "@pnp/sp/webs";
+import "@pnp/sp/lists";
+import "@pnp/sp/items";
+import "@pnp/sp/fields";
+import "@pnp/sp/views";
+import { IItemAddResult } from "@pnp/sp/items";
+import { IRatingNewItem } from "../models/IRatingNewItem";
+// Class Services
+export default class spService {
+
+ constructor(private context: WebPartContext) {
+ // Setup Context to PnPjs
+ sp.setup({
+ spfxContext: this.context
+ });
+ // Init
+ this.onInit();
+ }
+ // OnInit Function
+ private async onInit() {
+
+ }
+
+ public async _getListItems(listName: string) {
+ const allItems: any[] = await sp.web.lists.getByTitle(listName).items.getAll();
+ console.log(allItems);
+ return allItems;
+ }
+
+
+ public getRatingListItems(listName: string): Promise
+
+
+
+
+
+
+ {this.props.ratingText ? this.props.ratingText : ''}
+
+
+ {this.props.emojisCollection ? this.props.emojisCollection.map((ratingItem, tabIndex) => (
+
+ {this.props.enableCount ? (
+ <>
+
+ 
+
+
+ ) : (
+ <>
+
+
+
+ )
+ }
+
+ )) :
+ }
+
+
+
+ {this.props.enableComments ? (
+
+
+
+ ) : ""
+ }
+ {this.state.CustomMessage ? (
+
+ {this.state.CustomMessage}
+
+ ) : ""
+ }
+
+ {this._message}
+
+
+
+
+
+
+
+
+
+