{"version":3,"file":"pageindex-5df2f66e.js","sources":["../../../../react/src/typescripts/parts/projects/index/main.tsx","../../../../react/src/typescripts/parts/projects/index/pageindex.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { getValueFromCookie } from 'tsRoot/actions/cookie'\nimport graphqlQuery from 'tsRoot/actions/graphql'\nimport { projectApply } from 'tsRoot/actions/midworks-freelance/project'\nimport { getId, getParam, getMultiParams } from 'tsRoot/actions/url'\n\n// import { paginationJsx } from 'tsRoot/components/pagination'\n\nimport { env } from 'tsRoot/constants'\n\ninterface urlQueryParams {\n  page: string  | null,\n  skillName?: string | null,\n  skillId?: string | null,\n  payMin?: string | null,\n  feature?: string | null,\n  workingDayMax?: string | null\n  keywords?: string | null\n  order?: 'updated_at' | 'pay_min' | null\n  pref_id?: string | null; // 都道府県ID\n  skills?: string[] | null, // スキルID\n  occupations?: string[] | null, // 職種ID\n  work_styles?: string[] | null // 働き方ID\n  pay_min?: string | null,\n  pay_max?: string | null,\n}\n\nasync function getData(params: urlQueryParams) {\n  let condition = ''\n  condition = `page: ${params.page || 1}, limit: 25`\n  condition = condition + `, order: \"${params.order || 'updated_at'} DESC\"` // updated_at | pay_min\n\n  if(params.skillName) {\n    let skillNames = '['\n    params.skillName.split(',').forEach((name: string, idx: number) => {skillNames = skillNames + `${idx != 0 ? ',' : ''}\"${name}\"`})\n    skillNames = skillNames + ']'\n    condition = condition + `, skillNames: ${skillNames}`\n  }\n\n  if(params.skillId) condition = condition + `, skillIds: \"${params.skillId}\"`\n  if(params.payMin) condition = condition + `, payMin: ${params.payMin}`\n  if(params.feature) condition = condition + `, feature: \"${params.feature}\"`\n  if(params.workingDayMax) condition = condition + `, workingDayMax: ${params.workingDayMax}`\n  if(params.keywords) condition = condition + `, keywords: \"${params.keywords}\"`\n\n  const query = `\n  {\n    projects(${condition}){\n      count\n      items{\n        id\n        hasUserApplied\n      }\n    }\n  }\n  `\n\n  const res = await graphqlQuery(query)\n  return res\n}\n\nasync function getProjects(ids: number[]) {\n  const query = `\n  {\n    projects(id: [${ids.join(',')}]) {\n      items {\n        id\n        hasUserApplied\n      }\n    },\n  }\n  `\n\n  const res = await graphqlQuery(query)\n  return res\n}\n\nconst projectApplicationJsx = (loginId: string, projectId: string | number, hasUserApplied: boolean, setState: React.Dispatch<React.SetStateAction<never[]>> ) => {\n  if(loginId && loginId != 'false' && hasUserApplied) {\n    // submit済み\n    return <li><a className=\"p-jobSummaryBoard__button2 -done\"><span>応募済み</span></a></li>\n  } else if (loginId && loginId != 'false') {\n    // ログイン済みでお気に入り登録をデータ登録する\n    return <li onClick={() => {projectApply(projectId, setState)}} style={{cursor: 'pointer'}}><a className=\"p-jobSummaryBoard__button2 ga_register_projectslist\"><span>応募する</span></a></li>\n  } else {\n    // 未ログインで会員登録に遷移させる\n    if (projectId) {\n      return <li style={{cursor: 'pointer'}}><a href={\"/users/registration?project_id=\" + projectId} className=\"p-jobSummaryBoard__button2 ga_register_projectslist\"><span>応募する</span></a></li>\n    }\n    else {\n      return <li style={{cursor: 'pointer'}}><a href=\"/users/registration\" className=\"p-jobSummaryBoard__button2 ga_register_projectslist\"><span>応募する</span></a></li>\n    }\n  }\n}\n\nconst sortedProjectUrl = (params: urlQueryParams, sortKey: 'updated_at' | 'pay_min', firstPage?: boolean, withOutPage?: boolean) => {\n  const query = new URLSearchParams()\n\n  if(location.href.indexOf('/projects/skills/') != -1) {\n    // /projects/skills以下の場合\n    query.append('order', sortKey)\n    return `${location.pathname}?${query.toString()}`\n  } else {\n    // /projectsの場合\n    if(params.page && !withOutPage) query.append('page', firstPage ? '1' : params.page)\n    if(params.skillName)     query.append('skill', params.skillName)\n    if(params.payMin)        query.append('payMin', params.payMin)\n    if(params.feature)       query.append('feature', params.feature)\n    if(params.workingDayMax) query.append('workingDayMax', params.workingDayMax)\n    if(params.keywords)      query.append('keywords', params.keywords)\n    if(params.pay_min)        query.append('pay_min', params.pay_min)\n    if(params.pay_max)        query.append('pay_max', params.pay_max)\n\n    if (params.pref_id) query.append('pref_id', params.pref_id);\n    params.skills?.forEach((skill) => query.append(\"skills[]\", skill));\n    params.occupations?.forEach((occupation) =>\n      query.append(\"occupations[]\", occupation)\n    );\n    params.work_styles?.forEach((workStyle) =>\n      query.append(\"work_styles[]\", workStyle)\n    );\n\n    query.append('order', sortKey)\n    return `/projects?${query.toString()}`\n  }\n}\n\n/*\nconst paginationParams = (params: urlQueryParams, sortKey: 'updated_at' | 'pay_min') => {\n  const query = new URLSearchParams()\n\n  query.append('order', sortKey)\n  if(params.skillName)     query.append('skill', params.skillName)\n  if(params.payMin)        query.append('payMin', params.payMin)\n  if(params.feature)       query.append('feature', params.feature)\n  if(params.workingDayMax) query.append('workingDayMax', params.workingDayMax)\n  if(params.keywords)      query.append('keywords', params.keywords)\n\n  return query.toString()\n}\n*/\n\nconst render = async(setState: React.Dispatch<React.SetStateAction<never[]>>) => {\n  const loginId = getValueFromCookie(`midworks_mypage_${env}_login`)\n\n  // クエリパラメータを取得\n  const params = {\n    page: getParam('page'),\n    skillName: getParam('skill'), // /projects?skill=PHP といった指定で利用\n    skillId: getId() == 'projects' ? '' : getId(), // /projects/skills/1  といった指定で利用\n    payMin: getParam('payMin'),\n    feature: getParam('feature'),\n    workingDayMax: getParam('workingDayMax'),\n    keywords: getParam('keywords'),\n    order: getParam('order'),\n    pref_id: getParam('pref_id'), // 都道府県ID\n    skills: getMultiParams('skills'),\n    occupations: getMultiParams('occupations'),\n    work_styles: getMultiParams('work_styles'), // 働き方IDリスト（配列）\n    pay_min: getParam('pay_min'),\n    pay_max: getParam('pay_max'),\n  } as urlQueryParams\n\n  // 新着順\n  const sortUpdatedElement = document.getElementById('projectSortUpdated')\n  if(sortUpdatedElement && (params.order == 'updated_at' || params.order == null)) sortUpdatedElement.classList.add('-active')\n  if(sortUpdatedElement) sortUpdatedElement.setAttribute('href', `${sortedProjectUrl(params, 'updated_at', true)}`)\n\n  // 単価順\n  const sortPayElement = document.getElementById('projectSortPay')\n  if(sortPayElement && params.order == 'pay_min') sortPayElement.classList.add('-active')\n  if(sortPayElement) sortPayElement.setAttribute('href', `${sortedProjectUrl(params, 'pay_min', true)}`)\n\n  // 応募ボタン\n  const projectDataElement = document.getElementById('projects-data')\n  if (projectDataElement && projectDataElement.dataset.projects) {\n    const projects = JSON.parse(projectDataElement.dataset.projects);\n    const ids = projects.map((project: { id: number }) => project.id);\n    const data = await getProjects(ids);\n    data.projects.items.forEach((project: any) => {\n      const applicationElement = document.getElementById(`application_button_${project.id}`)\n      if(applicationElement) createRoot(applicationElement).render(projectApplicationJsx(loginId, project.id, project.hasUserApplied, setState))\n    })\n  }\n\n}\n\n/** エクスポートするJSXのコンポーネント */\nexport const Main = () => {\n  const [applyId, setApplyId] = React.useState([]) // 案件応募を行った際のIDを格納して再 render を行う\n\n  React.useEffect(() => {\n    render(setApplyId)\n  }, [applyId])\n  // useEffectのReactDOMでviewの一部分だけ書き換えるようにreactを使っているため、ここではreturnを空で返す\n  return (<></>);\n}\n","/** imports */\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client'\n// our components\nimport { Main } from './main'\n// import { SnackbarProviderComponent } from '../../../components/snackbarProviderComponent'\n\n/** DOMへのrender */\n// <div id='projectIndex'/> のコンポーネントが必要なことに注意\nconst rootElement = document.getElementById('projectIndex');\n\nif (rootElement) {\n  const root = createRoot(rootElement)\n  root.render(\n    // <SnackbarProviderComponent>\n      <Main />\n    // </SnackbarProviderComponent>\n  )\n} else {\n  console.warn('トップページのコンテンツ表示用の要素が存在しません')\n}"],"names":["getProjects","ids","query","graphqlQuery","projectApplicationJsx","loginId","projectId","hasUserApplied","setState","jsx","projectApply","sortedProjectUrl","params","sortKey","firstPage","withOutPage","_a","skill","_b","occupation","_c","workStyle","render","getValueFromCookie","env","getParam","getId","getMultiParams","sortUpdatedElement","sortPayElement","projectDataElement","project","applicationElement","createRoot","Main","applyId","setApplyId","React.useState","React.useEffect","Fragment","rootElement"],"mappings":"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"}