@apollo/react-hooks#useQuery JavaScript Examples

export default function RatingsChart() {
  const theme = useTheme()

  const { loading, error, data } = useQuery(GET_DATA_QUERY)
  if (error) return <p>Sign in to view</p>
  if (loading) return <p>Loading</p>

  return (
    <React.Fragment>
      <Title>Average City Property Value</Title>
      <ResponsiveContainer>
        <BarChart
          data={data.cityValues}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="city" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              City
            </Label>
          </YAxis>
          <Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
        </BarChart>
      </ResponsiveContainer>
    </React.Fragment>
  )
}

export default function PostList(props) {
  let params, search = "";
  if (props.location.search !== "") {
      params = queryString.parse(props.location.search)
      search = params.search;  
  } 
  let query = GET_FILTERED_BLOG_POSTS;
  if (search === "") {
    query = GET_ALL_BLOG_POSTS;
  }

  const {loading, error, data } = useQuery(query, {variables: { search }, fetchPolicy: "network-only"});
  if (loading) return "Fetching Posts...";
  if (error) return `Error: ${error}`;
  const posts = data.queryPost;
        
  return (
          <div className="container">
            {posts.map(post => (
              <Post key={post.postID} post={post} />
            ))}
          </div>
    );
}

BusinessProfilePage = () => {
  const { query } = useRouter();
  const { loading, error, data } = useQuery(businessBySlug, {
    variables: { businessSlug: query.slug },
  });
  const classes = useStyles();
  if (error) return <h1>Error...</h1>;
  if (loading) return <span>Loading...</span>;
  if (data && data.allBusinesses.length > 0) {
    const business = data.allBusinesses[0];
    console.log(business);
    console.log(classes.heroBanner);
    return (
      <HomePageLayout>
        <AppNav />
        <HeroHeader image={business.heroImage.publicUrl} />
        <Container className={classes.root} maxWidth="lg">
          <h1>Business BY Slug</h1>
        </Container>
      </HomePageLayout>
    );
  } else {
    return <h1>Not found ${query.slug}</h1>;
  }
}

Home = () => {
  const dispatch = useDispatch();
  const { loading, error, data } = useQuery(GET_POKEMONS, {
    variables: { first: 100 },
  });

  if (loading) return <p>Loading ...</p>;
  if (error) return <pre>{error}</pre>;
  if (data) {
    dispatch({ type: 'SET_POKEMONS', payload: data.pokemons });
  }
  return (
    <div className="container pokemons">
      <PokemonListContainer />
    </div>
  );
}

Contributors = () => {
    const classes = useStyles();

    const { loading, error, data } = useQuery(repository(), {
        context: { clientName: "github" }
    });
    if (error) console.log(error)
    if (error || !data)
        return (<Fragment></Fragment>)

    return (
        <Grid container className={classes.subtitle}>
            <Grid item xs={12}>
                <Typography variant="h6" color="textSecondary" paragraph align="center">Our contributors:</Typography>
            </Grid>
            <Grid item xs={12}>
                <Grid container direction="row" justify="center" spacing={2}>
                    {loading ? <CircularProgress align="center" /> : <Fragment />}
                    {data && [...new Map([...data.contributors_subgraph, ...data.contributors_fyi].filter(o => { return o.login != "dependabot[bot]" }).map(o => [o.login, o])).values()].map(edge =>

                        <Grid item key={edge.login}>
                            <Link href={"https://github.com/" + edge.login}>

                                <ContributorAvatar
                                    tooltip
                                    clickable
                                    contributor={edge}
                                />
                            </Link>
                        </Grid>
                    )}

                </Grid>
            </Grid>
        </Grid>
    )
}

useSafeQuery = (query, opts) => {
  const { loading, error, data, ...props } = useQuery(query, {
    fetchPolicy: 'cache-and-network',
    ...opts,
  })

  if ((data || error) && !loading) {
    const resolvedError = resolveError({ error, data })

    if (resolvedError) {
      return { error: constructUserFriendlyError(resolvedError), ...props }
    }
  }

  return { loading, data, ...props }
}

function Home() {
  const { user } = useContext(AuthContext);
  const {
    loading,
    data: { getPosts: posts }
  } = useQuery(FETCH_POSTS_QUERY);

  return (
    <Grid columns={1}>
      <Grid.Row className="page-title">
        <h1 id="quarantime">QUARANTIME</h1>
      </Grid.Row>
      <Grid.Row>
        {user && (
          <Grid.Column>
            <PostForm />
          </Grid.Column>
        )}
        {loading ? (
          <h1>Please wait..</h1>
        ) : (
          <Transition.Group>
            {posts &&
              posts.map((post) => (
                <Grid.Column key={post.id} style={{ marginBottom: 20, marginTop: 20 }}>
                  <PostCard post={post} />
                </Grid.Column>
              ))}
          </Transition.Group>
        )}
      </Grid.Row>
    </Grid>
  );
}

function ListPageContainer(props) {
	const { loading, error, data } = useQuery(FIND_ALL_INSTAPOSTS, {
		pollInterval: 500,
	});

	return (
		<Fragment>
			{loading && <Loading />}
			{error && <div>{`encountered an error: ${error}`}</div>}
			{data && <ListPage {...data} {...props} />}
		</Fragment>
	);
}

export default function ListTeamContainer() {
  const { teams } = useSelector((state) => state.team);
  const { data, loading } = useQuery(getTeamsQuery);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!loading) dispatch(setTeams({ teams: data?.teams }));
  }, [data, loading]);

  return teams.length > 0 ? <ListTeam teams={teams} /> : <EmptyTeam />;
}

export default function QuestionList(props) {
  let params,
    search = "";
  if (props.location.search !== "") {
    params = queryString.parse(props.location.search);
    search = params.search;
  }
  let query = GET_FILTERED_QUESTIONS;
  let selectionSet = "queryQuestion";
  if (search === "") {
    query = GET_TOP_QUESTIONS;
    selectionSet = "myTopQuestions";
  }

  const { loading, error, data } = useQuery(query, {
    variables: { search },
    fetchPolicy: "network-only"
  });
  if (loading) return "Fetching Questions...";
  if (error) return `Error: ${error}`;
  const questions = data[selectionSet];
  
  return (
    <div className="container">
      <Card.Group itemsPerRow={1}>
        {questions.map(question => (
          <Question key={question.text} question={question} />
        ))}
      </Card.Group>
    </div>
  );
}

CategoryGrid = ({ searchFocus }) => {
  const history = useHistory();
  const categories = useQuery(GET_CATEGORIES);

  const handleCategoryClick = id => {
    history.push(`/category/${id}`);
  };
  return (
    <>
      {categories && categories.loading && <Spinner />}
      {categories && !categories.loading && (
        <GridContainer searchFocus={searchFocus}>
          {categories.data.families.map((category, key) => (
            <GridCard
              image={
                category.image_url.length > 0
                  ? category.image_url
                  : placeholderImg
              }
              name={category.description}
              key={key}
              onClick={() => handleCategoryClick(category.family_id)}
            />
          ))}
        </GridContainer>
      )}
    </>
  );
}

export default function RecentReviews() {
  const { loading, error, data } = useQuery(GET_RECENT_REVIEWS_QUERY)
  if (error) return <p>Error</p>
  if (loading) return <p>Loading</p>

  return (
    <React.Fragment>
      <Title>Most Expensive Properties</Title>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>Address</TableCell>
            <TableCell>Subdivision Name</TableCell>
            <TableCell>Bedrooms</TableCell>
            <TableCell>Sqft</TableCell>
            <TableCell align="right">Total Value</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.Property.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.address}</TableCell>
              <TableCell>{row.in_subdivision[0].name}</TableCell>
              <TableCell>{row.bedrooms}</TableCell>
              <TableCell>{row.sqft}</TableCell>
              <TableCell align="right">{row.TotalValue}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </React.Fragment>
  )
}

function ProjectsComponent(props) {
  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;

  if (data) {
    return (
      <Card>
        <h1>Projects</h1>
        {data.getDraft.project.map((project) => {
          return (
            <div key={project.id}>
              <ProjectCard
                projects={project}
                updateProjectData={props.updateProjectData}
              />
            </div>
          );
        })}
      </Card>
    );
  }
}

export default function Deposits() {
  const classes = useStyles()

  const { loading, error, data } = useQuery(GET_COUNT_QUERY)
  if (error) return <p>Sign in to view</p>
  return (
    <React.Fragment>
      <Title>Total Properties</Title>
      <Typography component="p" variant="h4">
        {loading ? 'Loading...' : data.propertyCount}
      </Typography>
      <Typography color="textSecondary" className={classes.depositContext}>
        properties found
      </Typography>
      <div>
        <Link to="/users" className={classes.navLink}>
          View users
        </Link>
      </div>
    </React.Fragment>
  )
}

Blog = () => {
  const [posts, setPosts] = useState([]);
  const { loading, error, data } = useQuery(GET_POSTS);

  useEffect(() => {
    if (!loading) {
      if (error) {
        console.error(error)
      }

      if (data) {
        setPosts(data?.repository?.issues?.nodes)
      }
    }
  }, [loading, error, data]);

  return (
    <>
      <Header />
      <BlogContainer>
        {
          loading
          ? <Loader />
          : posts.map((v, i) => {
              return <Card blog={v} key={i} />;
            })
        }
      </BlogContainer>
    </>
  );
}

function JobHistoryComponent(props) {
  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;
  if (data) {
    return (
      <Card>
        <h1>Job History</h1>
        {data.getDraft.work.map((job) => {
          return (
            <div key={job.id}>
              <JobHistoryCard job={job} updateWorkData={props.updateWorkData} />
            </div>
          );
        })}
      </Card>
    );
  }
}

export default function DefaultPod({ podName }) {
  const router = useRouter()

  let networkQuery = useQuery(gql`
  query {
    network @client {
      name
      chainId
    }
  }
`)

  let contractQuery = useQuery(gql`
    query {
      contract(name: podName) @client
    }
  `)

  let networkName

  if (networkQuery.data) {
    networkName = networkQuery.data.network.name
  }

  let podMessage = null
  if (contractQuery.data) {
    const { contract } = contractQuery.data
    podMessage = <p>
      <strong>{networkName} {podName} is at</strong>: {contract.address} <Link href="/pods/[podAddress]" as={`/pods/${contract.address}`}><a className='text-blue-500 hover:text-blue-300 underline trans'>View</a></Link>
    </p>
  }

  return (
    <div className='mb-8'>
      <p>Current Network: <b>{networkName}</b></p>
      {podMessage}
    </div>
  )
}

export default function QuestionList(props) {
  let params,
    search = "";
  if (props.location.search !== "") {
    params = queryString.parse(props.location.search);
    search = params.search;
  }
  let query = GET_FILTERED_QUESTIONS;
  if (search === "") {
    query = GET_TOP_QUESTIONS;
  }

  const { loading, error, data } = useQuery(query, {
    variables: { search },
    fetchPolicy: "network-only"
  });
  if (loading) return "Fetching Questions...";
  if (error) return `Error: ${error}`;
  const questions = data.queryQuestion;
  
  return (
    <div className="container">
      <Card.Group itemsPerRow={1}>
        {questions.map(question => (
          <Question key={question.text} question={question} />
        ))}
      </Card.Group>
    </div>
  );
}

function EducationComponent(props) {
  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;

  if (data) {
    return (
      <Card>
        <h1>Education</h1>
        {data.getDraft.education.map((education) => {
          return (
            <div key={education.id}>
              <EducationCard
                education={education}
                updateEducationData={props.updateEducationData}
              />
            </div>
          );
        })}
      </Card>
    );
  }
}

function Pod() {
  const router = useRouter()
  const { podAddress } = router.query

  const accountQuery = useQuery(gql`
    query {
      account @client
    }
  `)
  const { account } = accountQuery.data || {}

  return (
    <div className='container mx-auto mt-12'>
      <div className='mb-8'>
        <span className='text-blue-500 underline cursor-pointer' onClick={() => router.push('/')}>Back</span>
      </div>
      <PodUserDetails podAddress={podAddress} userAddress={account} />
      {account && 
        <>
          <div className='mb-8'>
            <PodJoinForm podAddress={podAddress} userAddress={account} />
          </div>
          <div className='mb-8'>
            <PodWithdrawPendingForm podAddress={podAddress} userAddress={account} />
          </div>
          <div className='mb-8'>
            <PodRedeemToPoolForm  podAddress={podAddress} userAddress={account} />
          </div>
          <div className='mb-8'>
            <PodRedeemForm  podAddress={podAddress} userAddress={account} />
          </div>
        </>
      }
    </div>
  )
}

useImperativeQuery = (query) => {
  const { refetch } = useQuery(query, { skip: true });
  const imperativelyCallQuery = (variables) => {
    return refetch(variables);
  };
  return imperativelyCallQuery;
}

/*componentDidMount(){
      console.log("Executed after the component is mounted ");
      this.GetMentors();
  }*/

  render() {
    const GetMentors=()=> {
      const { data, loading, error } = useQuery(GET_MENTORS);
      return(
        <AgGridReact
        columnDefs={this.state.columnDefs}
        rowData={(loading || error)?data:data.coordinators}
        enableCellTextSelection={true}
        ensureDomOrder={true}
        >
      </AgGridReact>
      )  
    }
    return(
      <div>
        <div className="page-header">
          <h3 className="page-title">
            Mentors
          </h3>
          <nav aria-label="breadcrumb">
            <ol className="breadcrumb">
              <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>ICS Team</a></li>
              <li className="breadcrumb-item active" aria-current="page">Mentors</li>
            </ol>
          </nav>
        </div>
        <div className="row">
          <div className="col-12 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
              <div style={{ height: '420px  ', width: '100%' }} className="ag-theme-alpine">
              <GetMentors/>
              </div>
              </div>
              </div>
          </div>
          </div>
          <label>
        Roll No :&nbsp;&nbsp;
      <input type="text"/>
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <button>Search Mentor</button>
      </div>
    );
  }

export default function BrowseRequests({ minimal = false }) {
  const classes = useStyles();
  const [pageType, setPageType] = React.useState("forward");
  const [endCursor, setEndCursor] = React.useState("");
  const [startCursor, setStartCursor] = React.useState("");
  const [searchValue, setSearchValue] = React.useState("");

  const { search } = useLocation();
  const isSuccess = search.includes("success=true");
  const resultsPerPage = 20;

  const { loading, error, data } = useQuery(TOTAL_PROVIDERS, {
    variables: {
      first: pageType === "forward" ? resultsPerPage : null,
      after: pageType === "forward" ? endCursor : null,
      last: pageType === "back" ? resultsPerPage : null,
      before: pageType === "back" ? startCursor : null,
      city: searchValue,
    },
  });

  const pageNext = (endCursor) => {
    setPageType("forward");
    setEndCursor(endCursor);
  };

  const pagePrevious = (startCursor) => {
    setPageType("back");
    setStartCursor(startCursor);
  };

  const changeSearchValue = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    <Box mb={6} mt={10}>
      {isSuccess && (
        <Container className={classes.heroContent}>
          <Box mb={4} textAlign="center">
            <Typography variant="h5" className={classes.successText}>
              Thank you so much for volunteering!
            </Typography>
            <Typography variant="subtitle1" className={classes.successText}>
              You should hear back from the medical provider soon.
            </Typography>
          </Box>
        </Container>
      )}
      {!minimal && <VolunteerInstructions />}
      <Container>
        <Box className={classes.search}>
          <div className={classes.searchIcon}>
            <SearchIcon />
          </div>
          <InputBase
            placeholder="Search by city..."
            classes={{
              root: classes.inputRoot,
              input: classes.inputInput,
            }}
            inputProps={{ "aria-label": "search by city" }}
            value={searchValue}
            onChange={changeSearchValue}
          />
        </Box>
      </Container>
      <ProviderList
        providers={(data && data.providers.edges) || []}
        pageInfo={data && data.providers.pageInfo}
        onNext={pageNext}
        onPrevious={pagePrevious}
      />
      <Box mt={6}>
        <SocialDistanceNotice />
      </Box>
    </Box>
  );
}

TermsOfUse = () => {
  const classes = useStyles()
  const [tab, setTab] = useState(0)
  const { data: { lifebankcoin, lifebankcode, consent2life } = {} } = useQuery(
    GET_CONTRACTS_QUERY
  )

  return (
    <>
      <Tabs
        value={tab}
        onChange={(event, newValue) => setTab(newValue)}
        aria-label="simple tabs example"
        className={classes.tabsWrapper}
      >
        <Tab label="lifebankcoin" />
        <Tab label="lifebankcode" />
        <Tab label="consent2life" />
      </Tabs>
      {tab === 0 && lifebankcoin && (
        <Box className={classes.wrapper}>
          <RicardianContract
            name={lifebankcoin.name}
            hash={lifebankcoin.hash}
            abi={lifebankcoin.abi}
          />
        </Box>
      )}
      {tab === 1 && lifebankcode && (
        <Box className={classes.wrapper}>
          <RicardianContract
            name={lifebankcode.name}
            hash={lifebankcode.hash}
            abi={lifebankcode.abi}
          />
        </Box>
      )}
      {tab === 2 && consent2life && (
        <Box className={classes.wrapper}>
          <RicardianContract
            name={consent2life.name}
            hash={consent2life.hash}
            abi={consent2life.abi}
          />
        </Box>
      )}
    </>
  )
}

export default function NotesList({ user, selection, seek }) {
  const { loading, error, data, refetch } = useQuery(fetchNotes, {
    variables: {
      user_id: user.sub,
      video_id: selection.snippet.resourceId.videoId,
    },
  });

  const formatTimestamp = (s) => {
    let ms = s * 1000;
    let seconds = Math.floor((ms / 1000) % 60),
      minutes = Math.floor((ms / (1000 * 60)) % 60),
      hours = Math.floor((ms / (1000 * 60 * 60)) % 24);

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    let time = hours + ":" + minutes + ":" + seconds;
    return time;
  };

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <div className="notes-title has-text-left">
        <h3>
          <b>Your Notes</b>
        </h3>
      </div>
      <div className="notes-container ">
        <ul className="notes-list has-text-left">
          {data.notes.map((note) => (
            <li key={note.id} className="note">
              {/* Clicking accesses handleSeekTo in parent; causes video to jump to specific point in video */}
              <a onClick={() => seek(note.timestamp)}>
                {formatTimestamp(note.timestamp)}
              </a>
              - {note.note}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default function PathwayPreview(props) {
    const { pathwayId } = props
    const FETCH_CONTENT_PATHWAY = gql`
        query {
            Pathway(id: "${pathwayId}") {
                id
                name
                steps {
                    id
                    name
                    time
                    index
                    isPathway
                    content {
                        id
                        title
                        content
                    }
                    pathway {
                        id
                    }
                }
            }
        }
    `
    const { data, loading, error } = useQuery(FETCH_CONTENT_PATHWAY, {
        variables: { pathwayId },
    })

    if (loading) return 'loading...'
    if (error) return 'ERROR fetching pathway'
    if ('Step' in data) {
        return
    }
    console.log(data)
    if (data.Pathway.length <= 0) return null
    let link = `/pathway?id=${data.Pathway[0].id}`

    let content = '# ' + data.Pathway[0].name

    data.Pathway[0].steps.forEach((step) => {
        content += '\n - ** ' + step.name + '** \n'
    })

    return (
        <Fragment>
            <div>
                <ReactMarkdown
                    source={content}
                    escapeHtml={false}
                    renderers={{ code: CodeBlock }}
                />
                <Link target='_blank' to={link} className={classes.link}>
                    View Full Pathway
                    <MdArrowRoundForward
                        fontSize='20px'
                        className={classes.icon}
                    />
                </Link>
            </div>
        </Fragment>
    )
}

// Global styles and component-specific styles.

function Layout({ children }) {
  const { user, loading, error } = useFetchUser();
  const { data, loading: loadingId, error: idError } = useQuery(fetchUser, {
    variables: {
      sub: user ? user.sub : null,
    },
  });

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(updateCurrentUser(user));
    if (data) {
      dispatch(updatedUserId(data.users[0].id));
    }
  });

  return (
    <div>
      <div className="main-view is-flex is-hidden-touch">
        <div className="columns" style={{ width: "100%" }}>
          <div
            className="column is-2 is-hidden-mobile is-flex"
            style={{ justifyContent: "center" }}
          >
            <Sidebar user={user} loading={loading} className="is-flex" />
          </div>
          <div className="column view-column is-10">
            <View>{children}</View>
          </div>
        </div>
      </div>
      <div className="mobile-view is-hidden-desktop">
        <View style={{ position: "relative" }}>{children}</View>
        <BottomBar user={user} loading={loading} className="is-hidden-tablet" />
      </div>
    </div>
  );
}

render () {
    const GetCoordinators=()=> {
      const { data, loading, error } = useQuery(GET_COORDINATORS);
      return(
        <AgGridReact
        columnDefs={this.state.columnDefs}
        rowData={(loading || error)?data:data.coordinators}
        enableCellTextSelection={true}
        ensureDomOrder={true}
        >
      </AgGridReact>
      )  
    }
    return (
      <div>
        <div className="page-header">
          <h3 className="page-title">
            Coordinators
          </h3>
          <nav aria-label="breadcrumb">
            <ol className="breadcrumb">
              <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>ICS Team</a></li>
              <li className="breadcrumb-item active" aria-current="page">Coordinators</li>
            </ol>
          </nav>
        </div>
        <div className="row">
          <div className="col-12 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
              <div style={{ height: '420px  ', width: '100%' }} className="ag-theme-alpine">
                <GetCoordinators/>
        </div>
              </div>
              </div>
          </div>
          </div>
      </div>
    );
  }

function Subscriptions() {
  const user = useSelector((state) => state.user.currentUser);
  const userId = useSelector((state) => state.user.userId);
  const { loading, error, data } = useQuery(fetchUserPlaylists, {
    variables: { user_id: userId ? userId : null },
  });

  return (
    <Layout className="is-flex">
      <div
        className="subscriptions-view is-flex"
        style={{ flexDirection: "column" }}
      >
        <BackButton />
        {user ? (
          <h3 className="subscriptions-header title is-size-3 is-size-5-touch has-text-centered">
            Here are your tutorials!
          </h3>
        ) : (
          "Error retrieving user!"
        )}
        <br />

        {loading ? (
          "Loading your library"
        ) : data.user_playlists.length == 0 ? (
          <div>
            <h3 className="page-header is-size-3">
              Add your first <Link href="/topics">tutorial!</Link>
            </h3>
          </div>
        ) : (
          <ul className="subscriptions-list">
            {data.user_playlists.map((up) => (
              <li key={up.playlist.id}>
                <TutorialCard tutorial={up} />
              </li>
            ))}
          </ul>
        )}
      </div>
    </Layout>
  );
}