How to use trimLongString method in Playwright Internal

1import React, {useState} from 'react';
2import {Form} from 'react-bootstrap';
3import './table.css';
4import EventsDetail from "../modal/EventsDetail";
5import {checkForEmpty, dateFormatter, trimLongString} from "../filters";
6
7const CalendarItem = ({event, saveEventId, popEventId}) => {
8    const [modal, setModal] = useState(false);
9
10    const processEventId = (e) => {
11        if (e.target.checked) {
12            saveEventId(event.id);
13        } else {
14            popEventId(event.id);
15        }
16    };
17
18    return (
19        <>
20            <tr onClick={() => setModal(true)}>
21                <td onClick={e => e.stopPropagation()}>
22                    <Form.Check type={'checkbox'}
23                                className={'checkbox'}
24                                onChange={(e) => processEventId(e)}
25                    />
26                </td>
27                <td title={event.subject}>
28                    {trimLongString(event.subject)}
29                </td>
30                <td title={event.bodyPreview}>
31                    {trimLongString(checkForEmpty(event.bodyPreview))}
32                </td>
33                <td title={event.organizer.emailAddress.name}>
34                    {trimLongString(event.organizer.emailAddress.name)}
35                </td>
36                <td title={event.location.displayName}>
37                    {trimLongString(checkForEmpty(event.location.displayName))}
38                </td>
39                <td>
40                    {dateFormatter(event.start.dateTime)}
41                </td>
42            </tr>
43            <EventsDetail visible={modal} setVisible={setModal} event={event}/>
44        </>
45    );
46};
47
48export default CalendarItem;

Source: CalendarItem.jsx

import React, {useState} from 'react';
import {Form} from 'react-bootstrap';
import './table.css';
import EventsDetail from "../modal/EventsDetail";
import {checkForEmpty, dateFormatter, trimLongString} from "../filters";

const CalendarItem = ({event, saveEventId, popEventId}) => {
    const [modal, setModal] = useState(false);

    const processEventId = (e) => {
        if (e.target.checked) {
            saveEventId(event.id);
        } else {
            popEventId(event.id);
        }
    };

    return (
        <>
            <tr onClick={() => setModal(true)}>
                <td onClick={e => e.stopPropagation()}>
                    <Form.Check type={'checkbox'}
                                className={'checkbox'}
                                onChange={(e) => processEventId(e)}
                    />
                </td>
                <td title={event.subject}>
                    {trimLongString(event.subject)}
                </td>
                <td title={event.bodyPreview}>
                    {trimLongString(checkForEmpty(event.bodyPreview))}
                </td>
                <td title={event.organizer.emailAddress.name}>
                    {trimLongString(event.organizer.emailAddress.name)}
                </td>
                <td title={event.location.displayName}>
                    {trimLongString(checkForEmpty(event.location.displayName))}
                </td>
                <td>
                    {dateFormatter(event.start.dateTime)}
                </td>
            </tr>
            <EventsDetail visible={modal} setVisible={setModal} event={event}/>
        </>
    );
};

export default CalendarItem;

1import React from "react";
2import { graphql } from "gatsby";
3import Seo from "../components/common/seo";
4import { Artwork } from "../components/pageLayout/Artwork";
5import { toPlainText } from "../utils/common";
6import { trimLongString } from "../utils/common";
7
8export const query = graphql`
9  query ArtworkTemplateQuery($id: String!) {
10    artwork: sanityArtwork(id: { eq: $id }) {
11      id
12      title
13      shortTitle
14      slug {
15        current
16      }
17      publishedAt
18      artworkDate
19      mainImage {
20        asset {
21          id
22          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
23          url
24        }
25      }
26      artists {
27        name
28        year
29      }
30      material
31      dimensions {
32        depth
33        units
34        height
35        width
36      }
37      _rawDescription
38      description {
39        _type
40        _key
41        children {
42          _key
43          _type
44          marks
45          text
46        }
47      }
48      artworks {
49        ... on SanityImageItem {
50          alt
51          caption
52          asset {
53            gatsbyImageData
54          }
55        }
56        ... on SanityVideoItem {
57          url
58          caption
59        }
60      }
61    }
62  }
63`;
64
65const ArtworkTemplate = ({ data }) => {
66  const artwork = data.artwork;
67  const seoDescription = artwork.description
68    ? trimLongString(toPlainText(artwork.description), 300)
69    : "";
70  const seoImage = artwork.mainImage?.asset?.url;
71
72  return (
73    <>
74      <Seo
75        title={artwork.title}
76        image={seoImage}
77        description={seoDescription}
78      />
79      <Artwork artwork={artwork} />
80    </>
81  );
82};
83
84export default ArtworkTemplate;
85

Source: artwork.js

import React from "react";
import { graphql } from "gatsby";
import Seo from "../components/common/seo";
import { Artwork } from "../components/pageLayout/Artwork";
import { toPlainText } from "../utils/common";
import { trimLongString } from "../utils/common";

export const query = graphql`
  query ArtworkTemplateQuery($id: String!) {
    artwork: sanityArtwork(id: { eq: $id }) {
      id
      title
      shortTitle
      slug {
        current
      }
      publishedAt
      artworkDate
      mainImage {
        asset {
          id
          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
          url
        }
      }
      artists {
        name
        year
      }
      material
      dimensions {
        depth
        units
        height
        width
      }
      _rawDescription
      description {
        _type
        _key
        children {
          _key
          _type
          marks
          text
        }
      }
      artworks {
        ... on SanityImageItem {
          alt
          caption
          asset {
            gatsbyImageData
          }
        }
        ... on SanityVideoItem {
          url
          caption
        }
      }
    }
  }
`;

const ArtworkTemplate = ({ data }) => {
  const artwork = data.artwork;
  const seoDescription = artwork.description
    ? trimLongString(toPlainText(artwork.description), 300)
    : "";
  const seoImage = artwork.mainImage?.asset?.url;

  return (
    <>
      <Seo
        title={artwork.title}
        image={seoImage}
        description={seoDescription}
      />
      <Artwork artwork={artwork} />
    </>
  );
};

export default ArtworkTemplate;

1import React from "react";
2import { graphql } from "gatsby";
3import Seo from "../components/common/seo";
4import { Session } from "../components/pageLayout/Session";
5import { toPlainText } from "../utils/common";
6import { trimLongString } from "../utils/common";
7
8export const query = graphql`
9  query sessionTemplateQuery($id: String!) {
10    session: sanitySession(id: { eq: $id }) {
11      id
12      startDate
13      mainImage {
14        asset {
15          id
16          gatsbyImageData(layout: FULL_WIDTH)
17          url
18        }
19      }
20      title
21      slug {
22        current
23      }
24      _rawDescription
25      description {
26        _type
27        _key
28        children {
29          _key
30          _type
31          marks
32          text
33        }
34      }
35      artworks {
36        ... on SanityImageItem {
37          alt
38          caption
39          asset {
40            gatsbyImageData
41          }
42        }
43        ... on SanityVideoItem {
44          url
45          caption
46        }
47      }
48      links {
49        title
50        url
51      }
52      location {
53        lat
54        lng
55      }
56      downloads {
57        title
58        description
59        asset {
60          url
61        }
62      }
63      relatedArtworks {
64        artwork {
65          mainImage {
66            asset {
67              id
68              gatsbyImageData(layout: FULL_WIDTH, aspectRatio: 1.5)
69            }
70          }
71          title
72          shortTitle
73          slug {
74            current
75          }
76        }
77      }
78      relatedSession {
79        session {
80          title
81          slug {
82            current
83          }
84        }
85      }
86    }
87  }
88`;
89
90const SessionTemplate = ({ data }) => {
91  const session = data.session;
92
93  const seoDescription = session.description
94    ? trimLongString(toPlainText(session.description), 300)
95    : "";
96  // console.group("!!!!", seoDescription);
97  const seoImage = session.mainImage?.asset?.url;
98
99  return (
100    <>
101      <Seo
102        title={`Assemblage: ${session.title}`}
103        image={seoImage}
104        description={seoDescription}
105      />
106      <Session session={session} />
107    </>
108  );
109};
110
111export default SessionTemplate;
112

Source: session.js

import React from "react";
import { graphql } from "gatsby";
import Seo from "../components/common/seo";
import { Session } from "../components/pageLayout/Session";
import { toPlainText } from "../utils/common";
import { trimLongString } from "../utils/common";

export const query = graphql`
  query sessionTemplateQuery($id: String!) {
    session: sanitySession(id: { eq: $id }) {
      id
      startDate
      mainImage {
        asset {
          id
          gatsbyImageData(layout: FULL_WIDTH)
          url
        }
      }
      title
      slug {
        current
      }
      _rawDescription
      description {
        _type
        _key
        children {
          _key
          _type
          marks
          text
        }
      }
      artworks {
        ... on SanityImageItem {
          alt
          caption
          asset {
            gatsbyImageData
          }
        }
        ... on SanityVideoItem {
          url
          caption
        }
      }
      links {
        title
        url
      }
      location {
        lat
        lng
      }
      downloads {
        title
        description
        asset {
          url
        }
      }
      relatedArtworks {
        artwork {
          mainImage {
            asset {
              id
              gatsbyImageData(layout: FULL_WIDTH, aspectRatio: 1.5)
            }
          }
          title
          shortTitle
          slug {
            current
          }
        }
      }
      relatedSession {
        session {
          title
          slug {
            current
          }
        }
      }
    }
  }
`;

const SessionTemplate = ({ data }) => {
  const session = data.session;

  const seoDescription = session.description
    ? trimLongString(toPlainText(session.description), 300)
    : "";
  // console.group("!!!!", seoDescription);
  const seoImage = session.mainImage?.asset?.url;

  return (
    <>
      <Seo
        title={`Assemblage: ${session.title}`}
        image={seoImage}
        description={seoDescription}
      />
      <Session session={session} />
    </>
  );
};

export default SessionTemplate;