What can I use to replace useState() in a SSR component?

Unanswered

Sloth bear posted this in #help-forum

Sloth bearOP

2024-03-09T12:38:30.000Z

So, I'm trying to make a button which will be used by user to change data alignment.(like, list or grid)
But also, I'm using async function to fetch data from a gist(this is temporary) in other component and importing it from the component above.
So the code is gonna be like this,

4 Replies

Sloth bearOP

2024-03-09T12:39:03.000Z

page.tsx

import DirectoryFilter from '@/ui/filter/directoryfilter';
import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
import React, { useState } from 'react';
import AppsIcon from '@mui/icons-material/Apps';
import ListAltIcon from '@mui/icons-material/ListAlt';
import TblCurrentDirectory from '@/ui/list/tbl_currentdirectory';

export default function Page() {
    const [typeSelected, setTypeSelected] = useState('');
    const [modifiedSelected, setModifiedSelected] = useState('');
    const [alignment, setAlignment] = useState<string | null>('list');

    const fileType: Array<[string, string]> = [
        ['Folder', 'folder'],
        ['Picture', 'picture'],
        ['Text', 'text'],
    ];

    const modified: Array<[string, string]> = [
        ['Today', 'today'],
        ['Last one week ', 'week'],
        ['Last one month', 'month'],
        ['This year', 'thisyear'],
        ['Last year', 'lastyear'],
    ];

    const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
        setAlignment(newAlignment);
    };

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', p: 3 }}>
            <Box>
                <Box sx={{ pt: 1, pb: 1.5, px: 1 }}>
                    <Box>
                        <Typography variant="h4" component="h4">
                            directory
                        </Typography>
                    </Box>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Box sx={{ display: 'flex' }}>
                        <Box>{DirectoryFilter('Type', fileType, setTypeSelected, typeSelected)}</Box>
                        <Box>{DirectoryFilter('Modified', modified, setModifiedSelected, modifiedSelected)}</Box>
                    </Box>
                    <Box height="fit-content" sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
                        <ToggleButtonGroup
                            value={alignment}
                            exclusive
                            onChange={handleAlignment}
                            aria-label="directory alignment">
                            <ToggleButton value="list" aria-label="list" sx={{ boxSizing: 'content-box' }}>
                                <ListAltIcon />
                            </ToggleButton>
                            <ToggleButton value="apps" aria-label="apps" sx={{ boxSizing: 'content-box' }}>
                                <AppsIcon />
                            </ToggleButton>
                        </ToggleButtonGroup>
                    </Box>
                </Box>
            </Box>
            <Box>
                <TblCurrentDirectory />
            </Box>
        </Box>
    );
}

tbl_currectDirectory.tsx

import { getFetchedDirectory } from '@/lib/data';
import { FetchedDirectory } from '@/lib/types';
import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Box } from '@mui/material';

export default async function TblCurrentDirectory() {
    const FILENAME = ['name', 'Name'];
    const OWNER = ['owner', 'Owner'];
    const MODIFIED = ['modified', 'Last modified'];
    const FILESIZE = ['size', 'File size'];

    const fetchedData: FetchedDirectory = await getFetchedDirectory();

    const folderList = fetchedData.folderList.map((item, index) => {
        return {
            id: `TBL_CURRENTDIRECTORY_FOLDER_${index}`,
            [FILENAME[0]]: item.name,
            [OWNER[0]]: item.owner,
            [MODIFIED[0]]: item.modified,
            [FILESIZE[0]]: item.size ?? '',
        };
    });

    const fileList = fetchedData.fileList.map((item, index) => {
        return {
            id: `TBL_CURRENTDIRECTORY_FILE_${index}`,
            [FILENAME[0]]: item.name,
            [OWNER[0]]: item.owner,
            [MODIFIED[0]]: item.modified,
            [FILESIZE[0]]: item.size ?? '',
        };
    });

    return (
        <Box>
            <TableContainer component={Box}>
                <Table stickyHeader aria-label="sticky table" sx={{ minWidth: 650 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell>{FILENAME[1]}</TableCell>
                            <TableCell>{OWNER[1]}</TableCell>
                            <TableCell>{MODIFIED[1]}</TableCell>
                            <TableCell>{FILESIZE[1]}</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {folderList.map(item => (
                            <TableRow
                                key={item.id}
                                hover
                                sx={{ color: 'red', '&:last-child td, &:last-child th': { border: 0 } }}>
                                <TableCell>{item[FILENAME[0]]}</TableCell>
                                <TableCell>{item[OWNER[0]]}</TableCell>
                                <TableCell>{item[MODIFIED[0]]}</TableCell>
                                <TableCell>{item[FILESIZE[0]]}</TableCell>
                            </TableRow>
                        ))}
                        {fileList.map(item => (
                            <TableRow
                                key={item.id}
                                hover
                                sx={{ color: 'red', '&:last-child td, &:last-child th': { border: 0 } }}>
                                <TableCell>{item[FILENAME[0]]}</TableCell>
                                <TableCell>{item[OWNER[0]]}</TableCell>
                                <TableCell>{item[MODIFIED[0]]}</TableCell>
                                <TableCell>{item[FILESIZE[0]]}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
}

However, the problem is that I can't use the both SRR component and async function together, So I need to select a option between deleting 'use client' and give up to use useState, or not to use async function and find another solutions...
So, I've been searching for this problem like 5 hours and I couldn't get a good idea...(but the good thing is that, the fetch wasn't even working at the very first time but now its working good!)

I think it is better to replace useState() function rather than latter one because you gonna need to use fetch() to fetch data from the server anyways... So it will be sooo grateful if you can give me some advice!